Apple login sur Android

La connexion Apple sur Android est complexe. Apple ne propose aucun support officiel pour Sign in with Apple sur Android, la solution est donc un peu détournée.

Android utilise actuellement des onglets Chrome pour afficher un site OAuth2. Cette approche présente les défis suivants :

• Configuration difficile
• Un backend est requis

Comprendre le flux sur Android

Utilisons 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 connaissez les défis et le flux, commençons la configuration.

Création du service ID

1. Connectez-vous au Portail Apple Developer.

2. Cliquez sur Identifiers.

   

   Vous devriez voir un écran semblable à celui-ci :

   
   1. Vérifiez que ce champ indique App IDs
   2. Assurez-vous de pouvoir trouver votre App ID.

      Remarque

      Si vous n'avez pas configuré Apple Login pour iOS, vous devrez en créer un. Dans mon cas, j'en ai déjà un. L'App ID que je vais utiliser est me.wcaleniewolny.test.ionic.vue. Si vous n'en avez pas, veuillez en créer un en suivant l'étape création de l'app.

3. Assurez-vous que la Sign in with Apple capability est activée pour votre application

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

4. Retournez à tous les All Identifiers

   

5. Cliquez sur App Ids et allez dans Services IDs

   

6. Créer un nouvel identifiant

   1. Cliquer sur le bouton plus

      

   2. Sélectionnez Servcice IDs et cliquez sur Continue

      

   3. Saisir une description et un identifiant, puis valider Continuie.

      

      Remarque

      Ceci identifiers deviendra le clientId que vous passerez dans la initialize fonction ET ANDROID_SERVICE_ID pour le backend.

      Veuillez la sauvegarder !

      Remarque

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

   4. Veuillez vérifier les détails et cliquer Register

      

   5. Cliquez sur le service nouvellement créé

      

   6. Activer le Sign in with Apple option

      

   7. Configurez la Sign In with Apple

      

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

      

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

      

      Remarque

      Ce backend doit fonctionner en HTTPS. Quant au Return URLs, vous pouvez y revenir après avoir lu la section suivante de ce tutoriel et configuré le backend. Pour ce tutoriel, je vais utiliser https://xyz.wcaleniewolny.me/login/callback pour l'URL de retour et xyz.wcaleniewolny.me le domaine. Cliquez sur Suivant.

   10. Confirmez les données et cliquez sur Done

       

   11. Cliquez sur Continue

       

   12. Cliquez sur Save

       

Création de la clé

1. Retour à tout All Identifiers

   

2. Cliquez sur Keys

   

3. Cliquez sur l'icône plus

   

4. Nommez votre clé

   

   Remarque

   Ce nom n'est pas important, vous pouvez mettre ce que vous voulez.

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

   

6. Sélectionnez l'App ID principal, puis appuyez sur Save

   

   Remarque

   Il doit s'agir du même App ID que celui utilisé lors des é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, il portera ce nom dans le backend KEY_ID. Téléchargez la clé. Veillez à ne jamais partager cette clé.

10. Retrouvez la clé téléchargée et enregistrez-la dans le dossier backend.

    

Récupération du Team ID

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

1. Accéder à ce site web et faire défiler vers le bas

2. Trouvez le Team ID

   

Configuration de la redirection de l'app

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

1. Modifiez le AndroidManifest.xml

   1. Ouvrez le fichier, j'utiliserai AndroidStudio

      

   2. Trouvez le MainActivity et ajoutez le filtre 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. Modifiez le MainActivity

   1. Veuillez ouvrir la MainActivity

      

   2. Ajoutez le code suivant :

      

      @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 configuré aucun deep link. Si vous en avez, adaptez le code

Remarque

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

Configuration du backend

Un backend est requis pour Android, mais sa configuration impactera aussi iOS. Un exemple de backend est fourni ici

Cet exemple fournit les éléments suivants :

• Une base de données JSON simple
• Un moyen de demander le JWT aux 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

Compte tenu de tout ce que j'ai expliqué dans ce tutoriel, voici comment env la section ressemblerait à ceci :

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

En utilisant le plugin

L'utilisation de la login fonction ne change pas, c'est la même que sur iOS. Consultez cette section pour plus d'infos. Cependant,, les initialize la méthode change légèrement.

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 SERA affecte iOS !!!!!

Création de l'app

Remarque

Si vous possédez déjà un App ID, vous pouvez ignorer cette étape. Ne suivez pas cette étape si vous avez déjà configuré Apple Login pour iOS.

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

   

2. Sélectionnez App IDs et cliquez sur continue

   

3. Cliquez sur le type App et cliquez sur Continue

   

4. Saisissez la description et l'ID de l'app

   

5. Activer Sign with Apple capacité

   

6. Cliquez Continue

   

7. Confirmez les détails et cliquez Register

   

Continuer avec le login Apple sur Android

Si vous utilisez Apple login sur Android pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour les détails d'implémentation dans @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 de l'authentification à deux facteurs.