Connexion Apple sur Android

L'authentification Apple sur Android est un peu hackeuse. Apple n'a pas officiellement de support pour Sign in with Apple L'authentification Apple sur Android est un peu hackeuse car Apple n'a pas officiellement de support pour

Android utilise actuellement une fenêtre de navigateur Chrome pour afficher un site Web OAuth2. Cette approche présente les défis suivants :

• Configuration difficile
• Un serveur est requis

Comprendre le flux sur Android.

Expliquez-moi comment utiliser un diagramme pour expliquer le flux sur 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)

Maintenant que vous êtes conscient des défis et du flux, commençons la configuration.

Création de l'ID de service

1. Connectez-vous au Portail du développeur Apple.

2. Cliquez sur Identifiers.

   

   Vous devriez voir une page qui ressemble à ceci :

   
   1. Assurez-vous que ce champ indique App IDs
   2. Vérifiez que vous pouvez trouver votre ID d'application.

      Note

      Si vous n'avez pas configuré Apple Login pour IOS, vous devrez en créer un. Pour moi, j'ai déjà un créé. L'ID d'application que je vais utiliser est me.wcaleniewolny.test.ionic.vueSi vous n'en avez pas un, créez-en un en utilisant l'étape de création d'application Vérifiez que la.

3. capability Sign in with Apple Cliquez sur votre application

   1. Sélectionnez votre application dans la liste
   2. capability Sign in with Apple est activée pour votre application
   3. Si elle n'est pas activée, activez-la.

4. Retournez à tous les identifiants All Identifiers

   

5. Cliquez sur App Ids et allez à Services IDs

   

6. Créez un nouveau identifiant

   1. Cliquez sur le bouton plus

      

   2. Sélectionnez Servcice IDs et cliquez Continue

      

   3. Entrez une description et des identifiants et cliquez Continuie.

      

      Remarque

      Ceci identifiers deviendra l'identifiant que vous passerez dans la clientId fonction ET initialize pour le serveur backend. ANDROID_SERVICE_ID S'il vous plaît, enregistrez-le!!!

      Remarque

      Note

      Le Service ID n'a pas besoin de correspondre à l'ID de l'application, mais je vous recommande de définir le Service ID à YOUR_APP_ID.service Comme rappel, j'utilise me.wcaleniewolny.test.ionic.vue pour mon ID d'application mais j'utilise ee.forgr.io.ionic.service2 comme Service ID.

   4. Veuillez vérifier les détails et cliquez sur Register

      

   5. Cliquez sur le Service ID créé récemment

      

   6. Activer l' Sign in with Apple option

      

   7. Configurez la Sign In with Apple

      

   8. Assurez-vous que le Primary App ID est défini sur l'ID d'application configuré dans l'étape précédente

      

   9. Ajoutez le domaine sur lequel vous allez héberger votre backend.

      

      Remarque

      Ce backend doit être en cours d'exécution sur HTTPS. Pour ce qui est des Return URLs, vous devriez peut-être revenir à cela après avoir lu la prochaine section de ce tutoriel et après avoir configuré l'arrière-plan. Pour les besoins de ce tutoriel, je vais utiliser https://xyz.wcaleniewolny.me/login/callback pour l'URL de retour et xyz.wcaleniewolny.me le domaine. Appuyez sur le bouton suivant.

   10. Confirmer les données et cliquez sur Done

       

   11. Cliquez sur Continue

       

   12. Cliquez sur Save

       

Création de la clé

1. Retournez à tous All Identifiers

   

2. Cliquez sur Keys

   

3. Cliquez sur l'icône plus

   

4. Nommez votre clé

   

   Note

   Ce nom n'est pas important, vous pouvez mettre n'importe quoi.

5. Sélectionnez Sign in with Apple et cliquez Configure

   

6. Sélectionnez l'ID d'application principal, puis appuyez Save

   

   Remarque

   Cela doit être le même ID d'application que l'ID dans les étapes précédentes.

7. Cliquez sur Continue

   

8. Cliquez sur Register

   

9. Copiez l'ID de la clé et téléchargez la clé.

   

   Attention

   IMPORTANT : Sauvegardez cet ID, dans le backend il sera appelé KEY_IDTéléchargez la clé. Assurez-vous de ne jamais partager cette clé.

10. Trouvez le fichier téléchargé et enregistrez-le dans le dossier backend.

    

Obtention de l'ID d'équipe

Pour utiliser Login with Apple sur Android, vous devez obtenir le Team IDCela sera utilisé dans le backend.

1. Allez à ce site web et faites défiler vers le bas

2. Trouvez la Team ID

   

Configuration de la redirection de l'application

Comme vous l'avez vu dans le diagramme, le backend effectue une étape appelée Redirect back to the appCela nécessite des modifications manuelles dans votre application.

1. Modifier le AndroidManifest.xml

   1. Ouvrez le fichier, je vais utiliser AndroidStudio

      

   2. Trouvez le MainActivity et ajoutez le filtre d'intent suivant

      

      <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. Modifier le MainActivity

   1. Veuillez ouvrir le fichier MainActivity.java dans Android Studio MainActivity

      

   2. code à ajouter à MainActivity pour gérer les liens profonds

      

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

      Avertissement

      Cet exemple suppose que vous n'avez pas configuré de liens profonds. Si vous le faites, veuillez ajuster le code

Note

Vous venez d'ajouter un nouveau lien profond dans votre application. Le lien profond ressemblera à ceci : capgo-demo-app://path Vous pouvez modifier le android:scheme et le android:host pour modifier l'apparence de ce lien profond. Important : Dans la configuration backend, ce lien profond deviendra BASE_REDIRECT_URL

Configuration backend

Un backend est requis pour Android, mais la configuration d'un backend impactera également IOS. Un exemple de backend est fourni ici

Cet exemple fournit les éléments suivants :

• Une base de données JSON simple
• Une méthode pour demander le JWT auprès des serveurs d'Apple
• Une vérification JWT simple

Remarque

J'utilise PM2 afin d'héberger cet exemple. Un exemple ecosystem.config.js peut être trouvé ici

Étant donné tout ce que j'ai dit dans ce tutoriel, voici comment procéder env La section ressemblerait à ceci :

• ANDROID_SERVICE_ID = ID de service
• IOS_SERVICE_ID = ID d'application

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

Utilisation du plugin

L'utilisation de la login ne change pas, c'est la même chose que pour IOS. Veuillez consulter cette section pour plus d'informations. Cependant, la initialize change un peu.

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

Attention

Notez que l'ajout de redirectUrl VA COMPRENDRE affectera IOS !!!!!

Création de l'application

Note

Si vous avez déjà un ID d'application, vous pouvez passer cette étape. N'oubliez pas de ne pas suivre cette étape si vous avez configuré Apple Login pour IOS.

1. Si vous n'avez pas encore d'ID d'application, cliquez sur le bouton plus

   

2. Sélectionner App IDs et cliquez sur Continuer

   

3. Cliquez sur le type App et cliquez Continue

   

4. Entrez la description et l'ID d'application

   

5. Activer Sign with Apple capacité

   

6. Cliquez Continue

   

7. Confirmez les détails et cliquez Register

   

Continuez de la connexion Apple sur Android

Si vous utilisez La connexion Apple sur Android pour planifier l'authentification et les flux de compte, connectez-l’avec En utilisant @capgo/capacitor-social-login pour la capacité native en utilisant @capgo/capacitor-social-login, @capgo/capacitor-social-login pour le détail d'implémentation en @capgo/capacitor-social-login, @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs.