Inicio de sesión con Apple en Android

El inicio de sesión con Apple en Android es algo improvisado. Apple no ofrece soporte oficial para Sign in with Apple en Android, así que la solución requiere algunos rodeos.

Actualmente Android usa una pestaña de Chrome para mostrar un sitio OAuth2. Este enfoque implica dos retos principales:

• Configuración compleja
• Se necesita un backend

Comprender el flujo en Android

Este diagrama resume 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 ya conoces las limitaciones y el flujo general, pasemos a la configuración.

Creando el Service ID

1. Inicia sesión en el Apple Developer Portal

2. Haz clic en Identifiers

   

   Deberías ver una pantalla similar a esta:

   
   1. Asegúrate de que este campo dice App IDs
   2. Verifica que puedes encontrar el App ID de tu aplicación

      Note

      Si todavía no configuraste Apple Login para iOS, tendrás que crear ese App ID primero. En mi caso ya existe y usaré me.wcaleniewolny.test.ionic.vue. Si no tienes uno, créalo siguiendo la sección crear la app.

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

   1. Haz clic en tu app

      

   2. Verifica que la capacidad Sign in with Apple esté activada

      

   3. Si no está activada, actívala

4. Vuelve a All Identifiers

   

5. Haz clic en App IDs y cambia a Services IDs

   

6. Crea un identificador nuevo

   1. Haz clic en el botón con el signo +

      

   2. Selecciona Service IDs y haz clic en Continue

      

   3. Introduce una descripción y un identificador, luego haz clic en Continue

      

      Note

      Este identifier se convertirá en el clientId que pasarás a initialize y también en ANDROID_SERVICE_ID dentro del backend.

      Guárdalo.

      Note

      El Service ID no tiene que coincidir con el App ID, pero recomiendo usar algo como YOUR_APP_ID.service. Por ejemplo, mi App ID es me.wcaleniewolny.test.ionic.vue, mientras que mi Service ID es ee.forgr.io.ionic.service2.

   4. Verifica los datos y haz clic en Register

      

   5. Haz clic en el servicio recién creado

      

   6. Activa la opción Sign in with Apple

      

   7. Configura Sign in with Apple

      

   8. Asegúrate de que Primary App ID apunte al App ID configurado antes

      

   9. Añade el dominio donde vas a alojar el backend

      

      Note

      Este backend debe ejecutarse en HTTPS. En cuanto a las Return URLs, quizá quieras volver a este paso después de leer la siguiente sección del tutorial y después de configurar el backend. Para esta guía usaré https://xyz.wcaleniewolny.me/login/callback como URL de retorno y xyz.wcaleniewolny.me como dominio. Luego pulsa siguiente.

   10. Confirma los datos y haz clic en Done

       

   11. Haz clic en Continue

       

   12. Haz clic en Save

       

Creando la clave

1. Regrese a todos los “Todos los identificadores”.

   

2. Haga clic en Keys

   

3. Haga clic en el ícono más

   

4. Nombra tu clave

   

   Este nombre no es importante, puedes poner cualquier cosa.

5. Seleccione Sign in with Apple y haga clic en Configure

   

6. Seleccione la ID de la aplicación principal y presione Save

   

   Debe ser el mismo ID de aplicación que el ID de 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: Guarde este ID, en el backend se llamará KEY_ID. Descarga la clave. Asegúrese de no compartir nunca esta clave. :::

10. Busque la clave descargada y guárdela en la carpeta backend.

    

Obteniendo la identificación del equipo

Para utilizar Login with Apple en Android, necesita obtener el “ID del equipo”. Se utilizará en el backend.

1. Vaya a este sitio web y desplácese hacia abajo.

2. Busque el “ID del equipo”

   

Configurar la redirección de la aplicación

Como vio en el diagrama, el backend realiza un paso llamado “Redirigir a la aplicación”. Esto requiere cambios manuales en su aplicación.

1. Modificar el AndroidManifest.xml

   1. Abra el archivo, usaré AndroidStudio

      

   2. Busque 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. Abra el MainActivity

      

   2. Agregue el siguiente código:

      

      @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 vínculo profundo configurado. Si es así, ajuste el código. :::

Note

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

Configuración de fondo

Se requiere un backend para Android, pero la configuración de un backend también afectará a IOS. Se proporciona un ejemplo de backend aquíEste ejemplo proporciona lo siguiente:

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

Note

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

Teniendo en cuenta todo lo que dije en este tutorial, así es como se vería la sección env:

• 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 complemento

El uso de la función login no cambia, es el mismo que en IOS. Por favor, echa un vistazo a esa sección para obtener más información. SIN EMBARGO, el método initialize cambia un poco.

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

Danger

Tenga en cuenta que agregar redirectUrl **¡¡¡Afectará a IOS !!!!!

Creando la aplicación

Note

Si ya tiene una ID de aplicación, puede omitir este paso. No siga este paso si ha configurado Apple Iniciar sesión para IOS.

1. Si aún no tiene una ID de aplicación, haga clic en el botón más

   

2. Seleccione “ID de aplicación” y haga clic en continuar.

   

3. Haga clic en escribir App y haga clic en Continue

   

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

   

5. Habilite la capacidad Sign with Apple

   

6. Haga clic en Continue

   

7. Confirme los detalles y haga clic en Register