Google Login 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 l'authentification sociale Capgo pour Android. guide de configuration général.
Utilisation de l'authentification Google sur Android
Section intitulée « 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'écran)
-
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
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
androiddu dossier 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 pour votre
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.java. Veuillez ajouter les éléments suivants 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() {}} -
Sauvegarder le fichier
-
-
Utilisez l'authentification Google dans votre application
-
Tout d'abord, importez
SocialLoginimport { SocialLogin } from '@capgo/capacitor-social-login'; -
Appelez 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',}})}) -
Appelez
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 8est compatible avecPlay Storeservices -
Cliquez
next
-
Assurez-vous que l'image du système est de type
Google Play. CE DOIT doit être de typeGoogle Play
-
Cliquez sur Suivant
-
Vérifiez votre appareil. Vous pouvez nommer votre émulateur comme vous le souhaitez
-
Allez dans
Device Manageret lancez votre simulateur
-
Après le démarrage du simulateur, allez dans ses paramètres
-
Allez dans
Google Play
- Cliquez
UpdateAttendez 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 du 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.
Gestionnaire de jetons, SHA-1 et Firebase
Section intitulée « Gestionnaire de jetons, SHA-1 et Firebase »Sur Android, ce plugin utilise le Gestionnaire de jetons Google (androidx.credentials et Connectez-vous avec Google), et non le 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 jeton public | webClientId in SocialLogin.initialize() |
| Android, un par clé de signature | Prouve que votre APK est autorisé à appeler Google | Seul le console Cloud Google. N'envoyez pas cet ID à webClientId |
Une erreur fréquente est d'utiliser l'ID client Android comme webClientId. Le gestionnaire de jetons nécessite l'ID client Web là. 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 de package Android OAuth client, y compris tout suffixe. .debug Si l'écran de consentement OAuth est en mode Test, ajoutez tous les comptes Google que vous testez sous Utilisateurs > Test.
Publier l'application en Production n'est pas nécessaire pour email et profile les autorisations. Les Liens d'actifs numériques (assetlinks.json) ne sont pas nécessaires pour Se connecter avec Google à l'aide du Gestionnaire de jetons.
Les 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 presque toujours que Google a rejeté la combinaison du certificat de signature APK installé, du nom de package et de webClientId. Travaillez à travers ce checklist :
- Confirmer
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 > Identités, 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 de 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'utilisateur Google est un utilisateur de test.
- Attendez et réessayez après les modifications du console.
USER_CANCELLED Même après avoir sélectionné un compte sur une mise en page de débogage mal configurée, il peut toujours y avoir un désalignement de SHA-1 ou d'ID client. Fixez d'abord la configuration du console ci-dessus.
Extraire SHA-1 à partir de l'installation de la build
Section intitulée “Extraire SHA-1 à partir de l'installation de la build”Mises en page de débogage ou locales :
cd android && ./gradlew signingReportAPK de signature de mise en production :
keytool -printcert -jarfile android/app/release/app-release.apkAjoutez cette SHA-1 à un client OAuth Android avec le même nom de package, réinstallez le même APK signé et testez à nouveau :
adb install android/app/release/app-release.apkLecture du résultat de connexion
Section intitulée « Lecture du résultat de connexion »Les jetons sont encapsulé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 cela idToken et utilisez l'ID client Web comme webClientId dans initialize.
Si vous ne pouvez pas obtenir le certificat SHA-1 de développement, essayez un keystore personnalisé. Ce commentaire d'issue explique comment ajouter un keystore à votre projet.
Continuez de la section Google Login sur Android
Titre de la section : « Continuer avec Google Login sur Android »Si vous utilisez Google Login sur Android pour planifier l'authentification et les flux de compte, connectez-l’à 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.