Eine Schritt-für-Schritt-Anleitung zu Google OAuthuthentication mit JavaScript und Bun

Dieser Handbuch zeigt eine grundlegende JavaScript- und Express -Server -Implementierung von Google OAuth2 -Benutzerauthentifizierung. Während Bibliotheken den Prozess vereinfachen, klärt dieser praktische Ansatz Kernkonzepte. Wir werden Bun verwenden, eine schnelle JavaScript -Laufzeit.

---

Google OAuth2 Setup

Konfigurieren Sie vor dem Codieren Ihr Google Cloud -Projekt:

Schritt 1: Erstellen Sie ein Google Cloud -Projekt

1. Zugriff auf die Google Cloud -Konsole.
2. Erstellen Sie ein neues Projekt (oder verwenden Sie eine vorhandene).

Schritt 2: Konfigurieren von OAuth -Einwilligungsbildschirm

1. Navigieren Sie zu API & Services & gt; OAuth -Zustimmungsbildschirm .
2. App -Namen, Support -E -Mail und andere erforderliche Details angeben.
3. (optional) Branding anpassen, um einen informativeren Einverständniserklärung zu erhalten.

Schritt 3: Definieren Sie Scopes

1. unter Scopes , fügen Sie:
   hinzu
   • email: Zugriff auf die E -Mail des Benutzers.
   • openid: OpenID Connect zur Identitätsüberprüfung.
   • profile: Zugriff auf grundlegende Profildaten (Name, Bild).

Schritt 4: OAuth -Client -ID

generieren

(Erlauben Sie ein paar Minuten zur Verarbeitung.)

1. gehen Sie zu Anmeldeinformationen & GT; Erstellen Sie Anmeldeinformationen & GT; OAuth client id .
2. Wählen Sie Webanwendung als Anwendungstyp.
3. set autorisierte JavaScript -Herkunft bis http://localhost:3000.
4. Geben Sie eine -Rötung von URI : http://localhost:3000 an. Denken Sie daran, diese URIs für die Produktionsbereitstellung zu aktualisieren. Google leitet die Benutzer nach der Authentifizierung in den Umleitungs -URI um, einschließlich eines Autorisierungscode und eines Zustands. Der Einfachheit halber verwenden wir dieselbe Seite.

Schritt 5: Testbenutzer

hinzufügen

Fügen Sie zum Testen die E -Mail -Adressen Ihrer Testbenutzer hinzu. Veröffentlichen Sie Ihre App nach gründlichen Tests.

---

Google OAuth2 -Code -Implementierung

Projektstruktur

<code>project/
├── public/
│   └── index.html
├── src/
│   └── index.js
├── .env
└── bun.lock</code>

Wir verwenden Bun Version 1.2.

index.html

Diese HTML bietet eine einfache Schnittstelle für die Handhabung von Google Sign-In und OAuth Callback. (Code für Kürze weggelassen, aber in der ursprünglichen Eingabeaufforderung enthalten)

index.js (serverseitige Logik)

(Code für Kürze weggelassen, aber in der ursprünglichen Eingabeaufforderung enthalten)

Ausführen des Projekts

1. Bun installieren (Anweisungen auf der Bun -Website).
2. Erstellen Sie eine .env -Datei mit Ihrem GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET und GOOGLE_REDIRECT_URI.
3. Führen Sie den Server aus: bun run index.js
4. Testen Sie den Fluss: Zugriff http://localhost:3000, melden Sie sich bei Google an und überprüfen Sie die Konsole auf Token.

---

Schlussfolgerung

Diese manuelle Implementierung bietet ein starkes Verständnis von Google OAuth2. Während Bibliotheken wie Passport oder NextAuth Komfort bieten, beleuchtet dieser Ansatz die zugrunde liegenden Authentifizierungsmechanismen.

Das obige ist der detaillierte Inhalt vonEine Schritt-für-Schritt-Anleitung zu Google OAuthuthentication mit JavaScript und Bun. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!