Google Connectez-vous sur Android

##Présentation

Dans ce guide, vous apprendrez comment configurer la connexion Google avec la connexion sociale Capgo pour Android. Je suppose que vous avez déjà lu le guide de configuration général.

En utilisant Google, connectez-vous sur Android

Dans cette partie, vous apprendrez comment configurer la connexion Google dans Android.

Caution

Le certificat Android SHA1 est plus que douloureux et je ne souhaiterais à personne d’avoir à le configurer. 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 utilisée uniquement par le simulateur local ou le périphérique matériel de développement.

Si vous avez déployé votre application sur Google Play Store, vous DEVEZ ajouter un ID client Android supplémentaire qui contient le SHA1 de la console Google Play pour les versions de production. Vous pouvez trouver le hachage SHA1 que Google Play utilise pour signer votre bundle de versions sous Test and release > Setup > App Signing.

Enfin, il est important de mentionner que si vous vous trompez, l’erreur ne sera PAS évidente. Cela peut être très difficile à déboguer. Si vous rencontrez des difficultés avec la configuration, veuillez consulter les problèmes Github.

De plus, vous pouvez consulter la section de dépannage de la configuration de connexion Google pour Android pour plus d’informations.

Note

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

1. Créez un ID client Android.

   1. Cliquez sur la barre de recherche

      

   2. Recherchez credentials et cliquez sur celui « API et services » (numéro 2 sur la capture d’écran)

      

   3. Cliquez sur « créer des informations d’identification »

      

   4. Sélectionnez OAuth client ID

      

   5. Sélectionnez le type d’application Android

      

   6. Ouvrez Android Studio

   7. Tout en bas du navigateur, recherchez les « Gradle Scripts »

      

   8. Recherchez build.gradle pour le module app

      

   9. Copiez le android.defaultConfig.applicationId. Ce sera votre « nom de package » dans la console Google

      

   10. Maintenant, ouvrez le terminal. Assurez-vous que vous êtes dans le dossier android de votre application et exécutez ./gradlew signInReport

   
   11. Faites défiler vers le haut de cette commande. Vous devriez voir ce qui suit. Copiez le SHA1.
   
   12. Maintenant, revenez à la console Google. Entrez votre applicationId comme « Nom du package » et votre SHA1 dans le champ du certificat et cliquez sur create.
   

2. Créez un client Web (ceci est requis pour Android)

   1. Accédez à la page « Créer des informations d’identification » dans la console Google.

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

      

   3. Cliquez sur Create

      

   4. Copiez l’ID client, vous l’utiliserez comme webClientId dans votre code JS/TS

      

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

   2. Trouvez MainActivity.java

      1. Ouvrez le dossier app

         

      2. Trouvez java

         

      3. Trouvez votre MainActivity.java et cliquez dessus

         

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

      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. Enregistrez le fichier

4. Utilisez Google Connectez-vous dans votre candidature

   1. Tout d’abord, importez SocialLogin

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

   2. Appelez initialiser. Cela ne devrait ê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. Appelez SocialLogin.login. Créez un bouton et exécutez le code suivant en cliquant.

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

5. Configurez l’émulateur pour les tests

   1. Allez dans « Gestionnaire de périphériques » et cliquez sur le bouton plus

      

   2. Créez un appareil virtuel

      

   3. Sélectionnez n’importe quel appareil avec une icône Play Store

      

      Comme vous pouvez le constater, le pixel 8 prend en charge les services Play Store

   4. Cliquez sur next

      

   5. Assurez-vous que l’image du système d’exploitation est de type Google Play. IL DOIT être de type Google Play

      

   6. Cliquez sur suivant

      

   7. Confirmez votre appareil. Vous pouvez nommer votre émulateur comme vous préférez

      

   8. Allez dans le « Gestionnaire de périphériques » et démarrez votre simulateur

      

   9. Une fois le simulateur démarré, accédez à ses paramètres

      

   10. Allez dans Google Play

   
   11. Cliquez sur Update et attendez environ 60 secondes
   

6. Testez votre application

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

   

Dépannage

Si vous rencontrez des problèmes, veuillez consulter les problèmes Github.

Les problèmes avec la connexion Google sont TOUJOURS liés au certificat SHA1.

Si vous ne parvenez pas à obtenir le certificat de développement SHA1, essayez d’utiliser un magasin de clés personnalisé. Ici est un commentaire expliquant comment ajouter un magasin de clés à votre projet.