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.
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
aufredirect
festlegen und den Wert vonredirect_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
aufpopup
und den Wert voncallback
auf den Namen der Funktion, mit der Sie Autorisierungscodes an Ihre Plattform senden möchten.
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 einePUT
-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
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.