Connexion Apple sur Android

L'authentification Apple sur Android est un peu hacky. Apple n'a pas de support officiel pour Sign in with Apple L'approche actuelle d'Android utilise une fenêtre de Chrome pour afficher un site Web OAuth2. Cette approche présente les défis :

Cette approche présente les défis :

• Configuration difficile
• Un backend est requis

Comprendre le flux sur Android.

Je vais 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. Se connecter à Portail du développeur Apple.

2. Cliquez sur Identifiers.

   

   Vous devriez voir une page qui ressemble à ceci :

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

      Remarque

      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, créez-en un en utilisant l'étape Assurez-vous que le.

3. capacité est activé pour votre application Sign in with Apple Note

   1. Cliquez sur votre application
   2. Vérifiez que la Sign in with Apple capacité est activée
   3. Si elle n'est pas activée, activez-la.

4. Retournez à tous 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électionner Servcice IDs et cliquez Continue

      

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

      

      Remarque

      Ceci identifiers deviendra le clientId que vous passerez en paramètre initialize fonction ET ANDROID_SERVICE_ID pour l'arrière-plan.

      Veuillez le sauvegarder!!!

      Remarque

      L'ID du service n'a pas besoin de correspondre à l'ID de l'application, mais je vous recommande de définir l'ID du service sur 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 ID de service.

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

      

   5. Cliquez sur le service créé récemment

      

   6. Activer l'option Sign in with Apple option

      

   7. Configurer la Sign In with Apple

      

   8. Vérifiez que l'option est définie sur l'ID d'application configuré dans l'étape précédente Primary App ID Définir le menu déroulant ID d'application principal

      

   9. Définir les champs domaine et URL de retour

      

      Remarque

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

   10. Confirmation de la configuration de domaine et d'URL de retour Done

       

   11. Bouton Continue pour la configuration du service Continue

       

   12. Continuer Save

       

Création de la clé

1. Retour à tous All Identifiers

   

2. Cliquez sur Keys

   

3. Cliquez sur l'icône plus

   

4. Nommez votre clé

   

   Note

   Vous pouvez mettre n'importe quoi, cela n'a pas d'importance.

5. Sélectionner Sign in with Apple et cliquer Configure

   

6. Sélectionner l'ID d'application principal, et appuyer sur Save

   

   Note

   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 : Enregistrez cet ID, dans l'arrière-plan, 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 du backend.

    

Récupération de l'ID d'équipe

Pour utiliser Login with Apple sur Android, vous devez récupérer le Team IDIl sera utilisé dans le backend.

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

2. Trouvez la Team ID

   

Configuration de la redirection de l'application

Comme vous avez vu dans le diagramme, le backend effectue une étape appelée Redirect back to the appCela nécessite des modifications manuelles de 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 MainActivity

      

   2. Ajoutez le 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);
      }

      Attention

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

Remarque

Vous avez ajouté 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 du backend, cette lien profond deviendra BASE_REDIRECT_URL

Configuration du 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 façon de demander le JWT auprès des serveurs d'Apple
• Une vérification JWT simple

Remarque

J'utilise PM2 pour 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 la env section ressemblerait :

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

En utilisant le plugin

L'utilisation de la login fonction ne change pas, c'est la même chose que pour IOS. Veuillez jeter un coup d'œil à cette section pour plus d'informations. Cependant, la initialize méthode change un peu.

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

Danger

Notez que l'ajout de redirectUrl AFFECTERA IOS !!!!!

Création de l'application

Remarque

Si vous disposez déjà d'un ID d'application, vous pouvez passer cette étape. N'effectuez pas 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 Cliquez sur le type

   

3. Entrer la description et l'ID d'application App Entrer la description et l'ID de l'application Continue

   

4. Entrer la description et l'ID de l'application

   

5. Activer Sign with Apple capacité

   

6. Cliquez Continue

   

7. Confirmez les détails et cliquez sur Register