Connexion 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.

Attention

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 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 en savoir plus. 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. Vous pouvez créer plusieurs ID de client Android. Cela est requis si vous avez plusieurs certificats SHA1.

      

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

      

   3. Cliquez sur le create credentials

      

   4. Sélectionnez OAuth client ID

      

   5. Sélectionnez le Android Type d'application

      

   6. Ouvrir 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 le 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. Saisissez votre applicationId comme Package Name et votre SHA1 dans le champ du certificat et cliquez sur create
   

2. Créez un client web (ceci 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 de celui-ci dans votre __CAPGO_KEEP_0__ JS/TS webClientId in your JS/TS code

      

3. Veuillez ouvrir votre application dans Android Studio. Vous pouvez exécuter MainActivity

   1. Trouvez cap open android

   2. Ouvrez le MainActivity.java

      1. dossier app Dossier d'application dans le navigateur de projet Android Studio

         

      2. Trouvez java

         

      3. Trouvez votre MainActivity.java et cliquez dessus

         

   3. Modifier MainActivity.javaVeuillez 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. Cela doit être appelé 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'emulateur 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 doit être du 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 des problèmes.

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 une clé de stockage à votre projet.