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 Einstellungen

Hinweis

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

In diesem Teil richten Sie die Anmeldeseite ein, die von Google angezeigt wird.

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 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. Suchen Sie nach OAuth consent screen und klicken Sie darauf

      

   3. Konfigurieren Sie den Zustimmungsbildschirm

      Hinweis

      Ich werde davon ausgehen, dass Sie ein App entwickeln, die sich an die Öffentlichkeit richtet, daher werde ich die external Benutzerart verwenden. Wählen Sie bitte die Benutzerart aus, die Ihnen am besten passt UND klicken Sie create

      Klicken Sie auf create

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

   1. Lassen Sie uns mit der App Information

      
      • Bitte geben Sie Ihren App Name

        Vorsicht

        DAS WIRD DEN BENUTZERN ANGEZEIGT

      • Geben Sie den user support email

        Hinweis

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

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

         

         Hinweis

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

      3. Sie SOLLTEN die App domain

         

         Anmerkung

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

      4. context: Sie Definition, Capgo Marketingwebsite, Rolle: Langen Marketing- oder Rechtsparagraphen, gesehen in: Seite Disclaimer.astro, Seite Rückkehr.astro. Nachrichtenschlüssel Sie Definition (Sie Definition). HABEN SIE MUSSEN den Entwickler-E-Mail-Adresse bereitstellen

         

      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 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 Sie back to dashboard
9. Senden Sie Ihr Anwendungsverzeichnis zur Überprüfung

   Hinweis

   Ich empfehle Ihnen dringend, Ihr Anwendungsverzeichnis zur Überprüfung zu senden. 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-Server	❌	✅
Langzeitzugriffstoken	❌	✅
Einfache Einrichtung	✅	❌

Hinweis

Offline-Modus bezeichnet, dass Ihr Backend-Server auf die Google-APIs zugreifen kann, auch wenn der Benutzer nicht aktiv mit Ihrer App interagiert (d.h. wenn der Benutzer „offline“ von der Perspektive Ihrer App aus ist). Langzeitzugriffstoken ermöglichen diese Funktionalität, indem sie dem Backend ermöglichen, auf Google-APIs im Namen des Benutzers aufzurufen, wann immer dies erforderlich ist.

Vorsicht

Offline-Modus ERFOLGT EINEM Backend-Server. Wenn Sie den 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 der Offline-Modus Ihrer Vorderseite keine nützlichen Daten.

Achtung

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

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

1. Sie möchten, dass der Benutzer sich anmeldet, und sofort danach wird ihm ein benutzerdefinierter JWT ausgegeben. 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 auf, 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 diesem Teil der Anleitung zeige ich Ihnen, wie Sie den Benutzer auf Ihrem Backend validieren können.

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

• TypeScript

• Hono

• JavaScripts fetch API

Sie können das code für dieses Beispiel finden hier

Wie Sie sehen können:

Die Idee ist eigentlich sehr einfach. Sie senden eine einfache Anfrage an __CAPGO_KEEP_0__ und erhalten zurück, ob der Token gültig ist oder nicht und wenn ja, gibt es Ihnen die E-Mail-Adresse des Benutzers. Es gibt auch einige andere Informationen über den Benutzer-Tokener. GET Google OAuth Playground zeigt Token-Informationen mit Benutzerdetails an https://www.googleapis.com/oauth2/v3/tokeninfo 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.

Google OAuth 2.0 Playground

If you do want to call Google API’s, I would strongly recommend looking at Mit Offline-Zugriff mit Ihrem eigenen Backend__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

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

• Ein 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 Ein einfaches Datenbank-System

Die code für dieses Beispiel finden Sie hier

As für den 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());
  }
}

Hinweis: was fehlt hier ist, dass es in der App keine SocialLogin.refresh() Aufruf gibt. Das ist bewusst. Bei Google Offline-Modus erfolgt die Aktualisierung erst, 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 zur Verwendung der 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 for the native capability in Using @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.