Login Apple su Android

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

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

• Configurazione difficile
• È richiesta una backend

Capire il flusso su Android.

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 siete 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, crea uno utilizzando il passo "crea app" Se non hai configurato Apple Login per IOS, dovrai crearne uno. Per me, ne ho già uno creato. L'ID dell'app che utilizzerò è __CAPGO_KEEP_0__. Se non ne hai uno, crea uno utilizzando il passo "crea app".

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

   1. Clicca sul tuo app
   2. Assicurati che la Sign in with Apple capacità sia abilitata
   3. Se non è abilitata, abilitala.

4. Torna a tutti All Identifiers

   

5. Clicca su App Ids e vai a Services IDs

   

6. Crea un nuovo identificatore

   1. Clicca sul pulsante plus

      

   2. Seleziona Servcice IDs e clicca Continue

      

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

      

      Nota

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

      Salva per favore!!!

      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 ricordo, 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 Register

      

   5. Clicca sul servizio appena creato

      

   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. Per quanto riguarda l' , potresti voler tornare a questo dopo aver letto la prossima sezione di questo tutorial e dopo aver configurato il backend. Per gli scopi di questo tutorial, utilizzerò Return URLsper l'URL di ritorno e https://xyz.wcaleniewolny.me/login/callback il dominio. Clicca su Avanti. xyz.wcaleniewolny.me Conferma i dati e clicca su

   10. Confermando la configurazione del dominio e dell'URL di ritorno Done

       

   11. __CAPGO_KEEP_0__ Continue

       

   12. Clicca su Save

       

Creazione della 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 App dell'ID precedente.

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 condividerla mai.

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

    

Ottenere l'ID del team

Per utilizzare Login with Apple su Android, è necessario ottenere il Team ID. Viene utilizzato nel backend.

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

2. Trova la Team ID

   

Configurazione dell'app redirect

Come hai visto nel diagramma, il backend esegue un passaggio chiamato Redirect back to the app. Ciò 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 intent

      

      <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 non ci siano collegamenti profondi configurati. Se lo fai, per favore regola il code

Nota

Hai appena aggiunto un nuovo collegamento profondo nella tua app. Il collegamento profondo assumerà questo aspetto: capgo-demo-app://path. Puoi modificare il android:scheme e il android:host To modificare l'aspetto di questo link profondo. Importante: In fase di configurazione del backend, questo link profondo diventerà BASE_REDIRECT_URL

Configurazione del backend

È richiesto un backend per Android, ma configurare un backend influenzerà anche IOS. Esempio di backend fornito Ecco

Questo esempio fornisce i seguenti elementi:

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

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 env questa sezione sarebbe stata formattata:

• 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 funzione non cambia, è lo stesso 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, che aggiungere redirectUrl AVEREBBE un impatto su IOS !!!!!

Creazione dell'app

Nota

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

1. Se non hai già un ID dell'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 dall'accesso Apple su Android

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