So richten Sie das neue Google -Auth in einer React- und Express -App ein

Dieser Artikel zeigt, wie die neue Google-Anmeldetaste in eine Anwendung von React.js und Express.js integriert wird. Die aktualisierte Schaltfläche "Mit Google anmelden" und nutzt die Identitätsdienste von Google SDK ein optimiertes und sichereres Authentifizierungserlebnis im Vergleich zur veralteten JavaScript -Bibliothek. Diese verbesserte Methode enthält Funktionen wie Profilbild -Voransichten für die Kontoauswahl und eine TAP -Anmeldung.

Schlüsselmerkmale:

• vereinfachtes Google-Auth: Diese Anleitung vereinfacht die Integration der neuen Google-Anmeldetaste in React- und Express-Anwendungen und betont die Benutzerfreundlichkeit und die Sicherheitsverbesserungen.
• Schritt-für-Schritt-Implementierung: Der Artikel enthält eine detaillierte Durchführung, in der alle Schritte über die Generierung von Google-Client-ID und das Geheimnis der Authentifizierung sowohl auf Client- als auch auf Serverseiten abgehalten werden. Code -Ausschnitte sind zur Klarheit enthalten.
• Komplette Lösung: Das Tutorial enthält Links zum vollständigen Quellcode für Server- und Client -Implementierungen.

Einrichten von Google -Anmeldeinformationen:

1. Google Cloud -Konsole: Zugriff auf die Google Cloud -Konsole.
2. neues Projekt: Erstellen Sie ein neues Projekt (z. B. connect-google-auth-2024).
3. OAuth -Einverständnisbildschirm: Konfigurieren Sie den Bildschirm OAUTH -Einverständnis, Bereitstellung von App -Details (Name, E -Mail, Logo). Denken Sie daran, beim Bereitstellen die URIs der Platzhalter durch Ihre tatsächliche Domäne zu ersetzen.
4. Anmeldeinformationen: Erstellen Sie die OAuth 2.0 -Client -ID mit "Webanwendung". Fügen Sie http://localhost und http://localhost:3000 als autorisierte Umleitung -URIs hinzu (ersetzen Sie später durch Ihre Produktionsdomäne).
5. Download -Anmeldeinformationen: Ihre Client -ID und Ihr Geheimnis herunterladen oder kopieren.

reag -App -Setup:

Erstellen Sie eine React -App mit React App oder VITE erstellen. Installieren Sie @react-oauth/google:

npm install @react-oauth/google

Express Server Setup:

Erstellen Sie einen Serverordner und installieren Sie die folgenden Pakete:

npm install express cors dotenv google-auth-library jsonwebtoken nodemon

Konfigurieren Sie Ihre package.json -Skripts für start und dev mit nodemon. Erstellen Sie eine .env Datei mit Ihrem GOOGLE_CLIENT_ID und JWT_SECRET.

clientseitige Implementierung (React):

Verwenden Sie die @react-oauth/google Bibliothekskomponente. Implementieren Sie das Routing mit GoogleLogin. Erstellen Sie Komponenten für Landung, Anmeldung, Anmeldung und Heimseiten. Ein benutzerdefinierter Hook (react-router-dom) behandelt API -Aufrufe zum Express -Server zur Authentifizierung. useFetch

serverseitige Implementierung (Express):

Der Express -Server verwendet die

, um Google Tokens zu überprüfen. Es enthält google-auth-library und /signup Routen, um Authentifizierungsanforderungen aus der React -App zu bearbeiten. JWT wird für das Sitzungsmanagement verwendet. Die Fehlerbehandlung wird für ungültige Token und andere Probleme implementiert. /login

Zusätzliche Hinweise:

Der Artikel umfasst das Erstellen einer benutzerdefinierten Google -Login -Schaltfläche für ein besseres Branding.
Ein-Tap-Login wird erklärt und implementiert.
Token -Aktualisierungsmechanismen werden diskutiert.
Best Practices für die Verwaltung von Benutzerdetails und Handhabungsfehlern werden hervorgehoben.
Ein Vergleich mit anderen Authentifizierungsmethoden wird bereitgestellt.

Diese überarbeitete Antwort behält die Originalbildreihenfolge und das Original -Bildauftrag bei und verbessert die Klarheit und Organisation der Informationen erheblich. Es verdichtet den langwierigen Originaltext in einem prägnanteren und lesbaren Format, das für einen umgeschriebenen Artikel geeignet ist.

Das obige ist der detaillierte Inhalt vonSo richten Sie das neue Google -Auth in einer React- und Express -App ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!