Google Login sur Android

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

Introduction

Dans ce guide, vous apprendrez à configurer Google Login avec Capgo Social Login pour Android. Je pars du principe que vous avez déjà lu le guide de configuration générale.

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

Le certificat SHA1 d'Android est une véritable corvée et je ne souhaiterais cela à personne. Les étapes suivantes supposent le scénario le plus simple : une application qui n'est pas publiée sur le Google Play Store et qui est uniquement utilisée sur un simulateur local ou un appareil de développement.

Si vous avez déployé votre application sur le Google Play Store, vous DEVEZ ajouter un client ID Android supplémentaire contenant le SHA1 de la console Google Play pour vos releases de production. Vous trouverez le hash SHA1 utilisé par Google Play pour signer votre release bundle sous Test and release > Setup > App Signing.

Enfin, il est important de noter qu'en cas d'erreur, celle-ci ne sera PAS évidente. Le débogage peut s'avérer très difficile. Si vous rencontrez des problèmes lors de la configuration, consultez les problèmes Github.

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

Créer un client ID Android
1. Cliquez sur la barre de recherche
2. Recherchez credentials et cliquez sur APIs and Services le premier (numéro 2 sur la capture d'écran)
3. Cliquez sur le create credentials
4. Sélectionnez OAuth client ID
5. Sélectionnez le Android type d'application
6. Ouvrir Android Studio
7. Tout en bas du navigateur, trouvez la Gradle Scripts
8. Trouvez build.gradle pour le module app
9. Copiez le android.defaultConfig.applicationId. Ce sera votre package name dans la console Google
10. Ouvrez maintenant le terminal. Assurez-vous d'être dans le android le dossier de votre app et lancez ./gradlew signInReport
1. Remontez en haut de cette commande. Vous devriez voir ceci. Copiez le SHA1.
1. Maintenant, retournez sur la Google Console. Entrez votre applicationId en tant que Package Name et votre SHA1 dans le champ certificat, puis cliquez sur create
Créez un client web (requis pour Android)
1. Accéder au Create credentials de la Google Console
2. Définissez le type d'application sur Web
3. Cliquez Create
4. Copiez l'ID client, vous l'utiliserez comme webClientId dans votre code JS/TS

Modifiez votre MainActivity

Ouvrez 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

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() {}
}

Enregistrez le fichier

Utilisez Google Login dans votre application
1. Tout d'abord, importez SocialLogin
```
import { SocialLogin } from '@capgo/capacitor-social-login';
```
2. Appelez initialize. Cette méthode ne doit être appelée 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 au 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'appelez pas SocialLogin.refresh({ provider: 'google' }) dans l'application dans ce mode. Échangez serverAuthCode sur votre backend, stockez le refresh token Google à cet endroit, et effectuez le refresh côté backend.
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 une Play Store icône
  
  Comme vous pouvez le voir, pixel 8 prend en charge les Play Store services
4. Cliquez next
5. Assurez-vous que l'image de l'OS est de type Google Play. IL DOIT être de type Google Play
6. Click next
7. Confirmez votre appareil. Vous pouvez nommer votre émulateur comme vous le souhaitez
8. Allez dans Device Manager et démarrez votre simulateur
9. Une fois le simulateur démarré, allez dans ses paramètres
10. Allez dans Google Play
1. Cliquez Update et attendez environ 60 secondes
Testez votre application

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

Troubleshooting

Si vous rencontrez des problèmes, comparez d'abord la configuration de votre application avec les valeurs de la Google Cloud Console. Les échecs de Google Sign-In sur Android sont généralement dus à une discordance du nom de package, du SHA-1 ou du client ID.

Credential Manager, SHA-1 et Firebase

Sur Android, ce plugin utilise Google Credential Manager (androidx.credentials et Sign in with Google), et non l'ancien GoogleSignInClient API. Les erreurs Logcat telles que GetCredentialCustomException: [28444] Developer console is not set up correctly proviennent de cette pile.

Filtrez Logcat avec GoogleProvider ou CapgoSocialLogin après un échec de connexion. Le plugin enregistre votre nom de package, le SHA-1 de signature et un webClientId masqué afin que vous puissiez les comparer avec la Google Cloud Console.

Configuration Google Cloud requise

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

Type de client	Utilisé pour	Où l'insérer
Application Web	Serveur / audience du token d'ID	`webClientId` dans `SocialLogin.initialize()`
Android, un par clé de signature	Prouve que votre APK est autorisé à appeler Google	Console Google Cloud uniquement. Ne transmettez pas cet ID à `webClientId`

Une erreur courante consiste à utiliser l'ID client Android comme webClientIdCredential Manager nécessite l'ID client Web à cet endroit. Le client Android a seulement besoin du nom de package et du SHA-1 corrects, enregistrés dans la 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 debug.
Release : à partir de l'APK ou de l'AAB que vous installez réellement.
Play App Signing : depuis Play Console > Intégrité de l'application > Certificat de clé de signature d'application. Ceci est requis pour les builds du Play Store, même si votre SHA-1 de clé d'upload est déjà enregistré.

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

Si l'écran de consentement OAuth est en mode Test, ajoutez chaque compte Google utilisé pour vos tests sous Audience > Utilisateurs de test. La publication de l'application en Production n'est pas requise pour email et profile scopes. Digital Asset Links (assetlinks.json) ne sont pas requis pour la connexion avec Google via Credential Manager.

Les modifications sur Google Cloud peuvent mettre quelques heures à se propager.

Erreur 28444 : la console développeur est mal configurée

Cela signifie presque toujours que Google a rejeté la combinaison du certificat de signature de l'APK installé, du nom de package et de webClientId. Suivez cette checklist :

Confirmer webClientId est l'ID client de l'application Web et se termine par .apps.googleusercontent.com.
Lancez l'app, reproduisez l'erreur et lisez les logs Logcat pour GoogleProvider, signingSha1=, et package=.
Dans Google Cloud Console > Identifiants, ouvrez votre client OAuth Android et vérifiez le nom de package et le SHA-1 exacts.
Si vous testez un build de release, enregistrez le SHA-1 de ce build, pas seulement celui du keystore de debug.
Si l'application est distribuée via le Play Store, enregistrez également le SHA-1 de la signature d'application Play.
Assurez-vous que les clients Web et Android se trouvent dans le même projet Google Cloud.
Si l'écran de consentement est en mode Testing, confirmez que le compte Google est un utilisateur de test.
Attendez et réessayez après avoir modifié la console.

USER_CANCELLED après avoir choisi un compte, un build de debug mal configuré peut toujours entraîner une erreur de SHA-1 ou de client ID. Corrigez d'abord la configuration de la console ci-dessus.

Extraire le SHA-1 du build que vous installez

Builds de debug ou locaux :

cd android && ./gradlew signingReport

APK de la release signée :

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 le même APK signé, puis testez à nouveau :

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

Les tokens sont imbriqués sous result:

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

Pour Firebase Auth, créez vos identifiants avec idToken et utilisez l'ID client Web comme webClientId dans initialize.

Si vous ne parvenez pas à obtenir le certificat SHA-1 de développement, essayez un keystore personnalisé. Ce commentaire sur l'issue explique comment ajouter un keystore à votre projet.

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