Apple login su Android

L'accesso Apple su Android è un po' furbesco. Apple non offre alcun supporto ufficiale per Sign in with Apple su Android, quindi la soluzione è leggermente furbesca.

Android utilizza attualmente un tab chrome per visualizzare un sito web OAuth2. Questo approccio presenta i seguenti problemi:

• Configurazione difficile
• È richiesto un backend

Capire il flusso su Android.

Usami 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 sei a conoscenza dei problemi e del flusso, iniziamo la configurazione.

Creazione dell'ID del servizio

1. Accedi al Portale dello Sviluppatore Apple.

2. Clicca su Identifiers.

   

   Dovresti vedere una schermata che assomiglia a questa:

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

      Nota

      Se non hai configurato Apple Login per IOS, dovrai crearne uno. Per me, ne ho già uno creato. L'ID dell'app che utilizzerò è me.wcaleniewolny.test.ionic.vueSe non ne hai uno, per favore crea uno utilizzando il passaggio di creazione dell'app.

3. Assicurati che il Sign in with Apple capacità sia abilitata per la tua app

   1. Clicca sul tuo app
   2. Assicurati che il Sign in with Apple capacità sia abilitato
   3. Se non è abilitato, abilitalo.

4. Torna indietro a tutti All Identifiers

   

5. e vai a App Ids Identificatori di navigazione pulsante Services IDs

   

6. e vai al

   1. Sezione identificatori di servizi

      

   2. Clicca sul pulsante più Servcice IDs Pulsante per aggiungere nuovo ID di servizio Continue

      

   3. e clicca Continuie.

      

      Nota

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

      Per favore salvalo!!!

      Nota

      L'ID del servizio non deve corrispondere con l'ID dell'app, ma ti consiglio di impostare l'ID del servizio su YOUR_APP_ID.service Ricorda che sto utilizzando me.wcaleniewolny.test.ionic.vue per il mio ID dell'applicazione ma sto utilizzando ee.forgr.io.ionic.service2 come ID del servizio.

   4. Verifica i dettagli e clicca Register

      

   5. Clicca sul servizio creato di recente

      

   6. abilita l' Sign in with Apple opzione

      

   7. Configura l' Sign In with Apple

      

   8. Assicurati che il Primary App ID è impostato sull'ID dell'app configurato nel passaggio precedente

      

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

      

      Nota

      Questo backend deve essere in esecuzione su HTTPS. Per quanto riguarda il Return URLs, potresti voler tornare a questo dopo aver letto la sezione successiva di questo tutorial e dopo aver configurato il backend. Per gli scopi di questo tutorial, utilizzerò https://xyz.wcaleniewolny.me/login/callback per l'URL di ritorno e xyz.wcaleniewolny.me il dominio. Clicca su next.

   10. Conferma i dati e clicca Done

       

   11. Clicca su Continue

       

   12. Clicca su Save

       

Crea la chiave

1. Torna indietro a tutti All Identifiers

   

2. Clicca su Keys

   

3. Clicca sull'icona del plus

   

4. Nomi la tua chiave

   

   Nota

   Questo nome non è importante, puoi mettere qualsiasi cosa.

5. Seleziona Sign in with Apple e clicca Configure

   

6. Seleziona l'ID App principale, e premi Save

   

   Nota

   Questo deve essere lo stesso ID dell'applicazione come l'ID nei passaggi precedenti.

7. Clicca su Continue

   

8. Clicca su Register

   

9. Copia l'ID della chiave e scarica la chiave.

   

   Attenzione

   IMPORTANTE: Salva questo ID, in backend verrà chiamato KEY_ID. Scarica la chiave. Assicurati di non condividere mai questa chiave.

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

    

Ottenere l'ID del Team

Per utilizzare Login with Apple su Android, hai bisogno di ottenere il Team ID. Verrà utilizzato in backend.

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

2. Trova la posizione dell'ID del team nel account del developer Team ID

   

Sezione intitolata “Configurazione della reindirizzamento dell'app”

. Ciò richiede modifiche manuali al tuo app. Redirect back to the appModifica il

1. Apri il file, userò AndroidManifest.xml

   1. file AndroidManifest.xml in Android Studio AndroidStudio

      

   2. e aggiungi il seguente filtro di intento MainActivity filtro di intento __CAPGO_KEEP_0__ da aggiungere in MainActivity

      

      <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 file MainActivity.java in Android Studio MainActivity

      

   2. code per aggiungere a MainActivity per il gestione dei collegamenti profondi

      

      @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);
      }

      Questo esempio assume che non hai configurato nessun collegamento profondo. Se lo hai, per favore regola il __CAPGO_KEEP_0__

      This example assumes that you don’t have any deep links configured. If you do, please adjust the code

Nota

Avete appena aggiunto un nuovo collegamento profondo nel vostro app. Il collegamento profondo assumerà l'aspetto di questo: capgo-demo-app://pathPotete modificare il android:scheme e il android:host per modificare l'aspetto di questo collegamento profondo. Importante: In fase di configurazione del backend, questo collegamento profondo diventerà BASE_REDIRECT_URL

Configurazione del backend

È richiesta una backend per Android, ma la configurazione di una backend influenzerà anche IOS. Esempio di backend fornito Esempio

Esempio di backend fornito

• Esempio di backend fornito qui sopra
• Una via per richiedere il JWT dai server di Apple
• Una semplice verifica del JWT

Nota

Utilizzo PM2 in modo da poter ospitare questo esempio. Un esempio ecosystem.config.js può essere trovato qui

Considerando tutto ciò che ho detto in questo tutorial, ecco come sarebbe apparso il env sezione:

• ANDROID_SERVICE_ID = ID del servizio
• IOS_SERVICE_ID = ID dell'applicazione

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

Utilizzo del plugin

L'uso della login La funzione non cambia, è la stessa di IOS. Per maggiori informazioni, prendi in considerazione la sezione relativa. TUTTAVIA, il initialize 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 redirectUrl WILL influenzerà l'IOS !!!!!

Creazione dell'app

Nota

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

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

   

2. Seleziona App IDs e clicca su continua

   

3. Clicca sul tipo App e clicca Continue

   

4. Inserisci la descrizione e l'ID dell'app

   

5. Abilita Sign with Apple abilità

   

6. Clicca Continue

   

7. Conferma i dettagli e clicca Register

   

Continua da Apple login su Android

Se stai utilizzando Apple login su Android per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzando @capgo/capacitor-login-social per la capacità nativa in Utilizzando @capgo/capacitor-login-social, @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-biometrica-nativa per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.