Login Google sur Android

Introduction

Dans ce guide, vous apprendrez à configurer l'authentification Google avec Capgo Social Login pour Android. Je suppose que vous avez déjà lu le guide de configuration générale..

Utilisation de l'authentification Google sur Android

Dans cette partie, vous apprendrez à configurer l'authentification Google sur Android.

Précaution

Le certificat SHA1 Android est douloureux et je ne souhaiterais pas que cela soit imposé à quiconque. Les étapes suivantes supposent le scénario le plus simple d'une application qui n'est pas publiée sur Google Play Store et qui est uniquement utilisée par le simulateur local ou le matériel de développement.

Si vous avez déployé votre application sur Google Play Store, Il faut ajouter un ID de client Android supplémentaire contenant le SHA1 du console Google Play pour les versions de production. Vous pouvez trouver l'empreinte SHA1 que Google Play utilise pour signer votre bundle de version sous Enfin, il est important de noter que si vous faites une erreur, l'erreur ne sera pas évidente. Il peut être très difficile de déboguer. Si vous avez des difficultés avec la configuration, veuillez consulter les Test and release > Setup > App Signing.

__CAPGO_KEEP_0__ problèmes Github issues.

Configuration de connexion Google pour Android pour plus d'informations. Note

Vous pouvez créer plusieurs ID de client Android. Cela est requis si vous avez plusieurs certificats SHA1.

Créer un ID de client Android.

1. Cliquez sur la barre de recherche

   1. Cliquez sur la barre de recherche

      

   2. Recherchez credentials et cliquez sur le APIs and Services (un numéro 2 sur l'écran d'écoute)

      

   3. Cliquez sur le create credentials

      

   4. Sélectionnez OAuth client ID

      

   5. Sélectionnez le Android type d'application

      

   6. Ouvrez Android Studio

   7. À la fin de la barre de navigation, recherchez la section Gradle Scripts

      

   8. Trouvez build.gradle pour le module app

      

   9. Copiez android.defaultConfig.applicationIdCela sera votre package name dans le console Google

      

   10. Maintenant, ouvrez le terminal. Assurez-vous d'être dans le android répertoire de votre application et exécutez ./gradlew signInReport

   
   11. Faites défiler vers le haut de cette commande. Vous devriez voir les éléments suivants. Copiez-les. SHA1.
   
   12. Maintenant, retournez à la Console Google. Entrez votre applicationId comme le Package Name et votre SHA1 dans le champ du certificat et cliquez sur create
   

2. Créez un client web (c'est requis pour Android)

   1. Allez à la Create credentials page dans la Console Google

   2. Définissez le type d'application sur Web

      

   3. Cliquez Create

      

   4. Copiez l'ID du client, vous en aurez besoin pour webClientId dans votre JS/TS code

      

3. Modifier votre MainActivity

   1. Veuillez ouvrir votre application dans Android Studio. Vous pouvez exécuter cap open android

   2. Trouvez MainActivity.java

      1. Ouvrez le app dossier

         

      2. Trouvez java

         

      3. Trouvez votre MainActivity.java et cliquez dessus

         

   3. Modifier MainActivity.java. Veuillez ajouter le suivant code

      import ee.forgr.capacitor.social.login.GoogleProvider;
      import ee.forgr.capacitor.social.login.SocialLoginPlugin;
      import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
      import com.getcapacitor.PluginHandle;
      import com.getcapacitor.Plugin;
      import android.content.Intent;
      import android.util.Log;
      import com.getcapacitor.BridgeActivity;
      
      // ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
      public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {
      
            @Override
            public void onActivityResult(int requestCode, int resultCode, Intent data) {
              super.onActivityResult(requestCode, resultCode, data);
      
              if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
                PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
                if (pluginHandle == null) {
                  Log.i("Google Activity Result", "SocialLogin login handle is null");
                  return;
                }
                Plugin plugin = pluginHandle.getInstance();
                if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
                }
                ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
              }
            }
      
            // This function will never be called, leave it empty
            @Override
            public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
      }

   4. Enregistrer le fichier

4. Utiliser l'authentification Google dans votre application

   1. Tout d'abord, importez SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. Appeler initialize. Il convient de l'appeler qu'une seule fois.

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
        SocialLogin.initialize({
          google: {
            webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
          }
        })
      })

   3. Appeler SocialLogin.login. Créez un bouton et exécutez le code lors du clic.

      const res = await SocialLogin.login({
        provider: 'google',
        options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))

      Attention

      Si vous initialisez Google avec mode: 'offline', SocialLogin.login() renvoie serverAuthCode pour votre flux d'échange backend. N'appellez pas SocialLogin.refresh({ provider: 'google' }) dans l'application dans ce mode. Échangez serverAuthCode sur votre backend, stockez le jeton de rafraîchissement Google là-bas, et rafraîchissez sur le backend.

5. Configurez l'émulateur pour les tests

   1. Allez dans Device manager et cliquez sur le bouton plus

      

   2. Créer un dispositif virtuel

      

   3. Sélectionnez n'importe quel dispositif avec un Play Store icône

      

      Comme vous pouvez le voir, le pixel 8 supporte les Play Store services

   4. Cliquez next

      

   5. Assurez-vous que l'image du système est du type Google Play. CE DOIT ÊTRE de type Google Play

      

   6. Cliquez sur suivant

      

   7. Confirmez votre appareil. Vous pouvez nommer votre émulateur comme vous le souhaitez

      

   8. Allez dans Device Manager et démarrez votre simulateur

      

   9. Après le démarrage du simulateur, allez dans ses paramètres

      

   10. Allez dans Google Play

   
   11. Cliquez Update et attendez environ 60 secondes
   

6. Testez votre application

   Si vous avez fait tout correctement, vous devriez voir le flux de connexion Google fonctionner correctement :

   

Résolution des problèmes

Si vous avez des problèmes, veuillez consulter le Github.

Les problèmes liés à l'authentification Google sont toujours liés au certificat SHA1.

Si vous ne pouvez pas obtenir le certificat SHA1 de développement, essayez d'utiliser un clé de stockage personnalisée. Voici un commentaire expliquant comment ajouter un clé de stockage à votre projet.

Continuez de l'authentification Google sur Android

Si vous utilisez l'authentification Google sur Android pour planifier l'authentification et les flux de compte, connectez-le avec Utiliser @capgo/capacitor-login-social pour la capacité native dans Utiliser @capgo/capacitor-login-social, @capgo/capacitor-login-social pour le détail d'implémentation dans @capgo/capacitor-login-social, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-biométrique-native pour le détail d'implémentation dans @capgo/capacitor-biométrique-native, et L'authentification à deux facteurs pour le détail d'implémentation dans L'authentification à deux facteurs.