Inicio de sesión de Apple en Android

El inicio de sesión de Apple en Android es un poco engañoso. Apple no ofrece soporte oficial para Sign in with Apple La solución es un poco engañosa debido a que Apple no ofrece soporte oficial para

Actualmente, Android utiliza una pestaña de Chrome para mostrar un sitio web OAuth2. Esta aproximación tiene los siguientes desafíos:

• Configuración difícil
• Se requiere un backend

Entender el flujo en Android.

Explícamelo mediante un diagrama para entender el flujo en Android:

flowchart TD
    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
    B --> |Pass the link| C(Open the Chrome browser)
    C --> D(Wait for the user to login)
    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
    E --> F(Redirect back to the app)
    F --> G(Return to JS)

Ahora que estás al tanto de los desafíos y el flujo, comencemos la configuración.

Crear el ID de servicio

1. Inicia sesión en el Portal de desarrolladores de Apple.

2. Haga clic en Identifiers.

   

   Deberías ver una pantalla que se parece a esta:

   
   1. Asegúrate de que este campo diga App IDs
   2. Asegúrate de que puedas encontrar tu ID de App.

      Nota

      Si no has configurado Apple Login para IOS, tendrás que crear uno. Para mí, ya tengo uno creado. El ID de la aplicación que utilizaré es me.wcaleniewolny.test.ionic.vue. Si no tienes uno, por favor crea uno utilizando el paso de crear aplicación.

3. Asegúrate de que la Sign in with Apple capacidad esté habilitada para tu aplicación

   1. Haz clic en tu aplicación
   2. Asegúrate de que la Sign in with Apple capacidad esté habilitada
   3. Si no está habilitado, habilítelo.

4. Volver a todos All Identifiers

   

5. Haga clic en App Ids y vaya a Services IDs

   

6. Crear un nuevo identificador

   1. Haga clic en el botón de más (+)

      

   2. Seleccionar Servcice IDs y hacer clic Continue

      

   3. Introduzca una descripción y un identificador y haga clic Continuie.

      

      Notas

      Esto identifiers se convertirá en el clientId que pasarás en la initialize función Y ANDROID_SERVICE_ID para el backend.

      Por favor, guárdelo!!!

      Nota

      No es necesario que el ID del servicio coincida con el ID de la aplicación, pero te recomiendo establecer el ID del servicio en YOUR_APP_ID.service Como recordatorio, estoy utilizando me.wcaleniewolny.test.ionic.vue para mi ID de aplicación pero estoy utilizando ee.forgr.io.ionic.service2 como ID de servicio.

   4. Por favor, verifica los detalles y haz clic en Register

      

   5. Haz clic en el servicio creado recientemente

      

   6. Habilitar la Sign in with Apple opción

      

   7. Configura el Sign In with Apple

      

   8. Asegúrate de que el Primary App ID esté configurado en el ID de la aplicación configurado en el paso anterior

      

   9. Agrega el dominio en el que vas a alojar tu backend.

      

      Nota

      Este backend debe estar ejecutándose en HTTPS. En cuanto a los Return URLs, es posible que desees regresar a esto después de leer la siguiente sección de este tutorial y después de configurar el backend. Para los fines de este tutorial, utilizaré https://xyz.wcaleniewolny.me/login/callback para la URL de retorno y xyz.wcaleniewolny.me el dominio. Presiona siguiente.

   10. Confirmar los datos y haz clic en Done

       

   11. Haz clic en Continue

       

   12. Haz clic en Save

       

Creando la clave

1. Vuelve a la lista de todos All Identifiers

   

2. Haz clic en Keys

   

3. Haz clic en el icono de más

   

4. Nombra tu clave

   

   Nota

   Este nombre no es importante, puedes poner cualquier cosa.

5. Selecciona Sign in with Apple y haz clic Configure

   

6. Seleccionar la App ID principal, y presionar Save

   

   Notas

   Deben ser las mismas App ID que la ID en los pasos anteriores.

7. Haga clic en Continue

   

8. Haga clic en Register

   

9. Copie el ID de la clave y descargue la clave.

   

   Precaución

   IMPORTANTE: Guarda este ID, en el backend se llamará KEY_IDDescarga la clave. Asegúrate de nunca compartir esta clave.

10. Encuentra el archivo de la clave descargada y guárdalo en la carpeta del backend.

    

Obteniendo el ID de equipo

Para utilizar Login with Apple en Android, debes obtener el Team IDSe utilizará en el backend.

1. Ir a esta página web y desplázate hacia abajo

2. Encuentra la Team ID

   

Configuración de la aplicación de redireccionamiento

Al observar en el diagrama, el backend realiza un paso llamado Redirect back to the appEste requiere cambios manuales en tu aplicación.

1. Modificar el AndroidManifest.xml

   1. Abre el archivo, utilizaré AndroidStudio

      

   2. Encuentre el MainActivity y agregue el siguiente filtro de intención

      

      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="capgo-demo-app" android:host="path" />
      </intent-filter>

2. Modificar el MainActivity

   1. Por favor, abra el archivo MainActivity.java en Android Studio MainActivity

      

   2. code para agregar a MainActivity para manejar enlaces profundos

      

      @Override
      protected void onNewIntent(Intent intent) {
          String action = intent.getAction();
          Uri data = intent.getData();
      
          if (Intent.ACTION_VIEW.equals(action) && data != null) {
              PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
              if (pluginHandle == null) {
                  Log.i("Apple Login Intent", "SocialLogin login handle is null");
                  return;
              }
              Plugin plugin = pluginHandle.getInstance();
              if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Apple Login Intent", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
              }
              ((SocialLoginPlugin) plugin).handleAppleLoginIntent(intent);
              return;
          }
          super.onNewIntent(intent);
      }

      Advertencia

      Este ejemplo supone que no tienes configuradas ninguna enlace profundo. Si lo haces, por favor ajusta el code

Nota

Has agregado un nuevo enlace profundo a tu aplicación. El enlace profundo se verá algo así: capgo-demo-app://path Puedes cambiar el android:scheme y el android:host para modificar cómo se ve este enlace profundo. Importante: En la configuración de backend, este enlace profundo se convertirá en BASE_REDIRECT_URL

Configuración de backend

Se requiere un backend para Android, pero configurar un backend también afectará a IOS. Se proporciona un ejemplo de backend aquí

Este ejemplo proporciona lo siguiente:

• Una base de datos JSON simple
• Una forma de solicitar el JWT de los servidores de Apple
• Una verificación JWT simple

Nota

Utilizo PM2 para alojar este ejemplo. Un ejemplo ecosystem.config.js se puede encontrar aquí

Dado todo lo que dije en este tutorial, aquí está cómo hacerlo env La sección se vería así:

• ANDROID_SERVICE_ID = ID de Servicio
• IOS_SERVICE_ID = ID de Aplicación

env: {
  PRIVATE_KEY_FILE: "AuthKey_U93M8LBQK3.p8",
  KEY_ID: "U93M8LBQK3",
  TEAM_ID: "UVTJ336J2D",
  ANDROID_SERVICE_ID: "ee.forgr.io.ionic.starter.service2",
  IOS_SERVICE_ID: "me.wcaleniewolny.test.ionic.vue",
  PORT: 3000,
  REDIRECT_URI: "https://xyz.wcaleniewolny.me/login/callback",
  BASE_REDIRECT_URL: "capgo-demo-app://path"
}

Usando el plugin

El uso de la login función no cambia, es lo mismo que en IOS. Por favor, consulte esa sección para obtener más información. Sin embargo, el initialize método cambia un poco.

await SocialLogin.initialize({
  apple: {
    clientId: 'ee.forgr.io.ionic.starter.service2',
    redirectUrl: 'https://appleloginvps.wcaleniewolny.me/login/callback'
  }
})

Peligro

Nota, que agregar redirectUrl PRODRA afectará IOS !!!!!

Crear la aplicación

Nota

Si ya tienes un ID de App, puedes saltarte este paso. No sigas este paso si has configurado Apple Login para IOS.

1. Si no tienes un ID de App, haz clic en el botón de más

   

2. Seleccionar App IDs y hacer clic en continuar

   

3. Hacer clic en tipo App y hacer clic Continue

   

4. Introducir la descripción y el ID de la aplicación

   

5. Habilitar Sign with Apple capacidad

   

6. Hacer clic Continue

   

7. Confirmar los detalles y hacer clic Register

   

Siga adelante desde la autenticación de Apple en Android

Si estás utilizando Autenticación de Apple en Android para planificar la autenticación y los flujos de cuenta, conecta con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-social-login para el detalle de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Autenticación de dos factores Para obtener más detalles sobre la implementación en Autenticación de dos factores.