Codemodell verwenden

Mit der Google Identity Services-Bibliothek können Nutzer einen Autorisierungscode von Google über ein browserbasiertes Pop-up oder einen Workflow für die Weiterleitung an den Nutzer anfordern. Dadurch wird ein sicherer OAuth 2.0-Vorgang gestartet und ein Zugriffstoken generiert, mit dem Google APIs im Namen eines Nutzers aufgerufen werden.

Zusammenfassung des OAuth 2.0-Autorisierungscodes:

• In einem Browser fordert der Inhaber des Google-Kontos durch eine Geste wie das Klicken auf eine Schaltfläche einen Autorisierungscode von Google an.
• Google antwortet und sendet einen eindeutigen Autorisierungscode an einen Callback in der JavaScript-Webanwendung, der im Browser des Nutzers ausgeführt wird, oder ruft den Endpunkt des Autorisierungscodes direkt über eine Browserweiterleitung auf.
• Ihre Back-End-Plattform hostet einen Autorisierungscode-Endpunkt und empfängt den Code. Nach der Validierung wird dieser Code über eine Anfrage an den Token-Endpunkt von Google gegen Zugriffs- und Aktualisierungstokens ausgetauscht.
• Google validiert den Autorisierungscode, bestätigt die Anfrage von Ihrer sicheren Plattform, gibt Zugriffs- und Aktualisierungstokens aus und gibt die Tokens zurück, indem der von Ihrer Plattform gehostete Anmeldeendpunkt aufgerufen wird.
• Der Anmeldeendpunkt empfängt die Zugriffs- und Aktualisierungstokens und speichert das Aktualisierungstoken für die spätere Verwendung sicher.

Wichtiger Hinweis: Auf Ihrem Back-End-Server tauschen Sie einen Autorisierungscode gegen Aktualisierungs- und Zugriffstokens aus, indem Sie den Token-Endpunkt von Google aufrufen.

Codeclient initialisieren

Die Methode google.accounts.oauth2.initCodeClient() initialisiert einen Codeclient.

Pop-up- oder Weiterleitungsmodus

Sie können einen Autorisierungscode entweder im Weiterleitungsmodus oder im Popup-Modus freigeben. Im Weiterleitungsmodus hosten Sie einen OAuth2-Autorisierungsendpunkt auf Ihrem Server. Google leitet den User-Agent an diesen Endpunkt weiter und teilt den Autorisierungscode als URL-Parameter. Für den Pop-up-Modus definieren Sie einen JavaScript-Callback-Handler, der den Autorisierungscode an Ihren Server sendet. Der Pop-up-Modus bietet eine nahtlose Nutzererfahrung, ohne dass Besucher Ihre Website verlassen müssen.

So initialisieren Sie einen Client für:

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

• Pop-up-UX-Vorgang, setzen Sie ux_mode auf popup und den Wert von callback auf den Namen der Funktion, mit der Sie Autorisierungscodes an Ihre Plattform senden möchten.

Wichtiger Hinweis :Für ein optimales Gleichgewicht zwischen Nutzerfreundlichkeit und Sicherheit wird der UX-Vorgang im Pop-up-Modus mit Autorisierungscode-Modell empfohlen.

CSRF-Angriffe verhindern

Um Cross-Site-Request-Forgery-Angriffe (CSRF) zu verhindern, werden für die UX-Abläufe im Weiterleitungs- und Pop-up-Modus geringfügig unterschiedliche Techniken eingesetzt. Für den Weiterleitungsmodus wird der OAuth 2.0-Parameter state verwendet. Weitere Informationen zum Generieren und Validieren des Parameters state finden Sie unter RFC6749, Abschnitt 10.12 Cross-Site Request Forgery. Im Pop-up-Modus fügen Sie Ihren Anfragen einen benutzerdefinierten HTTP-Header hinzu und bestätigen dann auf Ihrem Server, dass er mit dem erwarteten Wert und Ursprung übereinstimmt.

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

Weiterleitungsmodus

Initialisieren Sie einen Client, bei dem Google den Browser des Nutzers an Ihren Authentifizierungsendpunkt weiterleitet. Dabei geben Sie den Authentifizierungscode als URL-Parameter frei.

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"
});

Pop-up-Modus

Initialisieren Sie einen Client, bei dem der Browser des Nutzers einen Autorisierungscode von Google empfängt und an Ihren Server sendet.

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>

In diesem Fall muss sich der Nutzer in einem Google-Konto anmelden und der Freigabe einzelner Bereiche zustimmen, bevor ein Autorisierungscode an Ihren Weiterleitungsendpunkt oder Ihren Callback-Handler zurückgegeben wird.

Umgang mit Autorisierungscodes

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

Im Pop-up-Modus leitet der von callback angegebene Handler, der im Browser des Nutzers ausgeführt wird, den Autorisierungscode an einen Endpunkt weiter, der von Ihrer Plattform gehostet wird.

Im Weiterleitungsmodus wird eine GET-Anfrage an den in redirect_url angegebenen Endpunkt gesendet. Dabei wird der Autorisierungscode im URL-Parameter code verwendet. So erhalten Sie den Autorisierungscode:

• Erstellen Sie einen neuen Autorisierungsendpunkt, wenn Sie noch keine Implementierung haben.

• Aktualisieren Sie den vorhandenen Endpunkt, damit er GET-Anfragen und URL-Parameter akzeptiert. Zuvor wurde eine PUT-Anfrage mit dem Autorisierungscodewert in der Nutzlast verwendet.

Autorisierungsendpunkt

Der Endpunkt des Autorisierungscodes muss GET-Anfragen mit den folgenden URL-Abfragestringparametern verarbeiten:

Name	Wert
authuser	Authentifizierung für die Nutzeranmeldung anfordern
Code	Ein von Google generierter OAuth2-Autorisierungscode
HD	Die gehostete Domain des Nutzerkontos
Prompt	Dialogfeld zur Nutzereinwilligung
Bereich	Durch Leerzeichen getrennte Liste eines oder mehrerer zu autorisierender OAuth2-Bereiche
state	CRSF-Zustandsvariable

Beispiel für eine GET-Anfrage mit URL-Parametern an einen Endpunkt namens auth-code, der von example.com gehostet wird:

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 oder durch direkte Aufrufe von Google OAuth 2.0-Endpunkten initiiert wird, wird eine POST-Anfrage verwendet.

Beispiel für eine POST-Anfrage, die den Autorisierungscode als Nutzlast im HTTP-Anfragetext enthält:

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

Wichtig: Bisher wurde POST für Anfragen verwendet. Aktualisieren Sie Ihren Handler so, dass sowohl GET- als auch POST-Anfragen akzeptiert werden. Alternativ können Sie zwei verschiedene Endpunkte hosten, wenn Sie weiterhin ältere JS-Bibliotheken verwenden oder Google OAuth 2.0-Endpunkte direkt aufrufen möchten, während Sie die Google Identity Services-Bibliothek verwenden.

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.

Sie sollten dann nur dann Aktualisierungs- und Zugriffstokens von Google anfordern, wenn Sie die Anfrage mit dem Autorisierungscode erfolgreich bestätigt haben.

Zugriffs- und Aktualisierungstokens abrufen

Nachdem Ihre Back-End-Plattform einen Autorisierungscode von Google erhalten und die Anfrage überprüft hat, verwenden Sie den Autorisierungscode, um Zugriffs- und Aktualisierungstokens von Google zu erhalten und API-Aufrufe durchzuführen.

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

Tokens verwalten

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

Optional können Sie das RISC in Betracht ziehen, um Nutzerkonten mit dem kontoübergreifenden Schutz zu schützen.

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