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
aufredirect
setzen und den Wert vonredirect_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
aufpopup
und den Wert voncallback
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:
Weiterleitungsmodus
Initialisieren Sie einen Client, über den Google den Browser des Nutzers zu Ihrem Authentifizierungsendpunkt, wobei der Autorisierungscode als URL-Parameter freigegeben wird.
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 und sendet sie an Ihren Server.
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 einePUT
-Anfrage mit dem Autorisierungscode-Wert in die Nutzlast verwendet wurde.
Autorisierungsendpunkt
Dein Autorisierungscode-Endpunkt muss GET
-Anfragen mit dieser URL-Abfrage verarbeiten
Stringparameter:
Name | Wert |
---|---|
Authuser | Anfrage zur Nutzeranmeldungsauthentifizierung |
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 |
Bundesstaat | CRSF-Statusvariable |
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.