Google Login auf Android

Einführung

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

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

Das Android SHA1-Zertifikat ist extrem schmerzhaft und ich würde es niemandem wünschen, dies einrichten zu müssen. Die folgenden Schritte gehen vom einfachsten Szenario aus: Eine App, die nicht im Google Play Store veröffentlicht ist und nur vom lokalen Simulator oder Entwicklungs-Hardware-Gerät verwendet wird.

Wenn Sie Ihre App im Google Play Store bereitgestellt haben, MÜSSEN Sie eine zusätzliche Android-Client-ID hinzufügen, die den SHA1 aus der Google Play Console für Produktions-Releases enthält. Sie finden den SHA1-Hash, den Google Play zum Signieren Ihres Release-Bundles verwendet, unter Test and release > Setup > App Signing.

Schließlich ist es wichtig zu erwähnen, dass der Fehler NICHT offensichtlich sein wird, wenn Sie einen Fehler machen. Er kann sehr schwer zu debuggen sein. Wenn Sie Probleme mit der Einrichtung haben, schauen Sie sich bitte die Github Issues an.

Zusätzlich können Sie sich den Abschnitt zur Fehlerbehebung des Google Login Setup für Android für weitere Informationen ansehen.

Erstellen Sie eine Android-Client-ID.
1. Klicken Sie auf die Suchleiste
2. Suchen Sie nach credentials und klicken Sie auf die APIs and Services Option (Nummer 2 auf dem Screenshot)
3. Klicken Sie auf create credentials
4. Wählen Sie OAuth client ID
5. Wählen Sie den Android Anwendungstyp
6. Öffnen Sie Android Studio
7. Ganz unten im Navigator finden Sie die Gradle Scripts
8. Finden Sie build.gradle für das Modul app
9. Kopieren Sie die android.defaultConfig.applicationId. Dies wird Ihr package name in der Google Console sein
10. Öffnen Sie nun das Terminal. Stellen Sie sicher, dass Sie sich im android Ordner Ihrer App befinden und führen Sie ./gradlew signInReport aus
1. Scrollen Sie zum Anfang dieses Befehls. Sie sollten Folgendes sehen. Kopieren Sie den SHA1.
1. Gehen Sie nun zurück zur Google Console. Geben Sie Ihre applicationId als Package Name und Ihren SHA1 im Zertifikatsfeld ein und klicken Sie auf create
Erstellen Sie einen Web-Client (dies ist für Android erforderlich)
1. Gehen Sie zur Create credentials Seite in der Google Console
2. Setzen Sie den Anwendungstyp auf Web
3. Klicken Sie auf Create
4. Kopieren Sie die Client-ID, Sie werden diese als webClientId in Ihrem JS/TS Code verwenden

Ändern Sie Ihre MainActivity

Bitte öffnen Sie Ihre App in Android Studio. Sie können cap open android ausführen
Finden Sie MainActivity.java
1. Öffnen Sie den app Ordner
2. Finden Sie java
3. Finden Sie Ihre MainActivity.java und klicken Sie darauf

Ändern Sie MainActivity.java. Bitte fügen Sie den folgenden 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 ist SEHR SEHR wichtig !!!!!!
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() {}
}

Speichern Sie die Datei

Verwenden Sie Google Login in Ihrer Anwendung

Importieren Sie zuerst SocialLogin

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

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

// onMounted ist Vue-spezifisch
// webClientId ist die Client-ID, die Sie im Web-Client-Erstellungsschritt erhalten haben, nicht die Android-Client-ID.
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
    }
  })
})

Rufen Sie SocialLogin.login auf. Erstellen Sie eine Schaltfläche und führen Sie den folgenden Code beim Klicken aus.

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// Verarbeiten Sie die Antwort
console.log(JSON.stringify(res))

Konfigurieren Sie den Emulator zum Testen
1. Gehen Sie in den Device manager und klicken Sie auf die Plus-Schaltfläche
2. Erstellen Sie ein virtuelles Gerät
3. Wählen Sie ein beliebiges Gerät mit einem Play Store Symbol
  
  Wie Sie sehen können, unterstützt der pixel 8 die Play Store Dienste
4. Klicken Sie auf next
5. Stellen Sie sicher, dass das OS-Image vom Typ Google Play ist. Es MUSS vom Typ Google Play sein
6. Klicken Sie auf next
7. Bestätigen Sie Ihr Gerät. Sie können Ihren Emulator nach Belieben benennen
8. Gehen Sie in den Device Manager und starten Sie Ihren Simulator
9. Nachdem der Simulator hochgefahren ist, gehen Sie in die Einstellungen
10. Gehen Sie zu Google Play
1. Klicken Sie auf Update und warten Sie etwa 60 Sekunden
Testen Sie Ihre Anwendung

Wenn Sie alles richtig gemacht haben, sollten Sie sehen, dass der Google-Login-Ablauf ordnungsgemäß funktioniert:

Fehlerbehebung

Wenn Sie Probleme haben, schauen Sie sich bitte die Github Issues an.

Die Probleme mit Google Login sind IMMER mit dem SHA1-Zertifikat verbunden.

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

Google Login auf Android

Einführung

Verwendung von Google Login auf Android

Fehlerbehebung