Apple login en Android

El login de Apple en Android es poco ortodoxo. Apple no ofrece soporte oficial para Sign in with Apple en Android, así que la solución es un poco chapucera.

Android actualmente usa Chrome Tabs para mostrar un sitio web OAuth2. Este enfoque tiene estos retos:

• Configuración complicada
• Requiere un backend

Entender el flujo en Android.

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 conoces los retos y el flujo, empecemos con la configuración.

Creación del Service ID

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

2. Haz clic en Identifiers.

   

   Deberías ver una pantalla como esta:

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

      Nota

      Si no has configurado Apple Login para iOS, tendrás que crear uno. En mi caso, ya tengo uno creado. El app ID que usaré es me.wcaleniewolny.test.ionic.vue. Si no tienes uno, por favor crea uno usando el paso de creación de la app.

3. Asegúrate de que la Sign in with Apple capability esté habilitada para tu app

   1. Haz clic en tu app
   2. Asegúrate de que la Sign in with Apple capability esté habilitada
   3. Si no está habilitada, actívala.

4. Volver a la lista completa 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 +

      

   2. Selecciona Servcice IDs y haz clic en Continue

      

   3. Ingresa descripción e identificadores y haz clic Continuie.

      

      Nota

      Esto identifiers pasará a ser el clientId that you will pass in the initialize función Y ANDROID_SERVICE_ID para el backend.

      ¡Guárdalo, por favor!

      Nota

      El Service ID no tiene que coincidir con el App ID, pero recomiendo configurar el service ID como YOUR_APP_ID.service . Como recordatorio, estoy usando me.wcaleniewolny.test.ionic.vue para mi app ID, pero uso ee.forgr.io.ionic.service2 como el service ID.

   4. Verifica los detalles y haz clic en Register

      

   5. Haz clic en el service recién creado

      

   6. Habilita el Sign in with Apple opción

      

   7. Configurar el Sign In with Apple

      

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

      

   9. Agrega el dominio donde vas a alojar tu backend.

      

      Nota

      Este backend debe funcionar con HTTPS. En cuanto al 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 como return URL y xyz.wcaleniewolny.me como domain. Pulsa siguiente.

   10. Confirma los datos y haz clic en Done

       

   11. Haz clic en Continue

       

   12. Haz clic en Save

       

Creación de la clave

1. Volver a la lista completa All Identifiers

   

2. Haz clic en Keys

   

3. Haz clic en el icono de más

   

4. Ponle un nombre a tu clave

   

   Nota

   Este nombre no es importante, puedes poner cualquiera.

5. Selecciona Sign in with Apple y haz clic en Configure

   

6. Selecciona el App ID principal y presiona Save

   

   Nota

   Debe ser el mismo App ID que el de los pasos anteriores.

7. Haz clic en Continue

   

8. Haz clic en Register

   

9. Copia el Key ID y descarga la clave.

   

   Precaución

   IMPORTANTE: Guarda este ID; en el backend se llamará KEY_ID. Descarga la clave. Asegúrate de no compartirla nunca.

10. Busca la clave descargada y guárdala en la carpeta del backend.

    

Obtener el Team ID

Para poder usar Login with Apple en Android, necesitas obtener el Team ID. Se usará en el backend.

1. Ve a este sitio web y desplázate hacia abajo

2. Busca el Team ID

   

Configuración del redirect de la app

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

1. Modifica el AndroidManifest.xml

   1. Abre el archivo, usaré AndroidStudio

      

   2. Busca el MainActivity y añade el siguiente Intent filter

      

      <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 la MainActivity

      

   2. Añade 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);
      }

      Precaución

      Este ejemplo supone que no tienes ningún deep link configurado. Si los tienes, ajusta el code

Nota

Acabas de añadir un nuevo deep link a tu app. El deep link será algo así: capgo-demo-app://path. Puedes cambiar el android:scheme y la android:host para modificar la apariencia de este deep link. Importante: En la configuración del backend, este deep link será BASE_REDIRECT_URL

Configuración del backend

Se requiere un backend para Android, pero configurarlo también afectará a iOS. Se incluye un ejemplo de backend aquí

Este ejemplo incluye lo siguiente:

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

Nota

Uso PM2 para alojar este ejemplo. Puedes encontrar un ejemplo ecosystem.config.js se puede encontrar aquí

Teniendo en cuenta lo anterior, así es como quedaría la env la sección se vería así:

• ANDROID_SERVICE_ID = ID de servicio
• IOS_SERVICE_ID = App ID

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 igual que en iOS. Por favor, consulta esa sección para más información. SIN EMBARGO,, 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

Ten en cuenta que añadir redirectUrl FALLARÁN afecta a iOS !!!!!

Crear la app

Nota

Si ya tienes un App ID, puedes saltarte este paso. No sigas este paso si ya configuraste Apple Login para iOS.

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

   

2. Selecciona App IDs y haz clic en continuar

   

3. Haz clic en tipo App y haz clic en Continue

   

4. Introduce la descripción y el ID de la app

   

5. Activar Sign with Apple capacidad

   

6. Haz clic Continue

   

7. Confirma los detalles y haz clic Register

   

Continuar tras el login de Apple en Android

Si estás usando Apple login en Android para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa en el uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.