Google Login Einrichtung

Einführung

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

• Eine Google-Konto

Allgemeine Einstellungen

Hinweis

Diese Schritt ist unabhängig von der gewählten Plattform erforderlich.

In dieser Teilschritte einrichten Sie die Anmeldebildschirm, der von Google angezeigt wird.

1. Bitte gehen Sie zu console.cloud.google.com
2. Klicken Sie auf den Projektselector
3. If Sie keinen Projekt bereits haben, bitte ein neues Projekt erstellen.
   1. Klicken Sie auf New project
   2. Benennen Sie Ihr Projekt und klicken Sie Create
   3. Stellen Sie sicher, dass Sie sich auf dem richtigen Projekt befinden
4. Beginnen Sie mit der Konfiguration des OAuth consent screen

   1. Klicken Sie auf die Suchleiste

      

   2. Nach OAuth consent screen und klicken Sie darauf

      

   3. Die Zustimmungsanzeige konfigurieren

      Hinweis

      Ich werde davon ausgehen, dass Sie eine App entwickeln, die für die Öffentlichkeit zugänglich ist, daher werde ich die external Benutzerart wählen. Wählen Sie die Benutzerart, die Ihnen am besten passt UND klicken Sie create

      Auf create

      
5. Die Informationen über Ihre App eintragen

   1. Beginnen wir mit der App Information

      
      • Bitte geben Sie Ihren App Name

        Vorsicht

        DAS WIRD DEN BENUTZERN GEZEIGT

      • Geben Sie den user support email

        Hinweis

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

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

         

         Hinweis

         Dies ist nicht obligatorisch und ich werde diesen Schritt überspringen

      3. Sie SOLLTE die App domain

         

         Hinweis

         Ich werde das nicht tun, weil dies nur eine einfache Demonstration ist, die NICHT veröffentlicht werden, aber ich empfehle Ihnen, diese Abschnitt auszufüllen.

      4. Sie MUSSEN den E-Mail-Adresse des Entwicklers

         

      5. Klicken Sie auf save and continue

         
6. Konfigurieren Sie die Berechtigungen

   1. Klicken Sie auf add or remove scopes

      

   2. Wählen Sie die folgenden Berechtigungen und klicken Sie update

      

   3. Klicken Sie save and continue

      
7. Hinzufügen eines Testnutzers
   1. Klicken Sie auf add users
   2. Geben Sie Ihre Google-E-Mail ein, klicken Sie auf Enter und klicken Sie dann add
   3. Klicken Sie save and continue
8. Klicken Sie back to dashboard
9. Bewerben Sie Ihre App zur Überprüfung

   Hinweis

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

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
Benötigt einen Backend	❌	✅
Langzeitzugriffstoken	❌	✅
Einfache Einrichtung	✅	❌

Hinweis

Offline-Modus Der Offline-Modus bedeutet, dass Ihr Backend Zugriff auf Googles APIs hat, auch wenn der Benutzer nicht aktiv mit Ihrer App interagiert (d. h., wenn der Benutzer "offline" von der Perspektive Ihrer App ist). Langzeitzugriffstoken ermöglichen diese Funktionalität, indem sie dem Backend ermöglichen, Googles APIs auf behalf des Benutzers zu jeder Zeit aufzurufen.

Vorsicht

Der Offline-Modus ERFORDERT einen Backend-Server. Wenn Sie den Offline-Modus verwenden, erhält die Vorderseite nur minimalen Informationen (hauptsächlich nur ein Serverauth code). Ohne einen Backend, um diesen code gegen Token und Benutzerinformationen auszutauschen, bietet der Offline-Modus keine nützlichen Daten für Ihre Vorderseiteanwendung.

Vorsicht

SocialLogin.refresh({ provider: 'google' }) erfordert nicht mit google.mode: 'offline'. In Offline-Modus gibt das Plugin Ihnen nur serverAuthCode, und Ihr Backend muss das code gegen Zugriffs- und Refresh-Tokens austauschen, dann diese Tokens auf dem Backend erneuern.

Wenn Sie immer noch nicht wissen, welches Sie wählen sollten, überlegen Sie bitte folgende Szenarien:

1. Sie möchten, dass der Benutzer sich anmeldet, sofort danach erhalten Sie ihm einen benutzerdefinierten JWT. Ihre App wird NICHT Google APIs aufrufen

   In diesem Fall wählen Sie Online-Zugriff.

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

   In diesem Fall wählen Sie Online-Zugriff

3. Ihre App ruft einige Google APIs vom Backend aus, aber nur dann, wenn der Benutzer aktiv mit der App arbeitet

   In diesem Fall wählen Sie Online-Zugriff

4. Ihre App überprüft periodisch den Kalender des Benutzers, auch wenn er nicht aktiv mit der App arbeitet

   In diesem Fall wählen Sie Offline-Zugriff

Eine Beispiel-Backend für Online-Zugriff

In dieser Teilausgabe der Anleitung zeige ich Ihnen, wie Sie den Benutzer auf Ihrem Backend validieren können.

Dieses Beispiel wird sehr einfach sein und auf folgenden Technologien basieren:

• TypeScript

• Hono

• Javascripts fetch API

Sie können die code für dieses Beispiel hier

Wie Sie sehen können:

The idea is rather simple. You send a simple GET Anfrage an https://www.googleapis.com/oauth2/v3/tokeninfo und dies gibt Ihnen zurück, ob der Token gültig ist oder nicht und wenn es ist, gibt es Ihnen die E-Mail des Benutzers. Es gibt Ihnen auch einige andere Informationen über den Benutzer-Token

Von dort aus könnten Sie dem Benutzer Ihren eigenen JWT oder eine Art Sitzungskochnie ausstellen. Die Möglichkeiten sind endlos, für die endgültige Auth-Implementierung

Wenn Sie Google API aufrufen möchten, würde ich Ihnen stark empfehlen, sich Google’s OAuth 2.0 Playgroundzu schauen. Von dort aus können Sie leicht erkennen, welche APIs Sie aufrufen können

Mit Offline-Zugriff mit Ihrem eigenen Backend

Um Offline-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 (ein einfaches Datenbank-System)

Die code für dieses Beispiel finden Sie hier

Beim Client code sieht es 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());
  }
}

Beachten Sie, was hier fehlt: Es fehlt die SocialLogin.refresh() wird im App aufgerufen. Das ist absichtlich. In Googles Offline-Modus erfolgt die Aktualisierung nachdem Ihr Backend den Refresh-Token austauscht und sicher speichert. serverAuthCode und speichert den Refresh-Token sicher.

Weitermachen von Google Login Setup

Wenn Sie " Google Login Setup " zur Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit " Using @capgo/capacitor-social-login für die native Fähigkeit in Using @capgo/capacitor-social-login, " Using @capgo/capacitor-social-login für die Implementierungsdetails in Using @capgo/capacitor-social-login, " Using @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-Passkey, @capgo/capacitor-native-Biometrie für die Implementierungsdetails in @capgo/capacitor-native-Biometrie, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.