Passer à la navigation principale

Connexion Google sur Android

GitHub

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éral.

Dans cette partie, vous apprendrez à configurer la connexion Google sur Android.

  1. Créer un identifiant de client Android.

    1. Cliquez sur la barre de recherche

      barre de recherche Google Console
    2. Recherchez credentials et cliquez sur le APIs and Services un (le numéro 2 sur l'écran d'aperçu)

      Résultats de recherche montrant l'option des identifiants avec les APIs et Services mis en surbrillance
    3. Cliquez sur le create credentials

      Créer des informations d'identification de bouton dans le console Google
    4. Sélectionner OAuth client ID

      Option d'ID client OAuth dans le menu de création d'informations d'identification
    5. Sélectionner le Android type d'application

      Sélection du type d'application avec l'option Android mise en surbrillance
    6. Ouvrir Android Studio

    7. À la très bas de la navigateur, trouver la section Gradle Scripts

      Scripts Gradle dans le navigateur de projet d'Android Studio
    8. Trouver build.gradle pour le module app

      fichier build.gradle (Module : app) dans la section Scripts Gradle
    9. Copiez le android.defaultConfig.applicationIdCela sera votre package name dans le console Google

      Fichier Build.gradle montrant la configuration de l'applicationId
    10. Ouvrez maintenant le terminal. Assurez-vous d'être dans le android dossier de votre application et exécutez ./gradlew signInReport

    Terminal montrant la commande gradlew signInReport
    1. Faites défiler vers le haut de cette commande. Vous devriez voir les éléments suivants. Copiez le SHA1.
    Sortie du terminal montrant l'empreinte de certificat SHA1
    1. Allez maintenant dans la Console Google. Entrez votre applicationId comme le Package Name et votre SHA1 dans le champ de certificat et cliquez create
    Créez un client Android (ceci est requis pour Android)
  2. Créez un client web (ceci est requis pour Android)

    1. Allez sur la Create credentials page de Google Console

    2. Configurez le type d'application en Web

      Type d'application avec l'option Web mise en surbrillance
    3. Cliquez sur Create

      Formulaire de création de client web avec le bouton Créer en bas
    4. Copiez l'ID du client, vous en aurez besoin comme webClientId in your JS/TS code

      Modifiez votre
  3. __CAPGO_KEEP_0__ MainActivity

    1. Ouvrez votre application dans Android Studio. Vous pouvez l'exécuter cap open android

    2. Trouvez MainActivity.java

      1. Ouvrez le app dossier

        Le dossier d'application dans le navigateur de projet Android Studio
      2. Trouvez java

        Le dossier Java dans la structure de projet Android Studio
      3. Trouvez votre MainActivity.java et cliquez dessus

        Le fichier MainActivity.java dans la structure de package
    3. Modifiez MainActivity.javaVeuillez ajoutez 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. Utilisez l'authentification Google dans votre application

    1. Tout d'abord, importez SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Appeler l'initialisation. 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. Create a button and run the following code on click.

      const res = await SocialLogin.login({
      provider: 'google',
      options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))
  5. Configurez l'emulateur pour les tests

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

      Gestionnaire de dispositifs dans Android Studio avec le bouton plus mis en surbrillance
    2. Créez un appareil virtuel

      Bouton Créer un appareil virtuel dans la configuration de l'appareil virtuel
    3. Sélectionnez n'importe quel appareil avec un Play Store icône

      Sélection de matériel affichant les appareils avec prise en charge de Google Play Store

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

    4. Cliquez next

      Bouton Suivant dans l'assistant de création de dispositif
    5. Assurez-vous que l'image du système est du type Google Play. CE DOIT doit être du type Google Play

      Sélection de l'image du système affichant les images de type Google Play
    6. Cliquez sur Suivant

      Bouton Suivant sur l'écran de sélection de l'image du système
    7. Vérifiez votre appareil. Vous pouvez nommer votre émulateur comme vous le souhaitez

      Écran de vérification de la configuration de l'appareil avec le bouton Terminer
    8. Allez dans Device Manager et démarrez votre simulateur

      Gestionnaire de périphériques avec l'émulateur virtuel listé et le bouton Jouer
    9. Après le démarrage de l'émulateur, allez dans ses paramètres

      Émulateur Android affichant l'application Paramètres
    10. Allez dans Google Play

    Écran de paramètres avec l'option Google Play
    1. Cliquez Update et attendez environ 60 secondes
    Écran de mise à jour de Google Play avec le bouton Mise à jour
  6. Testez votre application

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

    Démonstration du flux de connexion Google sur Android montrant le processus de connexion et l'authentification réussie

Si vous rencontrez des problèmes, comparez d'abord vos paramètres d'application avec les valeurs de la console Google Cloud. Les échecs de connexion Google Sign-In sur Android sont généralement causés par une incompatibilité de nom de package, de SHA-1 ou d'ID client.

Sur Android, ce plugin utilise le gestionnaire de jetons Google (androidx.credentials et Connectez-vous avec Google), et non la version legacy GoogleSignInClient API. Erreurs de Logcat telles que GetCredentialCustomException: [28444] Developer console is not set up correctly vient de cette pile.

Filtrer Logcat avec GoogleProvider ou CapgoSocialLogin ou webClientId ou

ou

ou

ou

ououou
Vous avez besoin de deux types d'identifiants OAuth 2.0 dans le même projet Google Cloud : Serveur / ID de jeton d'audiencewebClientId in SocialLogin.initialize()
Android, un par clé de signatureProuve que votre APK est autorisé à appeler GoogleSeul disponible dans le console Google Cloud. N'envoyez pas cet ID à webClientId

Erreur fréquente : utiliser l'ID client Android comme webClientId. Le gestionnaire de jetons nécessite l'ID client Web là-bas. L'ID client Android n'a besoin que du nom de package correct et de la SHA-1 enregistrés dans le console.

Créez un client OAuth Android pour chaque certificat qui signe les builds que vous testez :

  • Debug : à partir de ./gradlew signingReport pour la variante de débogage.
  • Release : à partir de l'APK ou AAB que vous installez réellement.
  • Play App Signing : à partir de la console Play > Intégrité de l'application > Certificat de clé de signature de l'application. Cela est requis pour les builds de magasin Play même si votre SHA-1 de clé d'upload est déjà enregistré.

Le applicationId dans android/app/build.gradle doit exactement correspondre au nom du package Android OAuth client, y compris tout suffixe. .debug Si l'écran de consentement OAuth est en mode Test, ajoutez chaque compte Google que vous testez sous Utilisateurs > Utilisateurs de test. La publication de l'application en Production n'est pas requise pour

et email les autorisations. Les liens d'actif numérique ( profile ) ne sont pas nécessaires pour le connexion avec Google via Gestionnaire de credenciaux.assetlinks.jsonLes modifications de Cloudflare peuvent prendre jusqu'à quelques heures pour se propager.

Erreur 28444 : Le console de développeur n'est pas configuré correctement

Section intitulée « Erreur 28444 : Le console de développeur n'est pas configuré correctement »

Cela signifie généralement que Google a rejeté la combinaison du certificat de signature APK installé, du nom de package et de

__CAPGO_KEEP_0__ webClientId. Travaillez à travers ce checklist :

  1. Confirmez webClientId est l&#39;ID du client de l&#39;application Web et se termine par .apps.googleusercontent.com.
  2. Exécutez l&#39;application, reproduisez l&#39;erreur et lisez Logcat pour GoogleProvider, signingSha1=, et package=.
  3. Dans Google Cloud Console > Identifiants, ouvrez votre client OAuth Android et vérifiez le nom de package exact et la valeur SHA-1.
  4. Si vous testez une version de production, enregistrez la valeur SHA-1 de cette version, et non uniquement le keystore de débogage.
  5. Si l&#39;application est distribuée via Google Play Store, enregistrez également la valeur SHA-1 de l&#39;application de signature Play.
  6. Vérifiez que les clients Web et Android vivent dans le même projet Google Cloud.
  7. Si l&#39;écran de consentement est en mode Test, confirmez que l&#39;adresse e-mail Google est un utilisateur de test.
  8. Attendez et réessayez après les modifications du console.

USER_CANCELLED Après avoir sélectionné un compte sur une mise en œuvre de débogage mal configurée, il peut toujours y avoir un désaccord de SHA-1 ou d'ID client. Fixez d'abord la configuration du console ci-dessus.

Extraire SHA-1 à partir de la build que vous installez

Extraire SHA-1 à partir de la build que vous installez

Mises en œuvre de débogage ou locales :

Fenêtre de terminal
cd android && ./gradlew signingReport

APK de signature de mise en production :

Fenêtre de terminal
keytool -printcert -jarfile android/app/release/app-release.apk

Ajoutez ce SHA-1 à un client OAuth Android avec le nom de package correspondant, réinstallez la même APK signée et testez à nouveau :

Fenêtre de terminal
adb install android/app/release/app-release.apk

Les jetons sont imbriqués sous result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

Pour Firebase Auth, créez des informations d'identification avec celles-ci idToken et utilisez l'ID client Web comme webClientId en initialize.

Si vous ne pouvez pas obtenir le certificat SHA-1 de développement, essayez un clé de stockage personnalisé. Cette remarque de commentaire d'issue explique comment ajouter une clé de stockage à votre projet.

Continuez de la page Google Login sur Android

Section intitulée « Continuez avec Google Login sur Android »

Si vous utilisez Google Login sur Android pour planifier l'authentification et les flux de compte, connectez-l’avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login @capgo/capacitor-social-login pour le détail d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.