Google Login Einrichtung

Einführung

In diesem Leitfaden lernen Sie, wie Sie Google Login mit Capgo Social Login einrichten. Sie benötigen Folgendes, um Google Login einzurichten:

• Ein Google-Konto

Allgemeine Einrichtung

Note

Dieser Schritt ist unabhängig von der Plattform erforderlich, die Sie verwenden möchten.

In diesem Teil richten Sie den Login-Bildschirm ein, der von Google angezeigt wird.

1. Bitte gehen Sie zu console.cloud.google.com
2. Klicken Sie auf die Projektauswahl
3. Wenn Sie noch kein Projekt haben, erstellen Sie bitte ein neues Projekt.
   1. Klicken Sie auf New project
   2. Benennen Sie Ihr Projekt und klicken Sie auf Create
   3. Stellen Sie sicher, dass Sie im richtigen Projekt sind
4. Beginnen Sie mit der Konfiguration des OAuth consent screen

   1. Klicken Sie auf die Suchleiste

      

   2. Suchen Sie nach OAuth consent screen und klicken Sie darauf

      

   3. Konfigurieren Sie den Consent Screen

      Note

      Ich gehe davon aus, dass Sie eine App entwickeln, die für die Öffentlichkeit zugänglich ist, daher werde ich den external Benutzertyp verwenden. Bitte wählen Sie den Benutzertyp aus, der am besten zu Ihnen passt UND klicken Sie auf create

      Klicken Sie auf create

      
5. Füllen Sie die Informationen über Ihre App aus

   1. Beginnen wir mit den App Information

      
      • Bitte geben Sie Ihren App Name ein

        Caution

        DIES WIRD DEN BENUTZERN ANGEZEIGT

      • Geben Sie die user support email ein

        Note

        Sie können mehr über die Support-E-Mail hier erfahren

      2. Sie KÖNNEN das App-Logo hinzufügen.

         

         Note

         Dies ist nicht obligatorisch und ich werde diesen Schritt überspringen

      3. Sie SOLLTEN die App domain konfigurieren

         

         Note

         Ich werde das nicht tun, da dies nur eine einfache Demonstration ist, die NICHT veröffentlicht wird, aber ich empfehle dringend, diesen Bereich auszufüllen.

      4. Sie MÜSSEN die E-Mail des Entwicklers angeben

         

      5. Klicken Sie auf save and continue

         
6. Konfigurieren Sie die Scopes

   1. Klicken Sie auf add or remove scopes

      

   2. Wählen Sie die folgenden Scopes aus und klicken Sie auf update

      

   3. Klicken Sie auf save and continue

      
7. Fügen Sie einen Testbenutzer hinzu
   1. Klicken Sie auf add users
   2. Geben Sie Ihre Google-E-Mail ein, drücken Sie Enter und klicken Sie auf add
   3. Klicken Sie auf save and continue
8. Klicken Sie auf back to dashboard
9. Reichen Sie Ihre App zur Überprüfung ein

   Note

   Ich empfehle dringend, Ihre App zur Überprüfung einzureichen. Dies liegt außerhalb des Umfangs dieses Tutorials. Sie können mehr hier erfahren. Dies ist nicht erforderlich für lokale Tests, aber für die Produktion erforderlich.

Unterschiede zwischen Online-Zugriff und Offline-Zugriff

Es gibt mehrere Möglichkeiten, Google Login mit Capacitor zu verwenden. Hier ist eine Tabelle, die die Unterschiede zwischen den beiden zusammenfasst:

	Online-Zugriff	Offline-Zugriff
Erfordert ein Backend	❌	✅
Langlebiges Access Token	❌	✅
Einfache Einrichtung	✅	❌

Note

Offline-Modus bedeutet, dass Ihr Backend auf Googles APIs zugreifen kann, auch wenn der Benutzer Ihre App nicht aktiv verwendet (d.h. wenn der Benutzer aus Sicht Ihrer App “offline” ist). Langlebige Access Tokens ermöglichen diese Funktionalität, indem sie es dem Backend ermöglichen, Google APIs jederzeit im Namen des Benutzers aufzurufen.

Caution

Offline-Modus ERFORDERT einen Backend-Server. Wenn Sie den Offline-Modus verwenden, erhält das Frontend minimale Informationen (hauptsächlich nur einen Server-Auth-Code). Ohne ein Backend zum Austausch dieses Codes gegen Tokens und Benutzerinformationen bietet der Offline-Modus keine nützlichen Daten für Ihre Frontend-Anwendung.

Wenn Sie immer noch nicht wissen, welchen Sie wählen sollten, beachten Sie bitte die folgenden Szenarien:

1. Sie möchten, dass sich der Benutzer anmeldet, unmittelbar danach werden Sie ihm ein benutzerdefiniertes JWT ausstellen. Ihre App wird KEINE Google APIs aufrufen

   Wählen Sie in diesem Fall Online-Zugriff.

2. Ihre App wird einige Google APIs vom Client aufrufen, aber nie vom Backend

   Wählen Sie in diesem Fall Online-Zugriff

3. Ihre App wird einige Google APIs vom Backend aufrufen, aber nur wenn der Benutzer die App aktiv verwendet

   Wählen Sie in diesem Fall Online-Zugriff

4. Ihre App wird regelmäßig den Kalender des Benutzers überprüfen, auch wenn er die App nicht aktiv verwendet

   Wählen Sie in diesem Fall Offline-Zugriff

Ein Beispiel-Backend für Online-Zugriff

In diesem Teil des Tutorials zeige ich, wie Sie den Benutzer auf Ihrem Backend validieren.

Dieses Beispiel wird sehr einfach sein und basiert auf den folgenden Technologien:

• Typescript

• Hono

• Javascript’s fetch API

Sie können den Code für dieses Beispiel hier finden

Wie Sie sehen können:

Die Idee ist ziemlich einfach. Sie senden eine einfache GET Anfrage an https://www.googleapis.com/oauth2/v3/tokeninfo und diese gibt Ihnen zurück, ob der Token gültig ist oder nicht, und wenn ja, gibt sie Ihnen die E-Mail des Benutzers. Sie gibt Ihnen auch einige andere Informationen über den Benutzer-Token

Von dort aus könnten Sie dem Benutzer Ihr eigenes JWT ausstellen oder eine Art Session-Cookie ausstellen. Die Möglichkeiten sind endlos für die endgültige Auth-Implementierung.

Wenn Sie Google API’s aufrufen möchten, empfehle ich dringend, sich Google’s OAuth 2.0 Playground anzusehen. Von dort aus können Sie leicht sehen, welche APIs Sie aufrufen können.

Verwendung von Offline-Zugriff mit Ihrem eigenen Backend

Um Online-Zugriff zu verwenden, benötigen Sie Folgendes:

• Einen HTTP-Server

In diesem Beispiel werde ich die folgenden Technologien verwenden, um den Offline-Zugriff in meiner App bereitzustellen:

• Hono

• Hono Zod validator

• Zod

• Hono JWT

• LowDb (eine einfache Datenbank)

Der Code für dieses Beispiel ist hier zu finden

Was den Client-Code betrifft, sieht er so aus:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- spezifisch für meine App

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'The same value as webClientId',
      mode: 'offline' // <-- wichtig
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- wichtig
    }
  })

  if (response.provider === 'google') {
    const result = response.result as GoogleLoginOfflineResponse
    const res = await fetch(`${baseURL}/auth/google_offline`, {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        serverAuthCode: result.serverAuthCode,
        platform: Capacitor.getPlatform()
      }),
      method: "POST"
    })

    if (res.status !== 200) {
      popoutStore.popout("Full google login failed", "check console");
      return
    }

    const { jwt } = await res.json();
    const userinfo = await fetch(`${baseURL}/auth/get_google_user`, {
      headers: {
        Authorization: `Bearer ${jwt}`
      }
    })
    if (userinfo.status !== 200) {
      popoutStore.popout("Full google (userinfo) login failed", "check console");
      return
    }
    popoutStore.popout("userinfo res", await userinfo.text());
  }
}