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. Accedi con Portale Apple Developer.

2. Clicca su Identifiers.

   

   Dovresti vedere una schermata simile a questa:

   
   1. Assicurati che questo campo riporti App IDs
   2. Verifica di poter trovare il tuo App ID.

      Nota

      Se non hai configurato Apple Login per iOS, dovrai crearne uno. Io ne ho già uno creato. L'App ID che userò è me.wcaleniewolny.test.ionic.vue. Se non ne hai uno, crealo seguendo il passaggio per la 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 identifier

   1. Clicca sul pulsante +

      

   2. Seleziona Servcice IDs e cliccare su Continue

      

   3. Inserire descrizione e identifier e cliccare Continuie.

      

      Nota

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

      Salvalo per favore!!!

      Nota

      Il Service ID non deve coincidere con l'App ID, ma ti consiglio di impostare il service ID come YOUR_APP_ID.service . Ricorda che sto usando me.wcaleniewolny.test.ionic.vue per il mio app ID, ma sto usando ee.forgr.io.ionic.service2 come service ID.

   4. Verifica i dettagli e clicca Register

      

   5. Clicca sul nuovo service creato

      

   6. Abilita l'opzione 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 su Configure

   

6. Seleziona l'App ID principale e premi Save

   

   Nota

   Deve corrispondere all'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 il Team ID

Per poter utilizzare Login with Apple su Android, devi ottenere il 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. Per favore, apri il 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 backend

Il backend è richiesto per Android, ma la sua configurazione influirà anche su iOS. Viene fornito un esempio di backend qui

Questo esempio include quanto segue:

• Un semplice database JSON
• Un metodo per richiedere il JWT dai server 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 = Service ID
• 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 function non cambia, è identico a quello per iOS. Consulta quella sezione per maggiori dettagli. TUTTAVIA, il initialize il metodo cambia leggermente.

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À influenza iOS !!!!!

Creazione dell'app

Nota

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

1. Se non hai ancora un App ID, clicca sul pulsante plus

   

2. Seleziona App IDs e clicca su continue

   

3. Clicca sul tipo 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

   

Continua con l'accesso 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.