Autenticación de Apple en Android

El inicio de sesión de Apple en Android es engañoso. Apple no ofrece soporte oficial para Sign in with Apple en Android, por lo que la solución es ligeramente engañosa.

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

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

Entender el flujo en Android

Déjame usar un diagrama para explicar 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.

Creando el ID de servicio

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

2. Hacer 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.vueSi 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á habilitada, habilita

4. Vuelve a la lista de todas All Identifiers

   

5. Haz clic en App Ids y ve a Services IDs

   

6. Crear un nuevo identificador

   1. Haz clic en el botón de más

      

   2. Seleccionar Servcice IDs y hacer clic Continue

      

   3. Introducir una descripción y un identificador y hacer clic Continuie.

      

      Nota

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

      Por favor, guárdalo!!!

      Nota

      El ID de servicio no tiene que coincidir con el ID de la aplicación, pero recomiendo establecer el ID de servicio a YOUR_APP_ID.service Como recordatorio, estoy utilizando me.wcaleniewolny.test.ionic.vue para mi ID de la aplicación pero estoy utilizando ee.forgr.io.ionic.service2 como el ID de servicio.

   4. Por favor, verifique los detalles y haga clic Register

      

   5. Haga clic en el servicio de ID recién creado

      

   6. Habilitar la Sign in with Apple opción

      

   7. Configurar el Sign In with Apple

      

   8. Asegúrese de que Primary App ID se establece en la ID de la aplicación configurada en el paso anterior

      

   9. Agregar el dominio en el que vas a hospedar tu backend.

      

      Nota

      Este backend debe estar corriendo en HTTPS. En cuanto a ti, es posible que desees regresar a este paso 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é Return URLspara la URL de retorno y https://xyz.wcaleniewolny.me/login/callback el dominio. Presiona siguiente. xyz.wcaleniewolny.me Para los fines de este tutorial, se utilizará

   10. Confirmar los datos y hacer clic Done

       

   11. Hacer clic en Continue

       

   12. Hacer clic en Save

       

Creando la clave

1. Volver a todos All Identifiers

   

2. Hacer 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. Seleccionar Sign in with Apple y hacer clic Configure

   

6. Selecciona el ID de App principal, y presiona Save

   

   Nota

   Este debe ser el mismo ID de la aplicación que el 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.

   

   Advertencia

   IMPORTANTE: Guarde este ID, en el backend se le llamará KEY_ID. Descargar la clave. Asegúrese de nunca compartir esta clave.

10. Encuentre el archivo de la clave descargada y guarde en el carpeta del backend.

    

Obtener el ID del equipo

Para utilizar Login with Apple en Android, necesita obtener el Team ID. Se utilizará en el backend.

1. Vaya a esta página web y desplácese hacia abajo

2. Encuentra la ubicación del ID de equipo en la cuenta de desarrollador Team ID

   

Sección titulada “Configuración de la redirección de la aplicación”

Este requiere cambios manuales en tu aplicación. Redirect back to the appModificar el

1. Abre el archivo, utilizaré AndroidManifest.xml

   1. Archivo AndroidManifest.xml en Android Studio AndroidStudio

      

   2. y agrega el siguiente filtro de intención MainActivity Filtro de intención __CAPGO_KEEP_0__ para agregar en MainActivity

      

      <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, abre 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);
      }

      Este ejemplo asume que no tienes configurados ningún enlace profundo. Si lo tienes, por favor ajusta el __CAPGO_KEEP_0__

      This example assumes that you don’t have any deep links configured. If you do, please adjust the code

]}

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

Configuración del 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 desde 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 se vería env esta sección:

• ANDROID_SERVICE_ID = Identificador de Servicio
• IOS_SERVICE_ID = Identificador 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 La función no cambia, es lo mismo que IOS. Por favor, consulte esa sección para obtener más información. Sin embargo, el initialize El 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 Afectará IOS !!!!! Crear la aplicación

Sección titulada “Crear la aplicación”

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

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

1. Agregar nuevo identificador de más

   

2. y hacer clic en continuar App IDs Seleccionando el tipo de ID de App

   

3. Haz clic en tipo App y haz clic Continue

   

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

   

5. Habilitar Sign with Apple habilidad

   

6. Haz clic Continue

   

7. Confirmar los detalles y haz clic Register

   

Sigue adelante desde Apple login en Android

Si estás utilizando Apple login en Android para planificar la autenticación y los flujos de cuenta, conecta con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social, @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social, @capgo/capacitor-clave-privada para el detalle de implementación en @capgo/capacitor-clave-privada, @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría nativa, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores.