Iniciar sesión con Apple en Android

La autenticación de Apple en Android es engorrosa. Apple no ofrece soporte oficial para Sign in with Apple Por lo tanto, la solución es ligeramente engorrosa.

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

• Difícil configuración
• Se requiere un backend

Entender 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. Iniciar sesión en el Portal del Desarrollador de Apple.

2. Haga clic en Identifiers.

   

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

   
   1. Asegúrese de que este campo diga App IDs
   2. Asegúrese de que pueda encontrar su ID de aplicación.

      Nota

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

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

   1. Haga clic en su aplicación
   2. Asegúrese de que la Sign in with Apple capacidad esté habilitada
   3. Si no está habilitada, habilítela.

4. Vaya a la pestaña de All Identifiers

   

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

   

6. Crear un nuevo identificador

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

      

   2. Seleccionar Servcice IDs y hacer clic Continue

      

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

      

      Nota

      Este identifiers se convertirá en el clientId que usted pasará en el 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 recomiendo establecer el ID de 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, verifique los detalles y haga clic Register

      

   5. Haga clic en el servicio creado recientemente

      

   6. Habilitar la Sign in with Apple opción

      

   7. Configurar el Sign In with Apple

      

   8. Asegúrese de que el Primary App ID Se configura con el ID de la aplicación configurado en el paso anterior.

      

   9. Agregar el dominio en el que planea alojar su backend.

      

      Nota

      Este backend debe en estar funcionando con HTTPS. En cuanto a la Return URLs, you might want to come back to this after reading the next section of this tutorial and after configuring the backend. For the purposes of this tutorial, I will use https://xyz.wcaleniewolny.me/login/callback para el dominio. Presione siguiente. xyz.wcaleniewolny.me Confirmar los datos y haga clic en

   10. Confirmar los datos y hacer clic Done

       

   11. Haga clic en Continue

       

   12. Haz clic en Save

       

Crear la clave

1. Volver a 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. Seleccionar Sign in with Apple y hacer clic Configure

   

6. Seleccionar el ID de App principal, y presionar Save

   

   Nota

   Debes seleccionar el mismo ID de App que el ID en los pasos anteriores.

7. Haz clic en Continue

   

8. Haz clic en Register

   

9. Copia el ID de la clave y descarga la clave.

   

   Advertencia

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

10. Encuentra la clave descargada y guárdala en la carpeta de backend.

    

Obteniendo el ID del equipo

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

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

2. Encuentra la Team ID

   

Configurando la redirección de la aplicación

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

1. Modifica el AndroidManifest.xml

   1. Abre el archivo, utilizaré AndroidStudio

      

   2. Encuentra el MainActivity y agrega 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. Modifica el MainActivity

   1. Por favor, abre el MainActivity

      

   2. Agregar lo 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 configurados ningún enlace profundo. Si lo tienes, 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://pathPuedes cambiar el android:scheme y el android:host para modificar cómo se ve esta 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 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 he dicho en este tutorial, aquí está cómo se vería env La sección quedaría así:

• ANDROID_SERVICE_ID = ID de Servicio
• IOS_SERVICE_ID ID de la App

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"
}

Utilizando el plugin

El uso de la login La función no cambia, es igual que en IOS. Por favor, consulte esa sección para obtener más información. HOWEVER, pero 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'
  }
})

Danger

Nota que agregar redirectUrl WILL afectará a IOS !!!!!

Crear la aplicación

Nota

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

1. Si no tienes 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 el tipo App y haz clic Continue

   

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

   

5. Habilitar Sign with Apple funcionalidad

   

6. Hacer clic Continue

   

7. Confirmar los detalles y hacer clic Register

   

Continuar desde inicio de sesión de Apple en Android

Si está utilizando Iniciar sesión con Apple en Android para planificar la autenticación y los flujos de cuenta, conecte 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-de-pasaje para el detalle de implementación en @capgo/capacitor-clave-de-pasaje @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.