Google-Anmeldung auf Android

Einleitung

In dieser Anleitung lernen Sie, wie Sie Google Login mit Capgo Social Login für Android einrichten. Ich gehe davon aus, dass Sie bereits die allgemeine Einrichtungsanleitung.

Google-Login auf Android verwenden

In diesem Teil lernen Sie, wie Sie Google-Login in Android einrichten.

Vorsicht

Das Android-SHA1-Zertifikat ist sehr frustrierend und ich möchte es niemandem zumuten, dies aufzusetzen. Die folgenden Schritte gehen davon aus, dass sich die App in der einfachsten Szenario befindet, die nicht im Google Play Store veröffentlicht ist und nur von der lokalen Simulator oder Entwicklungshardware verwendet wird.

Wenn Sie Ihre App im Google Play Store veröffentlicht haben, MUSSEN Sie fügen Sie einen zusätzlichen Android-Kundenidentifikator hinzu, der den SHA1 aus dem Google Play-Konsolen für Produktionsversionen enthält. Sie können den SHA1-Hash finden, den Google Play zum Signieren Ihres Release-Bundles verwendet, unter Test and release > Setup > App Signing.

Es ist wichtig zu beachten, dass, wenn Sie Fehler machen, der Fehler NICHT offensichtlich sein wird. Es kann sehr schwierig sein, ihn zu debuggen. Wenn Sie mit der Einrichtung Schwierigkeiten haben, schauen Sie bitte in die Github-Fehler.

Darüber hinaus können Sie die Fehlerbehebungsabschnitt der Google-Anmeldeseite für Android für weitere Informationen.

Hinweis

Sie können mehrere Android-Kundenidentifikatoren erstellen. Dies ist erforderlich, wenn Sie mehrere SHA1-Zertifikate haben.

1. Erstellen Sie einen Android-Kundenidentifikator.

   1. Klicken Sie auf die Suchleiste

      

   2. Suchen Sie nach credentials und klicken Sie auf das APIs and Services das zweite (Nummer 2 auf dem Screenshot)

      

   3. Klicken Sie auf den create credentials

      

   4. Wählen Sie OAuth client ID

      

   5. Wählen Sie das Android Anwendungstyp

      

   6. Öffnen Sie Android Studio

   7. Am unteren Ende des Navigators finden Sie die Gradle Scripts

      

   8. Finden build.gradle für das Modul app

      

   9. Kopieren Sie das android.defaultConfig.applicationIdDies wird Ihr package name im Google-Konsolen

      

   10. Öffnen Sie nun die Terminal-Anwendung. Stellen Sie sicher, dass Sie sich im android Ordner Ihres Apps befinden und das ./gradlew signInReport

   
   11. Zum Anfang dieser Anweisung scrollen. Sie sollten Folgendes sehen. Fügen Sie den SHA1.
   
   12. Gehe nun zurück zum Google-Konsolen. Geben Sie Ihren applicationId als Package Name und Ihre SHA1 in das Zertifikatsfeld ein und klicken Sie create
   

2. Erstelle einen Webclient (dies ist erforderlich für Android)

   1. Gehe zur Create credentials Seite im Google-Konsolen

   2. Setze die Anwendungstyp auf Web

      

   3. Klicken Sie Create

      

   4. Kopieren Sie die Client-ID, Sie verwenden diese als webClientId in Ihrem JS/TS code

      

3. Passen Sie Ihre MainActivity

   1. Öffnen Sie Ihr App-Projekt in Android Studio. Sie können es cap open android

   2. Finden Sie MainActivity.java

      1. Öffnen Sie das app Ordner

         

      2. Finden Sie java

         

      3. Entdecken Sie Ihre MainActivity.java und klicken Sie darauf

         

   3. Ändern MainActivity.javaBitte fügen Sie folgende code hinzu

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

   4. Speichern Sie die Datei

4. Verwenden Sie Google-Login in Ihrer Anwendung

   1. Zuerst importieren Sie SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. Rufen Sie initialize auf. Dies sollte nur einmal aufgerufen werden.

      // 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. Rufen Sie an SocialLogin.login. Erstellen Sie einen Button und führen Sie folgendes code auf Klick aus.

      const res = await SocialLogin.login({
        provider: 'google',
        options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))

      Vorsicht

      Wenn Sie Google mit mode: 'offline', SocialLogin.login() wieder serverAuthCode für Ihren Backend-Austauschfluss. Rufen Sie SocialLogin.refresh({ provider: 'google' }) in der App in diesem Modus nicht auf. Austauschen serverAuthCode auf Ihrem Backend, speichern Sie den Google-Refresh-Token dort und aktualisieren Sie ihn auf dem Backend.

5. Konfigurieren Sie den Emulator für die Testung

   1. Gehen Sie hinein Device manager und klicken Sie auf die Plus-Taste

      

   2. Ein virtuelles Gerät erstellen

      

   3. Wählen Sie jedes Gerät mit einem Play Store Symbol

      

      die pixel 8 Dienste Play Store Klicken Sie auf

   4. Weiter-Button in der Geräteerstellungswizard next

      

   5. Stellen Sie sicher, dass das Betriebssystem-Image vom Typ Google Play. MUSST muss vom Typ Google Play

      

   6. Klicken Sie auf Weiter

      

   7. Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie ihn bevorzugen

      

   8. Gehe in Device Manager und starte dein Simulator

      

   9. Nachdem der Simulator gestartet wurde, gehe in seine Einstellungen

      

   10. Gehe in Google Play

   
   11. Klicken Update und warten Sie etwa 60 Sekunden
   

6. Testen Sie Ihre Anwendung

   Wenn Sie alles korrekt gemacht haben, sollten Sie das Google-Login-Flow ordnungsgemäß funktionieren sehen:

   

Fehlerbehebung

Wenn Sie Probleme haben, zögern Sie bitte nicht, diesen Abschnitt zu überprüfen Github Probleme.

Die Probleme mit dem Google-Login sind immer bezogen auf das SHA1-Zertifikat.

Wenn Sie das Entwicklungs-SHA1-Zertifikat nicht erhalten können, versuchen Sie, ein benutzerdefiniertes Keystore zu verwenden. Hier ist ein Kommentar, der erklärt, wie Sie ein Keystore zu Ihrem Projekt hinzufügen können.