Google Login sur Android

Copiez un prompt de configuration avec les étapes d'installation et la 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 la connexion Google sur Android.

La clé SHA1 d'Android est vraiment fastidieuse et je ne voudrais pas que cela tombe sur quelqu'un. 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 DEVEZ ajouter une autre clé client Android supplémentaire qui contient la clé SHA1 du console Google Play pour les lancements de production. Vous pouvez trouver la clé SHA1 utilisée par Google Play pour signer votre bundle de lancement 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 la 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'aperçu)
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. À la base de la barre de navigation, trouvez la Gradle Scripts
8. Trouvez build.gradle pour le module app
9. Copiez le android.defaultConfig.applicationIdCela sera votre package name dans le console Google
10. Ouvrez maintenant le terminal. Assurez-vous d'être dans le android dossier de votre application et exécutez ./gradlew signInReport
1. Rendez-vous en haut de cette commande. Vous devriez voir les éléments suivants. Copiez le SHA1.
1. Retournez maintenant dans la Console Google. Entrez votre applicationId comme Package Name et votre SHA1 dans le champ de certificat et cliquez create
Créez un client web (c'est requis pour Android)
1. Allez à la Create credentials page dans le Console Google
2. Fixez le type d'application sur Web
3. Cliquez sur 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 l'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 les informations suivantes 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 l'authentification Google dans votre application
1. Tout d'abord, importez SocialLogin
```
import { SocialLogin } from '@capgo/capacitor-social-login';
```
2. Appeler initialize. 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))
```
  If vous initialisez Google avec mode: 'offline', SocialLogin.login() renvoie serverAuthCode pour votre flux d'échange de backend. N'appellez pas SocialLogin.refresh({ provider: 'google' }) sur votre backend, stockez le jeton de rafraîchissement Google là-bas, et rafraîchissez sur le backend. serverAuthCode Configurez l'émulateur pour les tests
Allez dans
1. et cliquez sur le bouton plus Device manager Gestionnaire de dispositifs dans Android Studio avec le bouton plus mis en surbrillance
2. Bouton Créer un appareil virtuel dans la configuration de l'appareil virtuel
3. un Play Store icône
  
  Comme vous pouvez le voir, le pixel 8 supporte les Play Store services
4. Cliquez next
5. Assurez-vous que l'image du système est de type Google Play. CE DOIT doit être de type Google Play
6. Cliquez sur Suivant
7. Veuillez confirmer votre appareil. Vous pouvez nommer votre émulateur comme vous le souhaitez
8. Allez dans Device Manager et démarrez votre simulateur
9. Après le démarrage de l'émulateur, 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 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

Sur Android, ce plugin utilise le Gestionnaire de jetons Google (androidx.credentials et Se connecter 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

ou	ou	ou
ou	Serveur / ID jeton audience	`webClientId` in `SocialLogin.initialize()`
Android, un par clé de signature	Prouve que votre APK est autorisé à appeler Google	Seul Google Cloud Console. N'envoyez pas cet ID à `webClientId`

Une erreur commune est d'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 Play Console > 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'envoi 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.

et email les profile lesassetlinks.jsonles

les

les webClientId. Travaillez à travers ce checklist :

Confirmer webClientId est 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=, et package=.
Dans Google Cloud Console > Identifiants, ouvrez votre client OAuth Android et vérifiez le nom de package exact et le SHA-1.
Si vous testez une version de production, enregistrez le SHA-1 de cette version, et non uniquement le keystore de débogage.
Si l'application est distribuée par la Play Store, enregistrez également le SHA-1 de signature d'application Play.
Assurez-vous 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 le compte 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 page de débogage mal configurée, il peut toujours s'agir d'une incompatibilité de SHA-1 ou d'un ID client. Fixez d'abord la configuration du console.

Extraire la SHA-1 de l'installation que vous utilisez.

Builds de débogage ou locaux :

cd android && ./gradlew signingReport

APK de signature de mise en production :

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

Ajoutez cette SHA-1 à un client OAuth Android avec le nom de package correspondant, réinstallez le même APK signé 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 client Web comme webClientId en 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.

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