Google Login sur Android

Copiez un prompt de configuration avec les étapes d'installation et le guide Markdown complet pour ce plugin.

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.

Dans cette partie, vous apprendrez à configurer l'authentification Google sur Android.

L'obtention du certificat SHA1 Android est fastidieuse 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 n'est utilisée que par le simulateur local ou le matériel de développement.

Si vous avez déployé votre application sur Google Play Store, vous DOIT ajouter un ID client Android supplémentaire qui contient 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 finale sous Test and release > Setup > App Signing.

Enfin, il est important de mentionner 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 Github problèmes.

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

Créer un identifiant de client Android.
1. Cliquez sur la barre de recherche
2. Recherchez credentials et cliquez sur le APIs and Services un (le numéro 2 sur l'écran d'écran)
3. Cliquez sur le create credentials
4. Sélectionnez OAuth client ID
5. Sélectionnez le Android type d'application
6. Ouvrez Android Studio
7. En bas de la barre de navigation, trouvez la Gradle Scripts
8. Trouvez build.gradle pour le module app
9. Copiez le android.defaultConfig.applicationId. Cela sera votre package name dans le console Google
10. Ouvrez maintenant le terminal. Assurez-vous d'être dans le android répertoire de votre application et exécutez ./gradlew signInReport
1. Remontez en haut de cette commande. Vous devriez voir les éléments suivants. Copiez le SHA1.
1. Allez maintenant dans le Console Google. Insérez votre applicationId comme le Package Name et votre SHA1 dans le champ de certificat et cliquez sur create
Créez un client web (ceci est requis pour Android)
1. Allez dans le Create credentials page dans Google Console
2. Fixer le type d'application à Web
3. Cliquez Create
4. Copiez l'ID du client, vous en aurez besoin comme le webClientId dans votre JS/TS code

Modifiez votre MainActivity

Veuillez ouvrir votre application dans Android Studio. Vous pouvez exécuter cap open android
Trouvez MainActivity.java
1. Ouvrez le app dossier
2. Trouvez java
3. Trouvez votre MainActivity.java et cliquez dessus

Modifier MainActivity.java. Ajoutez les éléments suivants 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() {}
}

Enregistrer le fichier

Utilisez Google Login dans votre application
1. Tout d'abord, importez SocialLogin
```
import { SocialLogin } from '@capgo/capacitor-social-login';
```
2. Appelez initialize. Il convient de l'appeler 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 code lors du clic.
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))
```
  Si vous initialisez Google avec mode: 'offline', SocialLogin.login() renvoie serverAuthCode pour votre flux d'échange backend. N'appeliez pas SocialLogin.refresh({ provider: 'google' }) dans l'application dans ce mode. Échangez serverAuthCode sur votre serveur, stockez le jeton de rafraîchissement Google là-bas, et rafraîchissez sur le serveur.
Configurez l'émulateur pour les tests
1. Allez dans Device manager et cliquez sur le bouton plus
2. Créez un appareil virtuel
3. Sélectionnez n'importe quel appareil avec un Play Store icône
  
  Comme vous pouvez le voir, les pixel 8 supporte les Play Store services
4. Clicker next
5. Assurez-vous que l'image du système est du type Google Play. IL DOIT être du type Google Play
6. Clicker Suivant
7. Vérifiez votre périphérique. Vous pouvez nommer votre émulateur comme vous le souhaitez
8. Allez dans Device Manager et lancez votre simulateur
9. Après le démarrage du simulateur, allez dans ses paramètres
10. Allez dans Google Play
1. Cliquez Update et 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

Si vous rencontrez des problèmes, comparez d'abord votre configuration 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 incohérence entre le nom de package, la valeur SHA-1 ou l'ID client.

Gestion des jetons, SHA-1 et Firebase

Sur Android, ce plugin utilise le gestionnaire de jetons Google (et Sign in with Google), et non la version legacyandroidx.credentials __CAPGO_KEEP_0__. Les erreurs de Logcat telles que GoogleSignInClient API. Logcat errors such as GetCredentialCustomException: [28444] Developer console is not set up correctly Filtrez Logcat avec

ou GoogleProvider android:signingCertificateHashes CapgoSocialLogin après une tentative de connexion échouée. Le plugin enregistre votre nom de package, votre signature SHA-1 et un masque webClientId afin que vous puissiez les comparer contre le console Google Cloud.

Configuration Cloud Google requise

Vous avez besoin de deux types d'identifiants OAuth 2.0 dans le même projet Cloud Google :

Type d'application	Utilisé pour	Où cela va
Application web	Application serveur / audience d'ID token	`webClientId` dans `SocialLogin.initialize()`
Sur Android, un par clé de signature	Vérifiez que votre APK est autorisé à appeler Google	Seul le Cloud Console Google. N'envoyez pas cet ID à `webClientId`

Une erreur fréquente est d'utiliser l'ID du client Android comme webClientIdLe gestionnaire de credenciaux nécessite l'ID du client Web là. Le 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.
App Signer de Google Play : à partir du console de Play > Intégrité de l'application > Clé de signature de l'application. Cela est requis pour les builds de magasin Play même si votre SHA-1 de clé d'envoi est déjà enregistré.

Le applicationId doit exactement correspondre au nom de package du client OAuth Android, y compris tout android/app/build.gradle doit exactement correspondre au nom de package du client OAuth Android, y compris tout .debug suffix.

Si l'écran de consentement OAuth est en mode Test, ajoutez tous les comptes Google que vous testez sous Utilisateurs > Utilisateurs de test. La publication de l'application en Production n'est pas requise pour email et profile les autorisations. Les Liens d'actif numérique (assetlinks.json) ne sont pas requis pour la connexion avec Google via Gestionnaire de jetons.

Les modifications apportées à Google Cloud peuvent prendre jusqu'à quelques heures pour se propager.

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 webClientId est l'ID 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=, et package=.
Dans Google Cloud Console > Identifiants, ouvrez votre client OAuth Android et vérifiez l'exactitude du nom de package et de 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 debug.
Si l'application est distribuée via Google Play Store, enregistrez également la valeur SHA-1 de Play App Signing.
Assurez-vous que les clients Web et Android soient hébergés 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 configuration de debug erronée peut toujours être un problème de correspondance SHA-1 ou d'ID client. Fixez d'abord la configuration du console ci-dessus.

Extrayez la valeur SHA-1 de la version que vous installez

Débogage ou builds locales :

cd android && ./gradlew signingReport

APK de signature de sortie :

keytool -printcert -jarfile android/app/release/app-release.apk

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

adb install android/app/release/app-release.apk

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 du client Web comme webClientId dans initialize.

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

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