Login Apple su Android

Il login Apple su Android è complicato. Apple non ha supporto ufficiale per Sign in with Apple su Android, quindi la soluzione è leggermente hacky.

Android attualmente utilizza schede Chrome per visualizzare un sito web OAuth2. Questo approccio presenta le seguenti sfide:

• Configurazione difficile
• È richiesto un backend

Comprendere il flusso su Android

Lascia che usi 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 consapevole delle sfide e del flusso, iniziamo la configurazione.

Creazione del Service ID

1. Accedi al Portale Sviluppatori Apple.

2. Clicca su Identifiers.

   

   Dovresti vedere una schermata simile a questa:

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

      Note

      Se non hai configurato il Login Apple per iOS, dovrai crearne uno. Per me, ne ho già uno creato. L’app ID che userò è me.wcaleniewolny.test.ionic.vue. Se non ne hai uno, creane uno usando il passaggio di creazione app.

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

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

4. Torna a 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 un identificatore e clicca Continuie.

      

      Note

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

      Per favore salvalo!!!

      Note

      Il Service ID non deve corrispondere all’App ID, ma raccomando di impostare il service ID su YOUR_APP_ID.service. Come promemoria, 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 servizio appena creato

      

   6. Abilita l’opzione Sign in with Apple

      

   7. Configura il Sign In with Apple

      

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

      

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

      

      Note

      Questo backend deve essere eseguito su HTTPS. Per quanto riguarda i Return URLs, 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, userò https://xyz.wcaleniewolny.me/login/callback per l’URL di ritorno e xyz.wcaleniewolny.me come dominio. Premi next.

   10. Conferma i dati e clicca Done

       

   11. Clicca su Continue

       

   12. Clicca su Save

       

Creazione della chiave

1. Torna a All Identifiers

   

2. Clicca su Keys

   

3. Clicca sull’icona più

   

4. Dai un nome alla tua chiave

   

   Note

   Questo nome non è importante, puoi mettere qualsiasi cosa.

5. Seleziona Sign in with Apple e clicca Configure

   

6. Seleziona il primary App ID e premi Save

   

   Note

   Questo deve essere lo stesso App ID degli ID nei passaggi precedenti.

7. Clicca su Continue

   

8. Clicca su Register

   

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

   

   Caution

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

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

    

Ottenere il Team ID

Per utilizzare Login with Apple su Android, devi ottenere il Team ID. Sarà 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 hai 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 la 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 la MainActivity

   1. Apri la MainActivity

      

   2. Aggiungi il seguente codice:

      

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

      Caution

      Questo esempio presuppone che tu non abbia deep link configurati. Se li hai, adatta il codice

Note

Hai appena aggiunto un nuovo deep link nella tua app. Il deep link apparirà così: capgo-demo-app://path. Puoi modificare android:scheme e android:host per modificare come appare questo deep link. Importante: Nella configurazione del backend, questo deep link diventerà BASE_REDIRECT_URL

Configurazione del backend

È richiesto un backend per Android, ma configurare un backend influenzerà anche iOS. Un backend di esempio è fornito qui

Questo esempio fornisce quanto segue:

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

Note

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

Dato tutto ciò che ho detto in questo tutorial, ecco come apparirebbe la sezione env:

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

Utilizzo del plugin

L’utilizzo della funzione login non cambia, è lo stesso di iOS. Dai un’occhiata a quella sezione per maggiori informazioni. TUTTAVIA, il metodo initialize cambia un po’.

await SocialLogin.initialize({
  apple: {
    clientId: 'ee.forgr.io.ionic.starter.service2',
    redirectUrl: 'https://appleloginvps.wcaleniewolny.me/login/callback'
  }
})

Danger

Nota che aggiungere redirectUrl INFLUENZERÀ iOS !!!!!

Creazione dell’app

Note

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

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

   

2. Seleziona App IDs e clicca continue

   

3. Clicca sul tipo App e clicca Continue

   

4. Inserisci la descrizione e l’app ID

   

5. Abilita la capacità Sign with Apple

   

6. Clicca Continue

   

7. Conferma i dettagli e clicca Register