Accedi con Apple su Android

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

Attualmente Android utilizza una finestra di Chrome per visualizzare un sito web OAuth2. Questo approccio presenta i seguenti problemi:

• Configurazione difficile
• È richiesta una backend

Capire il flusso su Android

Mi spiego meglio con 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. Accedete al Portale degli sviluppatori Apple.

2. Cliccate su Identifiers.

   

   Deve apparire una schermata che assomiglia a questa:

   
   1. Assicuratevi che questo campo dica App IDs
   2. Assicuratevi di poter trovare il vostro ID App.

      Nota

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

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 La capacità è abilitata
   3. Se non è abilitato, abilitalo.

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 gli identificatori e clicca Continuie.

      

      Nota

      Questo identifiers diventerà l'ID del servizio che passerai nella clientId that you will pass in the initialize per il backend. ANDROID_SERVICE_ID Per favore, salvalo!!!

      L'ID del servizio non deve corrispondere all'ID dell'app, ma ti consiglio di impostare l'ID del servizio su

      Nota

      ID del servizio non deve corrispondere all'ID dell'app, ma ti consiglio di impostare l'ID del servizio su YOUR_APP_ID.service . Ricorda di utilizzare 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 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 to be running on HTTPS. As for the Return URLspotresti voler tornare a questo dopo aver letto la sezione successiva di questo 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. 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

   Questa denominazione 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

   Deve essere lo stesso ID dell'applicazione del passaggio precedente.

7. Clicca su Continue

   

8. Clicca su Register

   

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

   

   Preavviso

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

10. Trova il file scaricato e salvalo nella cartella backend.

    

Ottieni l'ID del Team

Per utilizzare Login with Apple su Android, devi ottenere il Team IDsarà utilizzato in backend.

1. Vai a questo sito web e scorrere 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 la 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. Si prega di aprire il MainActivity

      

   2. Aggiungi i seguenti 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 assume che non hai configurato alcun collegamento profondo. Se lo hai fatto, si prega di regolare il code

Nota

Hai appena aggiunto un nuovo collegamento profondo nel tuo app. Il collegamento profondo assumerà l'aspetto seguente: capgo-demo-app://path. Puoi modificare il android:scheme e il android:host modificare l'aspetto di questa deep link. 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 here

Questo esempio fornisce i seguenti:

• Una semplice database JSON
• 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 sarebbe la env La sezione sarebbe così:

• ANDROID_SERVICE_ID = ID del servizio
• IOS_SERVICE_ID = ID 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, che l'aggiunta redirectUrl WILL influenzare 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. Scegli 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 con 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-chiave di accesso per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-autenticazione-biometrica 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.