Mit der JavaScript-Bibliothek von google.accounts.oauth2
können Sie Nutzer auffordern,
Einwilligung erteilen und ein Zugriffstoken für die Arbeit mit Nutzerdaten einholen. Sie basiert auf dem
OAuth 2.0-Vorgang für implizite Gewährung, der es Ihnen ermöglicht, entweder Google
APIs direkt mit REST und CORS verwenden oder unsere Google APIs-Clientbibliothek für
JavaScript (gapi.client
) für einfachen und flexiblen Zugriff auf unsere
und komplexere APIs.
Bevor über einen Browser auf geschützte Nutzerdaten zugegriffen wird, lösen Nutzer auf Ihrer Website einen Trigger aus die webbasierte Kontoauswahl von Google, Anmelde- und Einwilligungsverfahren sowie Die OAuth-Server von Google geben ein Zugriffstoken aus und geben es an Ihre Webanwendung zurück.
Beim tokenbasierten Autorisierungsmodell ist keine Speicherung pro Nutzer erforderlich. Aktualisierungstokens auf Ihrem Backend-Server.
Wir empfehlen, den hier beschriebenen Ansatz zu verwenden, Techniken, die in der älteren Version von OAuth 2.0 für clientseitige Webanwendungen behandelt wurden .
Einrichtung
Suchen oder erstellen Sie eine Client-ID, indem Sie den Schritten unter Ihre
Leitfaden zur Google API-Client-ID Als Nächstes fügen Sie den Seiten die Clientbibliothek hinzu.
auf Ihrer Website, die Google APIs aufruft. Initialisieren Sie abschließend das Token
Client. In der Regel erfolgt dies im onload
-Handler der Clientbibliothek.
Tokenclient initialisieren
initTokenClient()
aufrufen, um einen neuen Tokenclient mit dem der Webanwendung zu initialisieren
Client-ID. Optional können Sie eine Liste mit einem oder mehreren Bereichen einfügen, auf die der Nutzer
benötigt Zugriff auf:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
...
},
});
OAuth 2.0-Token-Vorgang auslösen
Verwenden Sie die Methode requestAccessToken()
, um den UX-Ablauf für Tokens auszulösen und ein
ein Zugriffstoken hinzufügen. Google bittet den Nutzer, Folgendes zu tun:
- Wählen Sie das Konto aus,
- im Google-Konto anmelden, wenn Sie nicht bereits angemeldet sind,
- Erteilen Sie die Einwilligung für Ihre Webanwendung, um auf jeden angeforderten Bereich zuzugreifen.
Eine Nutzergeste löst den Tokenfluss aus: <button onclick="client.requestAccessToken();">Authorize me</button>
Google gibt dann eine TokenResponse
zurück, die ein Zugriffstoken und eine Liste von
Bereiche, denen der Nutzer Zugriff gewährt hat, oder ein Fehler für Ihren Callback-Handler.
Nutzer können die Kontoauswahl oder die Anmeldefenster schließen. In diesem Fall wird Ihr Callback-Funktion nicht aufgerufen.
Umgang mit der Einwilligung
Das Design und die Nutzererfahrung für Ihre App sollten erst nach einer Lesen Sie die OAuth 2.0-Richtlinien von Google sorgfältig durch. Diese Richtlinien beziehen sich auf mit mehreren Bereichen arbeiten, wann und wie mit der Nutzereinwilligung umgegangen wird und vieles mehr.
Die inkrementelle Autorisierung ist eine Methode für das Richtlinien- und App-Design, Zugriff auf Ressourcen mithilfe von Bereichen nur bei Bedarf und nicht im Voraus anfordern und alles auf einmal. Nutzer können die Freigabe der einzelnen Ressourcen genehmigen oder ablehnen. von Ihrer App angefordert wird, wird dies als detaillierte Berechtigungen bezeichnet.
Während dieses Vorgangs fordert Google die Nutzereinwilligung für die einzelnen den angeforderten Bereich, Nutzer wählen die Ressourcen aus, die für Ihre App freigegeben werden sollen, und Schließlich ruft Google Ihre Callback-Funktion auf, um ein Zugriffstoken zurückzugeben und genehmigten Umfang. Ihre App verarbeitet dann die verschiedenen Ergebnisse sicher mit detaillierten Berechtigungen möglich.
Inkrementelle Autorisierung
Bei Web-Apps zeigen die folgenden beiden allgemeinen Szenarien inkrementelle Autorisierung über:
- Eine einseitige Ajax-App, die häufig
XMLHttpRequest
mit dynamischem Zugriff auf Ressourcen. - Mehrere Webseiten, Ressourcen werden getrennt und pro Seite verwaltet.
Diese beiden Szenarien werden präsentiert, um Designüberlegungen zu veranschaulichen und nicht als umfassende Empfehlungen dazu gedacht sind, um Einwilligung in Ihre App zu integrieren. Reale Apps können eine Variation oder ein Kombination dieser Techniken.
Ajax
Deiner App durch mehrere Aufrufe Unterstützung für inkrementelle Autorisierung hinzufügen
requestAccessToken()
mit dem Parameter des OverridableTokenClientConfig
-Objekts
scope
, um einzelne Bereiche anzufordern, wenn sie benötigt werden, und
wenn es notwendig ist. In diesem Beispiel werden Ressourcen angefordert und sichtbar
nachdem ein minimierter Inhaltsbereich durch eine Nutzergeste maximiert wurde.
Ajax App |
---|
Initialisieren Sie den Tokenclient beim Seitenaufbau:
const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", }); Dokumente zum LesenZuletzt verwendete Dokumente anzeigen client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/documents.readonly' }) ); Anstehende VeranstaltungenKalenderinformationen anzeigen client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/calendar.readonly' }) ); FotokarussellFotos anzeigen client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/photoslibrary.readonly' }) ); |
Jeder Aufruf von requestAccessToken
löst eine Nutzereinwilligung aus.
Sie dürfen nur auf die Ressourcen zugreifen, die für den Bereich erforderlich sind, den der Nutzer auswählt.
erweitern, wodurch die Ressourcenfreigabe durch die Auswahlmöglichkeiten der Nutzer eingeschränkt wird.
Mehrere Webseiten
Beim Design für inkrementelle Autorisierung werden mehrere Seiten verwendet, um nur in den Bereichen, die zum Laden einer Seite erforderlich sind. Führen Sie mehrere Aufrufe durch, um die Nutzereinwilligung einzuholen und ein Zugriffstoken abzurufen.
Mehrseitige App | ||||||||
---|---|---|---|---|---|---|---|---|
|
Jede Seite fordert den erforderlichen Bereich an und ruft ein Zugriffstoken ab, indem sie Folgendes aufruft:
initTokenClient()
und requestAccessToken()
bei der Ladezeit. In diesem Szenario
einzelne Webseiten verwendet werden, um die Funktionen und
Ressourcen nach Bereich. In der Praxis kann für einzelne Seiten
mehrere verwandte Umfänge.
Detaillierte Berechtigungen
Detaillierte Berechtigungen werden in allen Szenarien auf die gleiche Weise gehandhabt. nachher
requestAccessToken()
ruft Ihre Callback-Funktion und ein Zugriffstoken auf
prüfen Sie, ob der Nutzer die angeforderten Bereiche
hasGrantedAllScopes()
oder hasGrantedAnyScope()
. Beispiel:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/documents.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
'https://www.googleapis.com/auth/photoslibrary.readonly')) {
// Look at pictures
...
}
if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
'https://www.googleapis.com/auth/calendar.readonly',
'https://www.googleapis.com/auth/documents.readonly')) {
// Meeting planning and review documents
...
}
}
},
});
Alle zuvor angenommenen Erteilungen aus vorherigen Sitzungen oder Anfragen werden ebenfalls
die in der Antwort enthalten sind. Die Nutzereinwilligung wird pro Nutzer aufgezeichnet und
Client-ID und bleibt über mehrere Aufrufe von initTokenClient()
oder
requestAccessToken()
. Standardmäßig ist die Nutzereinwilligung nur in der
wenn ein Nutzer Ihre Website besucht und einen neuen Umfang anfordert,
bei jedem Seitenaufbau mit prompt=consent
in Tokenclient-Konfigurationsobjekten.
Mit Tokens arbeiten
Im Token-Modell wird kein Zugriffstoken vom Betriebssystem oder Browser gespeichert.
wird beim Laden der Seite oder durch Auslösen eines
requestAccessToken()
durch eine Nutzergeste, z. B. das Drücken einer Schaltfläche, aufrufen.
REST und CORS mit Google APIs verwenden
Ein Zugriffstoken kann für authentifizierte Anfragen an Google APIs mithilfe von REST und CORS. Dadurch können sich Nutzer anmelden, ihre Einwilligung erteilen und Google ein Zugriffs-Token und Ihre Website, um mit den Daten des Nutzers zu arbeiten.
In diesem Beispiel können Sie sich mithilfe des
von tokenRequest()
zurückgegebenes Zugriffstoken:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();
Weitere Informationen finden Sie unter CORS für den Zugriff auf Google APIs verwenden.
Im nächsten Abschnitt erfahren Sie, wie sich komplexere APIs einfach integrieren lassen.
Mit der JavaScript-Bibliothek der Google APIs arbeiten
Der Token-Client funktioniert mit der Google API-Clientbibliothek für JavaScript. Unten sehen Sie das Code-Snippet.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
gapi.client.setApiKey('YOUR_API_KEY');
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
},
});
function listUpcomingEvents() {
gapi.client.calendar.events.list(...);
}
Ablauf des Tokens
Zugriffstokens haben grundsätzlich nur eine kurze Lebensdauer. Wenn das Zugriffstoken abläuft
vor dem Ende der Nutzersitzung ein neues Token erhalten, indem Sie folgenden Befehl aufrufen:
requestAccessToken()
über ein nutzergesteuertes Ereignis wie das Drücken einer Schaltfläche.
Einwilligung mithilfe eines Zugriffstokens widerrufen
Rufen Sie die Methode google.accounts.oauth2.revoke
auf, um die Nutzereinwilligung zu entfernen.
Zugriff auf Ressourcen für alle Bereiche, die Ihrer Anwendung gewährt wurden. Ein gültiger Zugriff
Zum Widerruf dieser Berechtigung ist ein Token erforderlich:
google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
console.log(done);
console.log(done.successful);
console.log(done.error);
console.log(done.error_description);
});