Apple login su Android

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

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

• Configurazione difficile
• È richiesta una backend

Capire il flusso su Android.

Vorrei usare 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.

   

   Devi 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 crea app step.

3. Assicurati che il Sign in with Apple sia abilitato per la tua app

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

4. Torna indietro a tutti All Identifiers

   

5. Clicca su App Ids e vai a Services IDs

   

6. Crea un nuovo identificatore

   1. Clicca sul pulsante più

      

   2. Seleziona Servcice IDs e clicca Continue

      

   3. Inserisci una descrizione e degli identificatori e clicca Continuie.

      

      Nota

      Questo identifiers diventerà l'ID del servizio che passerai nella clientId funzione E initialize per il backend. ANDROID_SERVICE_ID Salvalo!!

      Nota

      Nota

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

   4. Verifica i dettagli e clicca su Register

      

   5. Clicca sul servizio

      

   6. Abilita l' Sign in with Apple opzione

      

   7. Configura il Sign In with Apple

      

   8. Assicurati che il Primary App ID sia impostato sull'ID App configurato nel passaggio precedente

      

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

      

      Nota

      Questo backend deve essere in esecuzione su HTTPS. Inoltre, il deve essere impostato sull'ID App configurato nel passaggio precedente Return URLs, tornate a questo punto dopo aver letto la prossima sezione del tutorial e dopo aver configurato il backend. Per i fini di questo tutorial, utilizzerò https://xyz.wcaleniewolny.me/login/callback per l'URL di ritorno e xyz.wcaleniewolny.me il dominio. Premere next.

   10. Confermare i dati e cliccare Done

       

   11. Cliccare su Continue

       

   12. Cliccare su Save

       

Creazione della chiave

1. Tornare a tutti All Identifiers

   

2. Clicca su Keys

   

3. Clicca sull'icona del plus

   

4. Dai un nome alla chiave

   

   Nota

   Questo nome non è importante, puoi mettere qualsiasi cosa.

5. Scegli Sign in with Apple e clicca Configure

   

6. Selezionare l'ID App principale e premere Save

   

   Nota

   Questo deve essere lo stesso ID App dell'ID nella precedenti passaggi.

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_IDScarica la chiave. Assicurati di non condividere mai questa chiave.

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

    

Ottenimento dell'ID del team

Per utilizzare Login with Apple su Android, è necessario ottenere il Team IDche verrà utilizzato in backend.

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

2. Trova la Team ID

   

Configurazione della reindirizzamento dell'app

Come hai visto nel diagramma, il backend esegue un passaggio chiamato Redirect back to the appQuesto richiede modifiche manuali all'app.

1. Modifica il AndroidManifest.xml

   1. Apri il file, userò AndroidStudio

      

   2. Trova il MainActivity e aggiungi il seguente filtro di intento

      

      <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. Si prega di aprire il file MainActivity.java in Android Studio MainActivity

      

   2. code da aggiungere a MainActivity per gestire i 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);
      }

      Attenzione

      Esempio: si suppone che non si abbiano configurati alcun collegamento profondo. Se lo si fa, si prega di regolare il code

Nota

Ha appena aggiunto un nuovo collegamento profondo nell'app. Il collegamento profondo assumerà l'aspetto seguente: capgo-demo-app://path Puoi modificare il android:scheme e il android:host per modificare l'aspetto di questo collegamento profondo. Importante: Nel backend di configurazione, questo collegamento profondo diventerà BASE_REDIRECT_URL

Configurazione backend

È richiesto un backend per Android, ma configurare un backend influenzerà anche l'IOS. Esempio di backend è fornito qui

Ecco un esempio che fornisce i seguenti:

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

Nota

Utilizzo PM2 per ospitare questo esempio. Un esempio ecosystem.config.js può essere trovato qui

Considerando tutto ciò che ho detto in questo tutorial, ecco come fare env La sezione si presenterebbe così:

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

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'utilizzo della login funzione non cambia, è la stessa di IOS. Per maggiori informazioni, si prega di consultare quella sezione. 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, aggiungendo redirectUrl CIÒ SARÀ avrà un impatto su 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 IOS.

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

   

2. Seleziona App IDs e clicca 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

   

Prosegui con il login Apple su Android

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