Connexion Google sur Android
Copiez un prompt de configuration avec les étapes d'installation et la guide markdown complet pour ce plugin.
Introduction
Section intitulée « 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éral.
Utiliser l'authentification Google sur Android
Titre de la section : « Utilisation de la connexion Google sur Android »Dans cette partie, vous apprendrez à configurer la connexion Google sur Android.
-
Créer un identifiant de client Android.
-
Cliquez sur la barre de recherche
-
Recherchez
credentialset cliquez sur leAPIs and Servicesun (le numéro 2 sur l'écran d'aperçu)
-
Cliquez sur le
create credentials
-
Sélectionner
OAuth client ID
-
Sélectionner le
Androidtype d'application
-
Ouvrir Android Studio
-
À la très bas de la navigateur, trouver la section
Gradle Scripts
-
Trouver
build.gradlepour le moduleapp
-
Copiez le
android.defaultConfig.applicationIdCela sera votrepackage namedans le console Google
-
Ouvrez maintenant le terminal. Assurez-vous d'être dans le
androiddossier de votre application et exécutez./gradlew signInReport
- Faites défiler vers le haut de cette commande. Vous devriez voir les éléments suivants. Copiez le
SHA1.
- Allez maintenant dans la Console Google. Entrez votre
applicationIdcomme lePackage Nameet votre SHA1 dans le champ de certificat et cliquezcreate
-
-
Créez un client web (ceci est requis pour Android)
-
Allez sur la
Create credentialspage de Google Console -
Configurez le type d'application en
Web
-
Cliquez sur
Create
-
Copiez l'ID du client, vous en aurez besoin comme
webClientIdin your JS/TS code
-
-
__CAPGO_KEEP_0__
MainActivity-
Ouvrez votre application dans Android Studio. Vous pouvez l'exécuter
cap open android -
Trouvez
MainActivity.java-
Ouvrez le
appdossier
-
Trouvez
java
-
Trouvez votre
MainActivity.javaet cliquez dessus
-
-
Modifiez
MainActivity.javaVeuillez ajoutez le suivant codeimport 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 {@Overridepublic 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@Overridepublic void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}} -
Enregistrer le fichier
-
-
Utilisez l'authentification Google dans votre application
-
Tout d'abord, importez
SocialLoginimport { SocialLogin } from '@capgo/capacitor-social-login'; -
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',}})}) -
Appeler
SocialLogin.login. Create a button and run the following code on click.const res = await SocialLogin.login({provider: 'google',options: {}})// handle the responseconsole.log(JSON.stringify(res))
-
-
Configurez l'emulateur pour les tests
-
Allez dans
Device manageret cliquez sur le bouton plus
-
Créez un appareil virtuel
-
Sélectionnez n'importe quel appareil avec un
Play Storeicône
Comme vous pouvez le voir, le
pixel 8supporte laPlay Storeservices -
Cliquez
next
-
Assurez-vous que l'image du système est du type
Google Play. CE DOIT doit être du typeGoogle Play
-
Cliquez sur Suivant
-
Vérifiez votre appareil. Vous pouvez nommer votre émulateur comme vous le souhaitez
-
Allez dans
Device Manageret démarrez votre simulateur
-
Après le démarrage de l'émulateur, allez dans ses paramètres
-
Allez dans
Google Play
- Cliquez
Updateet attendez environ 60 secondes
-
-
Testez votre application
Si vous avez fait tout correctement, vous devriez voir le flux de connexion Google fonctionner correctement :
Résolution des problèmes
Section intitulée « Résolution des problèmes »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.
Gestion des jetons, SHA-1 et Firebase
Section intitulée « Gestion des jetons, SHA-1 et Firebase »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
ouou
| ou | ou | ou |
|---|---|---|
| Vous avez besoin de deux types d'identifiants OAuth 2.0 dans le même projet Google Cloud : | Serveur / ID de jeton d'audience | webClientId in SocialLogin.initialize() |
| Android, un par clé de signature | Prouve que votre APK est autorisé à appeler Google | Seul 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 signingReportpour 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 :
- Confirmez
webClientIdest l'ID du client de l'application Web et se termine par.apps.googleusercontent.com. - Exécutez l'application, reproduisez l'erreur et lisez Logcat pour
GoogleProvider,signingSha1=, etpackage=. - Dans Google Cloud Console > Identifiants, ouvrez votre client OAuth Android et vérifiez le nom de package exact et la valeur SHA-1.
- Si vous testez une version de production, enregistrez la valeur SHA-1 de cette version, et non uniquement le keystore de débogage.
- Si l'application est distribuée via Google Play Store, enregistrez également la valeur SHA-1 de l'application de signature Play.
- Vérifiez que les clients Web et Android vivent dans le même projet Google Cloud.
- Si l'écran de consentement est en mode Test, confirmez que l'adresse e-mail Google est un utilisateur de test.
- 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 installezMises en œuvre de débogage ou locales :
cd android && ./gradlew signingReportAPK de signature de mise en production :
keytool -printcert -jarfile android/app/release/app-release.apkAjoutez ce SHA-1 à un client OAuth Android avec le nom de package correspondant, réinstallez la même APK signée et testez à nouveau :
adb install android/app/release/app-release.apkLire le résultat de connexion
Section intitulée « Lire le résultat de connexion »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.