Apple login su Android

Il login con Apple su Android è poco pulito. Apple non offre supporto ufficiale per Sign in with Apple su Android, quindi la soluzione è un po' un workaround.

Attualmente Android usa le Chrome tabs per visualizzare un sito OAuth2. Questo approccio presenta queste sfide:

• Configurazione difficile
• È necessario un backend

Comprendere il flusso su Android.

Uso un diagramma per spiegare il flusso su 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)

Ora che conosci le sfide e il flusso di lavoro, iniziamo la configurazione.

Creazione del Service ID

1. Login into the Portale Apple Developer.

2. Clicca su Identifiers.

   

   Dovresti vedere una schermata simile a questa:

   
   1. Assicurati che questo campo indichi App IDs
   2. Verifica di riuscire a trovare il tuo App ID.

      Nota

      Se non hai configurato Apple Login per iOS, dovrai crearne uno. Io ne ho già uno. L'App ID che userò è me.wcaleniewolny.test.ionic.vue. Se non ne hai uno, creane uno usando il passo di creazione dell'app.

3. Assicurati che la Sign in with Apple capability sia abilitata per la tua app

   1. Clicca sulla tua app
   2. Verifica che la Sign in with Apple capability sia abilitata
   3. Se non è abilitata, attivala.

4. Torna all'elenco All Identifiers

   

5. Clicca su App Ids e vai su Services IDs

   

6. Creare un nuovo identificatore

   1. Clicca sul pulsante +

      

   2. Seleziona Servcice IDs e clicca Continue

      

   3. Inserisci una descrizione e un identificatore, poi fai clic su Continuie.

      

      Nota

      Questo identifiers diventerà il clientId che passerai nella initialize funzione E ANDROID_SERVICE_ID per il backend.

      Salvatelo, per favore!!!

      Nota

      L'ID servizio non deve corrispondere all'App ID, ma consiglio di impostare l'ID servizio su YOUR_APP_ID.service . Per riepilogo, sto usando me.wcaleniewolny.test.ionic.vue come app ID, ma sto usando ee.forgr.io.ionic.service2 come service ID.

   4. Verifica i dettagli e fai clic su Register

      

   5. Clicca sul service appena creato

      

   6. Abilita Sign in with Apple opzione

      

   7. Configura il Sign In with Apple

      

   8. Verifica che la Primary App ID è impostato sull'App ID configurato nel passaggio precedente

      

   9. Aggiungi il dominio su cui ospiterai il tuo backend.

      

      Nota

      Questo backend deve girare su HTTPS. Per quanto riguarda il Return URLs, potresti tornare su questo punto dopo aver letto la sezione successiva di questo tutorial e aver configurato il backend. Per questo tutorial userò https://xyz.wcaleniewolny.me/login/callback come return URL e xyz.wcaleniewolny.me come domain. Premi Avanti.

   10. Conferma i dati e clicca su Done

       

   11. Clicca su Continue

       

   12. Clicca su Save

       

Creazione della chiave

1. Torna all'elenco All Identifiers

   

2. Clicca su Keys

   

3. Clicca sull'icona plus

   

4. Dai un nome alla chiave

   

   Nota

   Questo nome non è importante, puoi scrivere ciò che vuoi.

5. Seleziona Sign in with Apple e clicca Configure

   

6. Seleziona l'App ID principale e premi Save

   

   Nota

   Questo deve essere lo stesso App ID utilizzato nei passaggi precedenti.

7. Clicca su Continue

   

8. Clicca su Register

   

9. Copia il Key ID e scarica la chiave.

   

   Attenzione

   IMPORTANTE: Salva questo ID, nel backend verrà chiamato KEY_ID. Scarica la chiave. Assicurati di non condividerla mai.

10. Trova la chiave scaricata e salvala nella cartella del backend.

    

Ottenere l'ID del team

Per utilizzare Login with Apple su Android, devi ottenere l' Team ID. Verrà utilizzato nel backend.

1. Vai su questo sito web e scorri verso il basso

2. Trova il Team ID

   

Configurazione del redirect dell'app

Come visto nel diagramma, il backend esegue un passaggio chiamato Redirect back to the app. Questo richiede modifiche manuali alla tua app.

1. Modifica il AndroidManifest.xml

   1. Apri il file, userò AndroidStudio

      

   2. Trova il MainActivity e aggiungi il seguente 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 il MainActivity

   1. Please open the MainActivity

      

   2. Aggiungi il seguente 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);
      }

      Attenzione

      Questo esempio presuppone che tu non abbia deep link configurati. Se ne hai, modifica il code

Nota

Hai appena aggiunto un nuovo deep link alla tua app. Il deep link sarà simile a questo: capgo-demo-app://path. Puoi cambiare il android:scheme e il android:host per modificare l'aspetto di questo deep link. Importante: Nella configurazione del backend, questo deep link diventerà BASE_REDIRECT_URL

Configurazione del backend

Un backend è necessario per Android, ma configurarlo avrà effetti anche su iOS. Viene fornito un backend di esempio qui

Questo esempio fornisce quanto segue:

• Un semplice database JSON
• Un modo per richiedere il JWT dai server di Apple
• Una semplice verifica del JWT

Nota

Uso PM2 per ospitare questo esempio. Un esempio ecosystem.config.js si può trovare qui

Considerando tutto quello che ho detto in questo tutorial, ecco come env dovrebbe apparire la sezione:

• ANDROID_SERVICE_ID = ID del servizio
• 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"
}

Usare il plugin

The usage of the login funzione non cambia, è lo stesso di iOS. Dai un'occhiata a quella sezione per maggiori info. TUTTAVIA, il initialize il metodo cambia un po'.

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

Pericolo

Nota che l'aggiunta di redirectUrl SERVIRÀ ha effetto su iOS !!!!!

Creazione dell'app

Nota

Se hai già un App ID, puoi saltare questo passaggio. Non seguire questo passaggio se hai configurato Apple Login per iOS.

1. Se non hai già un App ID, fai clic sul pulsante più

   

2. Seleziona App IDs e fai clic su Continua

   

3. Clicca su type App e clicca Continue

   

4. Inserisci la descrizione e l'app ID

   

5. Abilita Sign with Apple capability

   

6. Clicca su Continue

   

7. Conferma i dettagli e clicca Register

   

Continuare con il login Apple su Android

Se stai usando Apple login su Android per pianificare i flussi di autenticazione e account, collegandolo a Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.