Google-Login-Einrichtung

Einführung

In dieser Anleitung lernen Sie, wie Sie Google Login mit Capgo Social Login einrichten. Um Google Login einzurichten, benötigen Sie Folgendes:

• Eine Google-Konto

Allgemeine Einrichtung

Hinweis

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

In diesem Teil richten Sie die von Google angezeigte Anmeldeseite ein.

1. Bitte gehen Sie zu console.cloud.google.com
2. Klicken Sie auf den Projektselector
3. Wenn Sie noch keinen Projekt haben, bitten wir Sie, ein neues Projekt zu 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. Suchen Sie nach OAuth consent screen und klicken Sie darauf

      

   3. Konfigurieren Sie den Zustimmungsschirm

      Hinweis

      Ich werde davon ausgehen, dass Sie ein öffentliches App entwickeln, also werde ich mich auf den external Benutzerart auswählen, der Ihnen am besten geeignet ist UND klicken Sie create

      Klicken Sie auf create

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

   1. Beginnen wir mit der App Information

      
      • Bitte geben Sie Ihre App Name

        Achtung

        Dies wird den Benutzern angezeigt

      • Eingeben Sie das user support email

        Hinweis

        Sie können mehr über die E-Mail-Adresse für Benutzerunterstützung hier erfahren

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

         

         Dies ist nicht verpflichtend und ich werde diesen Schritt überspringen.

         Sie

      3. SOLLTEN die Domain-Konfiguration für die App konfigurieren. App domain

         

         Hinweis

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

      4. MUSSEN den E-Mail-Adresse des Entwicklers bereitstellen Entwickere-Mail-Adresse

         

      5. Konfiguration der Berechtigungen save and continue

         
6. Speichern und fortfahren

   1. Klicken Sie auf add or remove scopes

      

   2. Wählen Sie die folgenden Berechtigungen aus 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, drücken Sie Enter und klicken Sie add
   3. Klicken Sie save and continue
8. Klicken back to dashboard
9. Bewerben Sie Ihr App für die Verifizierung

   Hinweis

   Ich empfehle Ihnen stark, Ihre App für die Verifizierung zu bewerben. 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.

Differenzen zwischen Online-Zugriff und Offline-Zugriff

There are multiple ways to use Google Login with Capacitor. Here is a table that summarizes the differences between the two:

	Online-Zugriff	Offline-Zugriff
Benötigt einen Backend-Server	❌	✅
Langzeitzugriffstoken	❌	✅
Einfache Einrichtung	✅	❌

Hinweis

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

Vorsicht

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

Achtung

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

Wenn Sie immer noch nicht wissen, welches Sie wählen sollten, bitten Sie sich bitte die folgenden Szenarien zu überlegen:

1. Sie möchten, dass der Benutzer sich anmeldet, und direkt danach erhalten Sie ihm einen benutzerdefinierten JWT. Ihre App ruft keine Google-APIs auf

   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, 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 dieser nicht aktiv mit der App arbeitet.

   In diesem Fall wählen Sie "Offline-Zugriff".

Ein Beispiel-Backend für den Online-Zugriff

In dieser Teils des Tutorials 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 das code für dieses Beispiel finden hier

Sie sehen also:

Die Idee ist eigentlich sehr 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 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 ausstellen 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 an Google’s OAuth 2.0 Playgroundzuzuwenden. Von dort aus können Sie leicht erkennen, welche APIs Sie aufrufen können

Mit Offline-Zugriff mit Ihrem eigenen Backend

Um den Offline-Zugriff verwenden zu können, benötigen Sie Folgendes:

• Ein 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

As für den Client code, sieht er 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());
  }
}

Hinweis: was fehlt hier ist, dass es in der App keine SocialLogin.refresh() Anforderung gibt. Das ist bewusst. Bei Google Offline-Modus erfolgt die Aktualisierung nachdem Ihr Backend den serverAuthCode Refresh-Token sicher ablegt.

Fortsetzen mit Google Login Setup

Wenn Sie Google Login Setup verwenden, um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die native Fähigkeit in Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @capgo/capacitor-social-login Verbinden Sie es mit @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 in Zwei-Faktor-Authentifizierung.