Iniciar sesión en 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.

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

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

Entendiendo el flujo en Android.

Me gustaría 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.

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. __CAPGO_KEEP_0__ App IDs
   2. Asegúrate de que este campo diga

      Nota

      Nota me.wcaleniewolny.test.ionic.vueSi 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 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úrese de que la Sign in with Apple capacidad esté habilitada
   3. Si no está habilitada, habilítela.

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. Introducir una descripción y identificadores y hacer clic Continuie.

      

      Nota

      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

      El ID de servicio no tiene que coincidir con el ID de la aplicación, pero te recomiendo establecer el ID de servicio a 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 Sign in with Apple opción

      

   7. Configurar el Sign In with Apple

      

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

      

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

      

      Nota

      Esta backend debe estar funcionando en HTTPS. En cuanto a la , es posible que desees volver a esto después de leer la siguiente sección de este tutorial y después de configurar el backend. A efectos de este tutorial, utilizaré Return URLspara la URL de retorno y https://xyz.wcaleniewolny.me/login/callback el dominio. Presiona siguiente. xyz.wcaleniewolny.me Confirmar los datos y haz clic en

   10. Configuración de dominio y URL de retorno confirmada Done

       

   11. Botón de continuación para la configuración del servicio Continue

       

   12. Botón de guardar para la configuración del servicio Save

       

__CAPGO_KEEP_0__

1. Volver a todos All Identifiers

   

2. Haga clic en Keys

   

3. Haga clic en el icono de más

   

4. Asigne un nombre a su clave

   

   Nota

   Este nombre no es importante, puede poner cualquier cosa.

5. Seleccionar Sign in with Apple y hacer clic Configure

   

6. Seleccionar el ID de aplicación principal, y presionar Save

   

   Nota

   Este debe ser el mismo ID de aplicación que el ID en los pasos anteriores.

7. Hacer clic en Continue

   

8. Hacer clic en Register

   

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

   

   Cuidado

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

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

    

Obtener el ID de equipo

Para utilizarlo Login with Apple en Android, necesitas 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 redirección de la aplicación

Como viste en el diagrama, el backend realiza un paso llamado Redirect back to the appEsto requiere cambios manuales en tu aplicación.

1. Modificar el AndroidManifest.xml

   1. Abra 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 MainActivity

      

   2. Agregue el siguiente code:

      

      @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);
      }

      Cuidado

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

Nota

Has agregado una nueva ruta profunda a tu aplicación. La ruta profunda se verá algo así: capgo-demo-app://path Puedes cambiar el android:scheme y el android:host para modificar cómo se ve esta ruta profunda. Importante: En la configuración del backend, esta ruta profunda 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 de los servidores de Apple
• Una verificación JWT simple

Nota

Utilizo PM2 para alojar este ejemplo. Se puede encontrar un ejemplo ecosystem.config.js aquí aquí

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

• 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 cambian 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 WILL afectará IOS !!!!!

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.

Nota

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

   

2. Seleccionar App IDs y haz clic en continuar

   

3. Haz clic en tipo App y haz clic Continue

   

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

   

5. capacidad Sign with Apple habilitar

   

6. Haga clic Continue

   

7. Confirme los detalles y haga clic Register

   

Siga adelante desde el inicio de sesión de Apple en Android

Si está utilizando Inicio de sesión de Apple en Android para planificar la autenticación y los flujos de cuenta, conéctelo con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login @capgo/capacitor-login-social para los detalles de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-llave para los detalles de implementación en @capgo/capacitor-clave-llave @capgo/capacitor-biometría-nativa para los detalles de implementación en @capgo/capacitor-biometría-nativa, y autenticación de dos factores para los detalles de implementación en autenticación de dos factores.