Verwenden Sie die Google OAuth-Authentifizierung mit React

In diesem Artikel erfahren Sie, wie Sie Google OAuth verwenden, um eine OAuth 2.0-konforme Autorisierungscode-Zuteilung in einem React-Projekt zu erstellen. Dadurch werden alle Herausforderungen, die mit der Erstellung und Verwaltung einer Authentifizierungslösung verbunden sind, von Ihnen weg und auf Google OAuth abstrahiert.

Verwenden Sie die Google OAuth-Authentifizierung mit React

Zuerst müssen wir Google client ID und client secret generieren. Suchen Sie zunächst in Ihrem Browser nach "Google OAuth" und klicken Sie auf den ersten Link in den Suchergebnissen.

Diese Seite enthält Schritt-für-Schritt-Verfahren zum Abrufen der Zugriffsschlüssel. Ich werde Sie jedoch durch die entsprechende Generierung der Client-ID und des Geheimnisses führen.

Klicken Sie auf den Link Google API Console, um die OAuth 2.0-Client-Anmeldeinformationen zu erhalten.

Erstellen Sie ein neues Projekt

Wählen Sie nun Google-Oauth aus dem Dropdown-Menü, und ein Modal sollte sich öffnen, in dem Sie ein aktuelles Projekt auswählen oder ein neues erstellen können.

Falls noch nicht geschehen, klicken Sie auf die Schaltfläche Neues Projekt, geben Sie den Projektnamen ein und klicken Sie auf die Schaltfläche ERSTELLEN.

Erstellen Sie einen OAuth-Zustimmungsbildschirm

Vor dem Generieren der Anmeldeinformationen müssen wir einen Zustimmungsbildschirm entwickeln. Wenn der Benutzer auf die Schaltfläche Mit Google OAuth anmelden klickt, wird er zum Zustimmungsbildschirm weitergeleitet.

Klicken Sie dann in der linken Seitenleiste unter "APIs & Services" auf die Option OAuth-Zustimmungsbildschirm. Wenn Ihre Anwendung für die breite Öffentlichkeit bestimmt ist, wählen Sie den externen Benutzertyp aus und klicken Sie im OAuth-Zustimmungsbildschirm auf die Schaltfläche ERSTELLEN.

Füllen Sie danach die Zustimmungsseite der App mit den wesentlichen Informationen aus.

Nachdem Sie die Felder ausgefüllt haben, klicken Sie auf die Schaltfläche "SPEICHERN UND WEITER".

Klicken Sie auf der Scopes-Seite auf "ADD OR REMOVE SCOPES". Die Anzahl der Bereiche, die Sie hinzufügen können, hängt von der Art der Anwendung ab, die Sie entwickeln, aber ich bin nur an der E-Mail-Adresse und den Profilinformationen des Benutzers interessiert.

Scrollen Sie nach unten und klicken Sie nach der Auswahl der Bereiche auf die Schaltfläche "UPDATE". Drücken Sie dann die Schaltfläche "SPEICHERN UND WEITER".

Um einen Testbenutzer hinzuzufügen, gehen Sie zur Registerkarte Testbenutzer und klicken Sie auf die Schaltfläche "BENUTZER HINZUFÜGEN". Beachten Sie, dass sich nur der Testbenutzer im Sandbox-Modus bei Ihrer Anwendung anmelden kann.

Nachdem Sie den Testbenutzer hinzugefügt haben, klicken Sie auf "SPEICHERN UND WEITER".

Überprüfen Sie auf der Registerkarte Zusammenfassung Ihre Informationen sorgfältig und klicken Sie auf die Schaltfläche ZURÜCK ZUM DASHBOARD, wenn Sie sicher sind, dass die von Ihnen angegebenen Informationen gültig sind.

OAuth-Anmeldeinformationen

Wählen Sie Anmeldeinformationen in der Seitenleiste unter "APIs & Dienste". Wählen Sie auf der Registerkarte Anmeldeinformationen die OAuth-Client-ID und klicken Sie auf "CREATE CREDENTIALS".

Geben Sie als Nächstes die Details an, die für den Zugriff auf die Daten des Benutzers erforderlich sind. Der genehmigte Umleitungs-URI sollte auf eine Serverroute verweisen. Dadurch können wir die GET-Anforderung vom Zustimmungsbildschirm an den Server senden.

Sie können andere Ansätze wählen, aber ich glaube, dass diese Methode schneller ist.

Nachdem Sie die erforderlichen Daten angegeben haben, klicken Sie auf die Schaltfläche "CREATE", und Sie sollten die generierte Client-ID und das Client-Secret erhalten.

Sie können die Client-ID und das Client-Geheimnis in Ihrem Notizbuch speichern, da wir sie in unserer Reaktionsanwendung implementieren. Beachten Sie, dass ich andere Client-IDs und Client-Geheimnisse aus dem obigen Screenshot verwendet habe.

Lassen Sie uns nun in die React-App eintauchen, wo wir mithilfe der Google Oauth2-Authentifizierung eine Anmelde- und Abmeldefunktion erstellen.

Generieren Sie zunächst den Login-Code, der bei der Login-Funktion hilft.

Codebeispiel - login.js:

import {GoogleLogin} from 'react-google-login';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function Login() {
  const onSuccess = (res) => {
    console.log('Login Success! current user: ', res.profileObj);
  };

  const onFailure = (res) => {
    console.log('Login Failed: res: ', res);
  };

  return (
    <div id='signInButton'>
      <GoogleLogin
  clientId = {clientId} buttonText = 'Login'
        onSuccess={onSuccess}
        onFailure={onFailure}
        cookiesPolicy={'single_host_origin'}
        isSignedIn={
    true}
      />
    </div>
  );
}

export default Login;

Die von uns generierte Client-ID kann verwendet werden, indem eine Variable namens Google-Client-ID erstellt wird. Ich habe eine Login-Schaltfläche im folgenden Code erstellt, der aus react-google-login importiert wurde.

Wir haben auch eine Methode entwickelt, die verschiedene Informationen in der Konsole ausgibt. Wenn der Login erfolgreich war, senden Sie Nachrichten wie Login Success!.

Codebeispiel - logout.js:

import {GoogleLogout} from 'react-google-login';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function Logout() {
  const onSuccess = () => {
    console.log('Log out successfully!');
  };

  return (
    <div id='signOutButton'>
      <GoogleLogout
        clientId={clientId}
        buttonText={'Logout'}
        onLogoutSuccess={
    onSuccess}
      />
    </div>
  );
}

export default Logout;

Dies ist dasselbe wie eine Anmeldeseite. Wir haben Google Logout aus react-google-login importiert und eine Variable der Google-Client-ID erstellt.

Codebeispiel - App.js:

import {gapi} from 'gapi-script';
import {useEffect} from 'react';

import LoginButton from './components/login';
import LogoutButton from './components/logout';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function App() {
  useEffect(() => {
    function start() {
      gapi.client.init({
        clientId: clientId,
        scope: '',
      });
    }
    gapi.load('client:auth2', start);
  });

  return (
    <div className='App'>
      <LoginButton />
      <LogoutButton />
    </div>
  );
}

export default App;

In App.js haben wir unsere beiden Seiten gerendert, d. h. login.js und logout.js. Der obige Code zeigt, dass das Schlüsselwort gapi verwendet wird.

gapi ist eine Google-API-Client-Bibliothek für JavaScript, die dabei hilft, oauth2 in Reaktionsseiten zu laden.

gapi.load('client:auth2', start);

Es wird normalerweise aufgerufen, wenn die Seite geladen wird. Das Zeichen ":" wird verwendet, um mehrere Bibliotheken zu laden.

Es wird hier verwendet, um sowohl die Client- als auch die auth2-Bibliothek zu laden. Wenn Sie Code ausführen, sehen Sie etwa Folgendes.

Es gibt zwei Schaltflächen; Anmelden und Abmelden. Wenn Sie auf Login klicken, können Sie die bei Google angemeldete ID auswählen, und dann sehen Sie einige Informationen in der Konsole.

Wenn Sie auf Abmelden klicken, werden Sie entsprechend abgemeldet und sehen einige Informationen in der Konsole.

Auf diese Weise können wir die Google Oauth2-Autorisierung verwenden, um den Benutzer mit der Google Login/Logout-Schaltfläche in Reaktion zu authentifizieren.