Google Login einrichten

Einführung

In diesem Guide erfährst du, wie du Google Login mit Capgo Social Login einrichtest. Für die Einrichtung von Google Login benötigst du Folgendes:

• Ein Google-Konto

Allgemeines Setup

Hinweis

Dieser Schritt ist erforderlich, egal welche Plattform Sie verwenden.

In diesem Teil richten Sie den von Google angezeigten Login-Bildschirm ein.

1. Bitte gehe zu console.cloud.google.com
2. Klicke auf die Projektauswahl
3. Falls Sie noch kein Projekt haben, bitte Neues Projekt erstellen.
   1. Klicken Sie auf New project
   2. Benenne dein Projekt und klicke auf Create
   3. Stelle sicher, dass du im richtigen Projekt bist
4. Beginne mit der Konfiguration der OAuth consent screen

   1. Klicke auf die Suchleiste

      

   2. Suche nach OAuth consent screen und klicken Sie darauf

      

   3. Einwilligungsbildschirm konfigurieren

      Hinweis

      Ich gehe davon aus, dass Sie eine App für die Öffentlichkeit entwickeln, daher werde ich die external Nutzer-Typ. Bitte wählen Sie den am besten passenden Nutzertyp aus UND klicken Sie auf create

      Klicken Sie auf create

      
5. App-Informationen ausfüllen

   1. Beginnen wir mit dem App Information

      
      • Bitte geben Sie Ihren App Name

        Achtung

        DIES WIRD DEN BENUTZERN ANGEZEIGT

      • Gib die user support email

        Hinweis

        Weitere Informationen zur Support-E-Mail findest du hier hier

      2. Du KANN das App-Logo hinzufügen.

         

         Hinweis

         Das ist nicht verpflichtend, daher überspringe ich diesen Schritt

      3. Du SOLLTE konfigurieren App domain

         

         Hinweis

         Ich mache das nicht, weil dies nur eine einfache Demonstration ist, die NICHT veröffentlicht wird, aber ich empfehle dringend, diesen Abschnitt auszufüllen.

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

         

      5. Klicken Sie auf save and continue

         
6. Scopes konfigurieren

   1. Klicken Sie auf add or remove scopes

      

   2. Folgende Scopes auswählen und klicken update

      

   3. Klicken save and continue

      
7. Testbenutzer hinzufügen
   1. Klicken Sie auf add users
   2. Gib deine Google-E-Mail-Adresse ein, drücke Enter und klicke auf add
   3. Klicken save and continue
8. Klicken back to dashboard
9. Reiche deine App zur Verifizierung ein

   Hinweis

   Ich empfehle dringend, deine App zur Verifizierung einzureichen. Dies liegt außerhalb des Rahmens dieses Tutorials. Weitere Informationen findest du hier. Für lokale Tests ist das nicht nötig, für die Produktion aber schon.

Unterschiede zwischen Online- und Offline-Zugriff

Es gibt mehrere Möglichkeiten, Google Login mit Capacitor zu verwenden. Die folgende Tabelle fasst die Unterschiede zwischen den beiden zusammen:

	Online-Zugriff	Offline-Zugriff
Erfordert ein Backend	❌	✅
Langlebiges Access Token	❌	✅
Easy setup	✅	❌

Hinweis

Offline-Modus bedeutet, dass Ihr Backend auf die Google-APIs zugreifen kann, selbst wenn der Benutzer Ihre App nicht aktiv nutzt (d. h. wenn der Benutzer aus Sicht Ihrer App „offline“ ist). Langlebige Access-Tokens ermöglichen diese Funktion, indem sie dem Backend erlauben, jederzeit im Namen des Benutzers Google-APIs aufzurufen.

Achtung

Der Offline-Modus ERFORDERT einen Backend-Server. Bei Verwendung des Offline-Modus erhält das Frontend nur minimale Informationen (hauptsächlich nur einen Server-Auth-code). Ohne ein Backend, das diesen code gegen Tokens und Benutzerinformationen eintauscht, liefert der Offline-Modus keine nützlichen Daten für Ihre Frontend-Anwendung.

Achtung

SocialLogin.refresh({ provider: 'google' }) funktioniert es nicht mit google.mode: 'offline'. Im Offline-Modus liefert das Plugin nur serverAuthCode, und Ihr Backend muss diesen code gegen Access- und Refresh-Tokens tauschen und diese Tokens dann im Backend aktualisieren.

Wenn Sie noch nicht wissen, welche Option Sie wählen sollen, beachten Sie bitte die folgenden Szenarien:

1. Sie möchten, dass sich der User einloggt, und Sie werden ihm sofort ein eigenes JWT ausstellen. Ihre App ruft keine Google-APIs auf

   Wählen Sie in diesem Fall Online-Zugriff.

2. Ihre App ruft einige Google-APIs vom Client aus auf, aber nie vom Backend

   Wählen Sie in diesem Fall Online-Zugriff

3. Ihre App ruft einige Google-APIs vom Backend aus auf, aber nur, wenn der User die App aktiv nutzt

   Wählen Sie in diesem Fall Online-Zugriff

4. Ihre App prüft den Kalender des Users regelmäßig, auch wenn er die App nicht aktiv nutzt

   Wählen Sie in diesem Fall Offline-Zugriff

Ein Beispiel-Backend für Online-Zugriff

In diesem Teil des Tutorials zeige ich, wie du den Benutzer auf deinem Backend validierst.

Dieses Beispiel ist sehr einfach und basiert auf den folgenden Technologien:

• TypeScript

• Hono

• JavaScripts fetch API

Du findest den code für dieses Beispiel hier

Wie du sehen kannst:

Die Idee ist ziemlich einfach. Du sendest eine einfache GET Anfrage an https://www.googleapis.com/oauth2/v3/tokeninfo und diese gibt dir zurück, ob das Token gültig ist oder nicht. Falls ja, erhältst du die E-Mail-Adresse des Benutzers. Außerdem bekommst du weitere Informationen zum Benutzertoken.

Von dort aus kannst du dem Benutzer einen eigenen JWT ausstellen oder eine Art Session-Cookie setzen. Die Möglichkeiten für die finale Auth-Implementierung sind endlos.

Wenn du tatsächlich die API von Google aufrufen möchtest, empfehle ich dir dringend, einen Blick auf den Google OAuth 2.0 Playgroundzu werfen. Dort kannst du leicht sehen, welche APIs du aufrufen kannst.

Offline-Zugriff mit eigenem Backend nutzen

Um Offline-Zugriff zu nutzen, benötigst du Folgendes:

• Einen HTTP-Server

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

• Hono

• Hono Zod Validator

• Zod

• Hono JWT

• LowDb (eine einfache Datenbank)

Den code für dieses Beispiel findest du hier

Der code für den Client sieht so aus:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- specific to my app

const baseURL = "[redacted]";

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

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

Beachte, was hier fehlt: Es gibt keinen SocialLogin.refresh() Aufruf in der App. Das ist Absicht. Im Google-Offline-Modus erfolgt der Refresh, nachdem dein Backend austauscht serverAuthCode und den Refresh Token sicher speichert.

Weiter mit Google Login Setup

Wenn du es nutzt Google Login einrichten Um Authentifizierungs- und Account-Flows zu planen, verbinde es mit @capgo/capacitor-social-login verwenden für die native Funktion bei der Verwendung von @capgo/capacitor-social-login, @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails zur Zwei-Faktor-Authentifizierung.