Codemodell verwenden

Mit der Google Identity Services-Bibliothek können Nutzer eine Autorisierung anfordern von Google mit einem browserbasierten Pop-up- oder Weiterleitungs-UX-Flow. Dieses startet einen sicheren OAuth 2.0-Vorgang und führt zu einem Zugriffstoken für den Aufruf von Google APIs im Namen eines Nutzers verwenden.

Zusammenfassung des OAuth 2.0-Vorgangs mit Autorisierungscode:

• In einem Browser wird das Google-Konto durch eine Touch-Geste wie ein Klicken auf eine Schaltfläche der Inhaber einen Autorisierungscode von Google anfordert.
• Google antwortet und sendet einen eindeutigen Autorisierungscode an einen Rückruf in Ihre JavaScript-Webanwendung, die im Browser des Nutzers ausgeführt wird oder über eine Browserweiterleitung Ihren Autorisierungscode-Endpunkt an.
• Ihre Back-End-Plattform hostet einen Autorisierungscode-Endpunkt und empfängt den Code. Nach der Validierung wird dieser Code pro Nutzerzugriff und Aktualisierungstokens mithilfe einer Anfrage an den Tokenendpunkt von Google.
• Google validiert den Autorisierungscode und bestätigt, dass die Anfrage gesendet wurde von Ihrer sicheren Plattform abrufen, Zugriffs- und Aktualisierungs-Tokens ausstellen und den Tokens durch Aufrufen des von Ihrer Plattform gehosteten Anmeldeendpunkts.
• Ihr Anmeldeendpunkt erhält die Zugriffs- und Aktualisierungstokens, die sicher gespeichert werden. das Aktualisierungstoken zur späteren Verwendung.

Code-Client initialisieren

Mit der Methode google.accounts.oauth2.initCodeClient() wird ein Codeclient initialisiert.

Pop-up- oder Weiterleitungsmodus

Sie können einen Autorisierungscode über die Weiterleitung oder Ablauf für den Nutzer im Pop-up-Modus. Im Weiterleitungsmodus hosten Sie eine OAuth2-Autorisierung auf Ihrem Server und Google leitet den User-Agent an diesen Endpunkt weiter. den Autorisierungscode als URL-Parameter teilen. Für den Pop-up-Modus definieren Sie -Rückruf-Handler, der den Autorisierungscode an Ihren Server sendet. Pop-up-Modus können verwendet werden, um eine nahtlose User Experience zu bieten, ohne dass sich die Besucher Ihre Website verlassen.

So initialisieren Sie einen Client für:

• UX-Ablauf weiterleiten, ux_mode auf redirect setzen und den Wert von redirect_uri an den Autorisierungscode-Endpunkt Ihrer Plattform. Der Wert muss genau mit einem der autorisierten Weiterleitungs-URIs für OAuth 2.0 übereinstimmen. Client, den Sie in der API-Konsole konfiguriert haben. Außerdem müssen sie unseren Validierungsregeln für Weiterleitungs-URIs.

• UX-Flow für Pop-up-Fenster. Setzen Sie ux_mode auf popup und den Wert von callback auf die Name der Funktion, mit der Sie Autorisierungscodes an Ihren Plattform.

CSRF-Angriffe verhindern

Zur Verhinderung von CSRF-Angriffen (Cross-Site-Request-Forgery) sind etwas andere Änderungen erforderlich. die UX-Abläufe für die Weiterleitung und den Pop-up-Modus. Für Weiterleitung wird der OAuth 2.0-Parameter state verwendet. Siehe RFC6749, Abschnitt 10.12 Cross-Site Request Forgery finden Sie weitere Informationen zum Generieren und Validieren des Parameters state. Im Pop-up-Modus fügen Sie Ihren Anfragen einen benutzerdefinierten HTTP-Header hinzu. Bestätigen Sie dann auf Ihrem Server mit dem erwarteten Wert und Ursprung übereinstimmt.

Wählen Sie einen UX-Modus aus, um ein Code-Snippet aufzurufen, das den Autorisierungscode und die CSRF-Verarbeitung zeigt:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

OAuth 2.0-Codefluss auslösen

Rufen Sie die Methode requestCode() des Codeclients auf, um den Nutzerfluss auszulösen:

<button onclick="client.requestCode();">Authorize with Google</button>

Dazu muss sich der Nutzer in einem Google-Konto anmelden und der Freigabe zustimmen bevor Sie einen Autorisierungscode an Ihre Weiterleitungsendpunkt oder Ihren Callback-Handler.

Umgang mit Autorisierungscode

Google generiert einen für jeden Nutzer eindeutigen Autorisierungscode, den Sie erhalten und auf Ihrem Back-End-Server überprüfen.

Im Pop-up-Modus der in callback angegebene Handler, der im Browser, leitet den Autorisierungscode an einen von Ihrer Plattform gehosteten Endpunkt weiter.

Für den Weiterleitungsmodus wird eine GET-Anfrage an den durch redirect_url durch Freigabe des Autorisierungscodes im URL-Parameter code. Bis Autorisierungscode erhalten:

• Erstellen Sie einen neuen Autorisierungsendpunkt, wenn noch kein vorhanden ist. Implementierung oder

• Aktualisieren Sie den vorhandenen Endpunkt, damit er GET-Anfragen und eine URL akzeptiert. Parameter. Bisher war eine PUT-Anfrage mit dem Autorisierungscode-Wert in die Nutzlast verwendet wurde.

Autorisierungsendpunkt

Dein Autorisierungscode-Endpunkt muss GET-Anfragen mit dieser URL-Abfrage verarbeiten Stringparameter:

Beispiel für eine GET-Anfrage mit URL-Parametern an den Endpunkt auth-code und gehostet von example.com:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

Wenn der Vorgang mit Autorisierungscode von früheren JavaScript-Bibliotheken initiiert wird, oder durch direkte Aufrufe an Google OAuth 2.0-Endpunkte wird eine POST-Anfrage verwendet.

Beispiel für eine POST-Anfrage mit dem Autorisierungscode als Nutzlast im HTTP-Anfragetext:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

Die Anfrage validieren

Gehen Sie auf Ihrem Server folgendermaßen vor, um CSRF-Angriffe zu vermeiden.

Prüfen Sie den Wert des Parameters state für den Weiterleitungsmodus.

Bestätigen Sie, dass der X-Requested-With: XmlHttpRequest-Header für den Pop-up-Modus festgelegt ist.

Fordern Sie dann Aktualisierungs- und Zugriffstokens von Google an. wenn Sie die Authentifizierungscode-Anforderung zuerst erfolgreich bestätigt haben.

Zugriffs- und Aktualisierungstoken abrufen

Nachdem Ihre Backend-Plattform einen Autorisierungscode von Google und überprüft die Anfrage. Verwenden Sie den Autorisierungscode, um Zugriffs- und Aktualisierungstoken von API-Aufrufe durch Google auszuführen.

Folgen Sie der Anleitung ab Schritt 5: Autorisierungscode austauschen für Aktualisierungs- und Zugriffstokens im Artikel OAuth 2.0 für Webserver verwenden Anwendungsanleitung.

Tokens verwalten

Auf Ihrer Plattform werden Aktualisierungstokens sicher gespeichert. Gespeicherte Aktualisierungstokens löschen, wenn entfernt oder die Nutzereinwilligung widerrufen wird, google.accounts.oauth2.revoke oder direkt von https://myaccount.google.com/permissions.

Optional können Sie RISC in Betracht ziehen, um Nutzerkonten mit kontoübergreifenden Schutz:

Normalerweise ruft Ihre Back-End-Plattform Google APIs mit einem Zugriffstoken auf. Wenn ruft Ihre Webanwendung auch direkt Google APIs über den Browser des Nutzers auf, müssen Sie eine Möglichkeit implementieren, um das Zugriffstoken mit Ihrer Webanwendung zu teilen, ist in diesem Leitfaden nicht enthalten. Wenn Sie diesen Ansatz verfolgen und das Google API-Clientbibliothek für JavaScript gapi.client.SetToken() verwenden, um das Zugriffstoken vorübergehend im Browser zu speichern und die Bibliothek zum Aufrufen von Google APIs aktivieren.