Connexion Apple sur Android

L'authentification Apple sur Android est un peu malhonnête. Apple n'a pas de support officiel pour Sign in with Apple sur Android, donc la solution est légèrement malhonnête.

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

• Configuration difficile
• Un serveur backend est requis

Comprendre le flux sur Android.

Laissez-moi 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 au courant des défis et du flux, commençons la configuration.

Créer l'ID du 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. Assurez-vous 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 de l'application que j'utiliserai 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 étape de création d'application.

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

   1. Cliquez sur votre application
   2. Assurez-vous que la Sign in with Apple capacité est activée
   3. Si elle ne l'est pas, activez-la.

4. Retournez à tous All Identifiers

   

5. Cliquez sur App Ids et allez à Services IDs

   

6. Créer 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

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

      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 à 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 l'ID de service.

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

      

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

      

   6. Activer l' Sign in with Apple option

      

   7. Configurer le Sign In with Apple

      

   8. Assurez-vous que 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 de l' Return URLsURL de retour, vous pouvez peut-être revenir sur cela après avoir lu la section suivante de ce tutoriel et après avoir configuré le backend. 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 cliquer Done

       

   11. Cliquez sur Continue

       

   12. Cliquez sur Save

       

Création de la clé

1. Retourner à tous les 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 n'importe quoi.

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

   

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

   

   Remarque

   Cette clé d'application doit être identique à celle utilisée 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é.

   

   Prudence

   IMPORTANT : Sauvez 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 la clé téléchargée et enregistrez-la dans le dossier arrière-plan.

    

Obtenir l'ID d'équipe

Pour utiliser Login with Apple sur Android, vous devez obtenir le Team IDIl sera utilisé dans l'arrière-plan.

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

2. Trouvez la localisation de l'ID d'équipe dans le compte de développeur Team ID

   

Section intitulée « Configuration de la redirection de l'application »

Cela nécessite des modifications manuelles dans votre application. Redirect back to the appModifier le

1. Ouvrez le fichier, je vais utiliser AndroidManifest.xml

   1. Fichier AndroidManifest.xml dans Android Studio AndroidStudio

      

   2. et ajoutez le filtre d'intention suivant MainActivity Filtre d'intention __CAPGO_KEEP_0__ à ajouter dans MainActivity

      

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

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

      This example assumes that you don’t have any deep links configured. If you do, please adjust the code

Note

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 personnaliser 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 affectera également l'IOS. Un exemple de backend est fourni L'exemple fournit les éléments suivants :

Une base de données JSON simple

• 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 env ce 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 La fonction ne change pas, c'est la même chose que sur IOS. Veuillez consulter cette section pour plus d'informations. Cependantla 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 WILL affectera IOS !!!!!

Créer l'application

Remarque

Si vous avez déjà un ID d'application, vous pouvez passer à l'étape suivante. Ne suivez 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 et cliquez sur continuer

   

3. Cliquez sur le type App et cliquez Continue

   

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

   

5. Activer Sign with Apple capacité

   

6. Cliquez Continue

   

7. Confirmer les détails et cliquez Register