In diesem Dokument wird erläutert, wie du die OAuth 2.0-Autorisierung für den Zugriff auf die YouTube Data API über eine JavaScript-Webanwendung implementierst. Mit OAuth 2.0 können Nutzer bestimmte Daten für eine Anwendung freigeben, während ihre Nutzernamen, Passwörter und andere Informationen privat bleiben. Beispielsweise kann eine Anwendung OAuth 2.0 verwenden, um die Berechtigung zum Hochladen von Videos auf den YouTube-Kanal eines Nutzers zu erhalten.
Dieser OAuth 2.0-Vorgang wird als impliziter Gewährungsvorgang bezeichnet. Sie ist für Anwendungen vorgesehen, die nur auf APIs zugreifen, während sich der Nutzer in der Anwendung befindet. Diese Anwendungen können keine vertraulichen Informationen speichern.
Bei diesem Ablauf öffnet Ihre Anwendung eine Google-URL, die mithilfe von Suchparametern Ihre Anwendung und die Art des API-Zugriffs, die sie benötigt, identifiziert. Sie können die URL im aktuellen Browserfenster oder in einem Pop-up-Fenster öffnen. Der Nutzer kann sich bei Google authentifizieren und die angeforderten Berechtigungen erteilen. Google leitet den Nutzer dann zurück zu deiner App. Die Weiterleitung enthält ein Zugriffstoken, das von deiner App überprüft und dann für API-Anfragen verwendet wird.
Google APIs-Clientbibliothek und Google Identity Services
Wenn du die Google API-Clientbibliothek für JavaScript verwendest, um autorisierte Aufrufe an Google durchzuführen, solltest du die JavaScript-Bibliothek der Google Identity Services verwenden, um den OAuth 2.0-Vorgang zu verarbeiten. Weitere Informationen finden Sie im Tokenmodell der Google-Identitätsdienste, das auf dem impliziten OAuth 2.0-Zustimmungsvorgang basiert.
Voraussetzungen
Die APIs für Ihr Projekt aktivieren
Jede Anwendung, die Google APIs aufruft, muss diese APIs im API Consoleaktivieren.
So aktivieren Sie eine API für Ihr Projekt:
- Open the API Library in Google API Console.
- If prompted, select a project, or create a new one.
- Auf der Seite Bibliothek kannst du die YouTube Data API finden und aktivieren. Suchen Sie alle anderen APIs, die Ihre Anwendung verwendet, und aktivieren Sie diese ebenfalls.
Anmeldedaten für die Autorisierung erstellen
Jede Anwendung, die OAuth 2.0 für den Zugriff auf Google APIs verwendet, benötigt Autorisierungsanmeldedaten, die die Anwendung beim OAuth 2.0-Server von Google identifizieren. In den folgenden Schritten wird erläutert, wie Sie Anmeldedaten für Ihr Projekt erstellen. Ihre Anwendungen können dann mit den Anmeldedaten auf APIs zugreifen, die Sie für das Projekt aktiviert haben.
- Go to the Credentials page.
- Klicken Sie auf Anmeldedaten erstellen > OAuth-Client-ID.
- Wählen Sie den Anwendungstyp Webanwendung aus.
- Füllen Sie es aus. Anwendungen, die JavaScript für autorisierte Google API-Anfragen verwenden, müssen autorisierte JavaScript-Quellen angeben. Die Ursprünge geben die Domains an, von denen deine Anwendung Anfragen an den OAuth 2.0-Server senden kann. Diese Quellen müssen den Validierungsregeln von Google entsprechen.
Zugriffsbereiche identifizieren
Mit Bereichen kann Ihre Anwendung nur Zugriff auf die benötigten Ressourcen anfordern und Nutzer können gleichzeitig den Umfang des Zugriffs steuern, den sie Ihrer Anwendung gewähren. Daher kann eine umgekehrte Beziehung zwischen der Anzahl der angeforderten Bereiche und der Wahrscheinlichkeit, die Nutzereinwilligung einzuholen, bestehen.
Bevor Sie mit der Implementierung der OAuth 2.0-Autorisierung beginnen, sollten Sie die Bereiche identifizieren, auf die Ihre Anwendung eine Zugriffsberechtigung benötigt.
Für Version 3 der YouTube Data API werden die folgenden Umfänge verwendet:
| Sucher | |
|---|---|
| https://www.googleapis.com/auth/youtube | YouTube-Konto verwalten |
| https://www.googleapis.com/auth/youtube.channel-memberships.creator | Eine Liste der aktuell aktiven Mitglieder des Kanals, ihre Stufe und ihr Eintrittsdatum abrufen |
| https://www.googleapis.com/auth/youtube.force-ssl | Ihre YouTube-Videos, -Bewertungen, -Kommentare und -Untertitel ansehen, bearbeiten oder dauerhaft löschen |
| https://www.googleapis.com/auth/youtube.readonly | YouTube-Konto abrufen |
| https://www.googleapis.com/auth/youtube.upload | YouTube-Videos verwalten |
| https://www.googleapis.com/auth/youtubepartner | Ihre Inhalte und zugehörigen Content bei YouTube abrufen und verwalten |
| https://www.googleapis.com/auth/youtubepartner-channel-audit | Private Informationen aus dem YouTube-Kanal abrufen, die während des Prüfprozesses durch einen YouTube-Partner relevant sind |
Das Dokument OAuth 2.0 API-Bereiche enthält eine vollständige Liste der Bereiche, die Sie für den Zugriff auf Google APIs verwenden können.
OAuth 2.0-Zugriffstokens abrufen
Die folgenden Schritte zeigen, wie deine Anwendung mit dem OAuth 2.0-Server von Google interagiert, um die Einwilligung eines Nutzers einzuholen, eine API-Anfrage im Namen des Nutzers auszuführen. Ihre Anwendung muss diese Einwilligung haben, bevor sie eine Google API-Anfrage ausführen kann, die eine Nutzerautorisierung erfordert.
Schritt 1: Weiterleitung zum OAuth 2.0-Server von Google
Um die Berechtigung für den Zugriff auf die Daten eines Nutzers anzufordern, leite den Nutzer zum OAuth 2.0-Server von Google weiter.
OAuth 2.0-Endpunkte
Generiere eine URL, um den Zugriff vom OAuth 2.0-Endpunkt von Google unter https://accounts.google.com/o/oauth2/v2/auth anzufordern. Auf diesen Endpunkt kann über HTTPS zugegriffen werden. Einfache HTTP-Verbindungen werden abgelehnt.
Der Google-Autorisierungsserver unterstützt die folgenden Abfragestringparameter für Webserveranwendungen:
| Parameter | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
client_id |
Erforderlich
Die Client-ID für Ihre Anwendung. Sie finden diesen Wert in der API Console- Credentials page. |
||||||||||||||||
redirect_uri |
Erforderlich
Legt fest, wohin der API-Server den Nutzer weiterleitet, nachdem er den Autorisierungsvorgang abgeschlossen hat. Der Wert muss genau mit einem der autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client übereinstimmen, die du in der API Console- Credentials pagedes Clients konfiguriert hast. Wenn dieser Wert mit keinem autorisierten Weiterleitungs-URI für die angegebene Das Schema |
||||||||||||||||
response_type |
Erforderlich
In JavaScript-Anwendungen muss der Wert des Parameters auf |
||||||||||||||||
scope |
Erforderlich
Eine durch Leerzeichen getrennte Liste von Bereichen, die die Ressourcen identifizieren, auf die Ihre Anwendung im Namen des Nutzers zugreifen könnte. Diese Werte bilden die Grundlage für den Zustimmungsbildschirm, den Google dem Nutzer anzeigt. Mit Bereichen kann Ihre Anwendung nur Zugriff auf die benötigten Ressourcen anfordern und Nutzer können gleichzeitig den Umfang des Zugriffs steuern, den sie Ihrer Anwendung gewähren. Daher besteht eine umgekehrte Beziehung zwischen der Anzahl der angeforderten Bereiche und der Wahrscheinlichkeit, die Nutzereinwilligung einzuholen. Für Version 3 der YouTube Data API werden die folgenden Umfänge verwendet:
Das Dokument OAuth 2.0 API-Bereiche enthält eine vollständige Liste der Bereiche, die Sie für den Zugriff auf Google APIs verwenden können. Wir empfehlen, dass Ihre Anwendung Zugriff auf Autorisierungsbereiche wann immer möglich im Kontext anfordert. Wenn Sie den Zugriff auf Nutzerdaten im Kontext über eine inkrementelle Autorisierung anfordern, helfen Sie Nutzern, leichter zu verstehen, warum Ihre Anwendung den angeforderten Zugriff benötigt. |
||||||||||||||||
state |
Empfohlen
Gibt einen beliebigen Stringwert an, mit dem Ihre Anwendung den Status zwischen Ihrer Autorisierungsanfrage und der Antwort des Autorisierungsservers aufrechterhält.
Der Server gibt genau den Wert zurück, den du als Sie können diesen Parameter für verschiedene Zwecke verwenden, z. B. um den Nutzer zur richtigen Ressource in Ihrer Anwendung weiterzuleiten, Nonces zu senden und websiteübergreifende Anfragefälschungen zu minimieren. Da Ihr |
||||||||||||||||
include_granted_scopes |
Optional
Anwendungen können die inkrementelle Autorisierung verwenden, um Zugriff auf zusätzliche Bereiche im Kontext anzufordern. Wenn Sie den Wert dieses Parameters auf |
||||||||||||||||
enable_granular_consent |
Optional
Die Standardeinstellung ist Wenn Google detaillierte Berechtigungen für eine Anwendung aktiviert, hat dieser Parameter keine Wirkung mehr. |
||||||||||||||||
login_hint |
Optional
Wenn Ihre Anwendung weiß, welcher Nutzer sich authentifizieren möchte, kann sie mit diesem Parameter einen Hinweis für den Google-Authentifizierungsserver bereitstellen. Der Server verwendet den Hinweis, um den Anmeldevorgang zu vereinfachen. Dazu wird entweder das E-Mail-Feld im Anmeldeformular vorab ausgefüllt oder die entsprechende Mehrfachanmeldungssitzung ausgewählt. Legen Sie als Parameterwert eine E-Mail-Adresse oder eine |
||||||||||||||||
prompt |
Optional
Eine durch Leerzeichen getrennte Liste von Eingabeaufforderungen, die dem Nutzer angezeigt werden. Beachten Sie dabei die Groß- und Kleinschreibung. Wenn Sie diesen Parameter nicht angeben, wird der Nutzer nur dann aufgefordert, wenn Ihr Projekt den Zugriff anfordert. Weitere Informationen finden Sie unter Aufforderung zur erneuten Einwilligung. Folgende Werte sind möglich:
|
||||||||||||||||
Beispiel für eine Weiterleitung zum Autorisierungsserver von Google
Mit der folgenden Beispiel-URL wird der Offlinezugriff (access_type=offline) auf einen Bereich angefordert, der den Zugriff zum Ansehen des YouTube-Kontos des Nutzers ermöglicht. Mithilfe der inkrementellen Autorisierung wird sichergestellt, dass das neue Zugriffstoken alle Bereiche abdeckt, auf die der Nutzer zuvor der Anwendung Zugriff gewährt hat. Mit der URL werden auch Werte für die erforderlichen Parameter redirect_uri, response_type und client_id sowie für den Parameter state festgelegt. Die URL enthält zur besseren Lesbarkeit Zeilenumbrüche und Leerzeichen.
https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
include_granted_scopes=true&
state=state_parameter_passthrough_value&
redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
response_type=token&
client_id=client_id
Nachdem Sie die Anfrage-URL erstellt haben, leiten Sie den Nutzer dorthin weiter.
JavaScript-Beispielcode
Das folgende JavaScript-Snippet zeigt, wie der Autorisierungsvorgang in JavaScript gestartet wird, ohne die Google APIs-Clientbibliothek für JavaScript zu verwenden. Da dieser OAuth 2.0-Endpunkt Cross-Origin Resource Sharing (CORS) nicht unterstützt, erstellt das Snippet ein Formular, das die Anfrage an diesen Endpunkt öffnet.
/*
* Create form to request access token from Google's OAuth 2.0 server.
*/
function oauthSignIn() {
// Google's OAuth 2.0 endpoint for requesting an access token
var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
// Create <form> element to submit parameters to OAuth 2.0 endpoint.
var form = document.createElement('form');
form.setAttribute('method', 'GET'); // Send as a GET request.
form.setAttribute('action', oauth2Endpoint);
// Parameters to pass to OAuth 2.0 endpoint.
var params = {'client_id': 'YOUR_CLIENT_ID',
'redirect_uri': 'YOUR_REDIRECT_URI',
'response_type': 'token',
'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
'include_granted_scopes': 'true',
'state': 'pass-through value'};
// Add form parameters as hidden input values.
for (var p in params) {
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', p);
input.setAttribute('value', params[p]);
form.appendChild(input);
}
// Add form to page and submit it to open the OAuth 2.0 endpoint.
document.body.appendChild(form);
form.submit();
}
Schritt 2: Google fordert den Nutzer zur Einwilligung auf
In diesem Schritt entscheidet der Nutzer, ob er Ihrer Anwendung den angeforderten Zugriff gewähren möchte. In dieser Phase zeigt Google ein Einwilligungsfenster mit dem Namen Ihrer Anwendung und den Google API-Diensten an, für die die Berechtigung mit den Autorisierungsanmeldedaten des Nutzers angefordert wird. Außerdem wird eine Zusammenfassung der Zugriffsbereiche angezeigt, die gewährt werden sollen. Der Nutzer kann dann zustimmen, Zugriff auf einen oder mehrere Bereiche zu gewähren, die von Ihrer Anwendung angefordert werden, oder die Anfrage ablehnen.
Deine Anwendung muss in dieser Phase nichts weiter tun, da sie auf die Antwort vom OAuth 2.0-Server von Google wartet, die angibt, ob ein Zugriff gewährt wurde. Diese Antwort wird im folgenden Schritt erklärt.
Fehler
Bei Anfragen an den OAuth 2.0-Autorisierungsendpunkt von Google werden möglicherweise nutzerseitige Fehlermeldungen anstelle der erwarteten Authentifizierungs- und Autorisierungsabläufe angezeigt. Häufige Fehlercodes und Lösungsvorschläge sind unten aufgeführt.
admin_policy_enforced
Mindestens ein Bereich kann aufgrund der Richtlinien seines Google Workspace-Administrators nicht mit dem Google-Konto autorisiert werden. Im Hilfeartikel Zugriff externer und interner Apps auf Google Workspace-Daten steuern finden Sie weitere Informationen dazu, wie ein Administrator den Zugriff auf alle Bereiche oder auf vertrauliche und eingeschränkte Bereiche einschränken kann, bis der Zugriff auf Ihre OAuth-Client-ID explizit gewährt wird.
disallowed_useragent
Der Autorisierungsendpunkt wird in einem eingebetteten User-Agent angezeigt, der gemäß den OAuth 2.0-Richtlinien von Google unzulässig ist.
Android
Android-Entwicklern kann diese Fehlermeldung angezeigt werden, wenn sie Autorisierungsanfragen in android.webkit.WebView öffnen.
Entwickler sollten stattdessen Android-Bibliotheken wie Google Log-in for Android oder AppAuth for Android der OpenID Foundation verwenden.
Bei Webentwicklern kann dieser Fehler auftreten, wenn eine Android-App einen allgemeinen Weblink in einem eingebetteten User-Agent öffnet und ein Nutzer von deiner Website zum OAuth 2.0-Autorisierungsendpunkt von Google navigiert. Entwickler sollten das Öffnen allgemeiner Links im Standard-Link-Handler des Betriebssystems zulassen. Dazu gehören sowohl Handler für Android-App-Links als auch die Standard-Browser-App. Eine unterstützte Option ist auch die Bibliothek mit benutzerdefinierten Android-Tabs.
iOS
Bei iOS- und macOS-Entwicklern kann dieser Fehler auftreten, wenn sie Autorisierungsanfragen in WKWebView öffnen.
Entwickler sollten stattdessen iOS-Bibliotheken wie Google Log-in für iOS oder AppAuth für iOS von OpenID Foundation verwenden.
Bei Webentwicklern kann dieser Fehler auftreten, wenn eine iOS- oder macOS-App einen allgemeinen Weblink in einem eingebetteten User-Agent öffnet und ein Nutzer von deiner Website zum OAuth 2.0-Autorisierungsendpunkt von Google wechselt. Entwickler sollten das Öffnen allgemeiner Links im Standard-Link-Handler des Betriebssystems zulassen. Dieser umfasst sowohl universelle Links-Handler als auch die Standard-Browser-App. Eine unterstützte Option ist auch die SFSafariViewController-Bibliothek.
org_internal
Die OAuth-Client-ID in der Anfrage ist Teil eines Projekts, das den Zugriff auf Google-Konten in einer bestimmten Google Cloud-Organisation einschränkt. Weitere Informationen zu dieser Konfigurationsoption finden Sie im Hilfeartikel "OAuth-Zustimmungsbildschirm einrichten" im Abschnitt Nutzertyp.
invalid_client
Der Ursprung, von dem die Anfrage gesendet wurde, ist für diesen Client nicht autorisiert. Weitere Informationen finden Sie unter origin_mismatch.
invalid_grant
Bei Verwendung der inkrementellen Autorisierung ist das Token möglicherweise abgelaufen oder ungültig. Authentifizieren Sie den Nutzer noch einmal und bitten Sie um seine Einwilligung, um neue Tokens zu erhalten. Wenn dieser Fehler weiterhin auftritt, prüfen Sie, ob Ihre Anwendung richtig konfiguriert wurde und Sie die richtigen Tokens und Parameter in Ihrer Anfrage verwenden. Andernfalls wurde das Nutzerkonto möglicherweise gelöscht oder deaktiviert.
origin_mismatch
Das Schema, die Domain und/oder der Port des JavaScript-Codes, von dem die Autorisierungsanfrage stammt, stimmen möglicherweise nicht mit einem autorisierten JavaScript-Ursprungs-URI überein, der für die OAuth-Client-ID registriert ist. Prüfen Sie die autorisierten JavaScript-Quellen in der Google API Console Credentials page.
redirect_uri_mismatch
Der in der Autorisierungsanfrage übergebene redirect_uri stimmt mit keinem autorisierten Weiterleitungs-URI für die OAuth-Client-ID überein. Prüfen Sie autorisierte Weiterleitungs-URIs in Google API Console Credentials page.
Das Schema, die Domain und/oder der Port des JavaScript-Codes, von dem die Autorisierungsanfrage stammt, stimmen möglicherweise nicht mit einem autorisierten JavaScript-Ursprungs-URI überein, der für die OAuth-Client-ID registriert ist. Überprüfe die autorisierten JavaScript-Quellen in Google API Console Credentials page.
Der Parameter redirect_uri kann sich auf den OAuth-Out-of-Band-Vorgang (OOB) beziehen, der eingestellt wurde und nicht mehr unterstützt wird. Informationen dazu, wie du deine Integration aktualisierst, findest du in der Migrationsanleitung.
invalid_request
Mit deiner Anfrage ist ein Fehler aufgetreten. Dafür kann es mehrere Gründe geben:
- Die Anfrage war nicht richtig formatiert
- In der Anfrage fehlen erforderliche Parameter
- In der Anfrage wird eine Autorisierungsmethode verwendet, die von Google nicht unterstützt wird. Prüfen, ob Ihre OAuth-Integration eine empfohlene Integrationsmethode verwendet
Schritt 3: Die Antwort des OAuth 2.0-Servers verarbeiten
OAuth 2.0-Endpunkte
Der OAuth 2.0-Server sendet eine Antwort an die in der Zugriffstokenanfrage angegebene redirect_uri.
Wenn der Nutzer die Anfrage genehmigt, enthält die Antwort ein Zugriffstoken. Wenn der Nutzer die Anfrage nicht genehmigt, enthält die Antwort eine Fehlermeldung. Das Zugriffstoken oder die Fehlermeldung wird im Hash-Fragment des Weiterleitungs-URI wie unten dargestellt zurückgegeben:
Eine Zugriffstoken-Antwort:
https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600
Zusätzlich zum Parameter
access_tokenenthält der Fragmentstring auch den Parametertoken_type, der immer aufBearerfestgelegt ist, und den Parameterexpires_in, der die Lebensdauer des Tokens in Sekunden angibt. Wenn der Parameterstatein der Zugriffstokenanfrage angegeben wurde, ist sein Wert auch in der Antwort enthalten.- Eine Fehlerantwort:
https://oauth2.example.com/callback#error=access_denied
Beispiel für eine OAuth 2.0-Serverantwort
Sie können diesen Vorgang testen, indem Sie auf die folgende Beispiel-URL klicken. Diese fordert Lesezugriff auf Metadaten für Dateien in Ihrem Google Drive-Konto an:
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly& include_granted_scopes=true& state=state_parameter_passthrough_value& redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback& response_type=token& client_id=client_id
Nach Abschluss des OAuth 2.0-Vorgangs werden Sie zu http://localhost/oauth2callback weitergeleitet. Diese URL gibt den Fehler 404 NOT FOUND zurück, es sei denn, Ihr lokaler Computer stellt eine Datei unter dieser Adresse bereit. Im nächsten Schritt werden weitere Informationen zu den Informationen bereitgestellt, die im URI zurückgegeben werden, wenn der Nutzer zu Ihrer Anwendung zurückgeleitet wird.
Google APIs aufrufen
OAuth 2.0-Endpunkte
Nachdem Ihre Anwendung ein Zugriffstoken abgerufen hat, können Sie mit dem Token im Namen eines bestimmten Nutzerkontos eine Google API aufrufen, wenn die für die API erforderlichen Zugriffsbereiche gewährt wurden. Fügen Sie dazu das Zugriffstoken in eine Anfrage an die API ein, indem Sie entweder einen access_token-Abfrageparameter oder einen Authorization-HTTP-Header-Bearer-Wert angeben. Nach Möglichkeit ist der HTTP-Header zu empfehlen, da Abfragestrings in der Regel in Serverlogs sichtbar sind. In den meisten Fällen kannst du Aufrufe von Google APIs mithilfe einer Clientbibliothek einrichten (z. B. beim Aufrufen der YouTube Data API).
Die YouTube Data API unterstützt nur Dienstkonten für YouTube-Rechteinhaber, die mehrere YouTube-Kanäle wie Labels und Filmstudios besitzen und verwalten.
Im OAuth 2.0 Playground können Sie alle Google APIs ausprobieren und ihre Bereiche ansehen.
Beispiele für HTTP GET
Ein Aufruf des
youtube.channels-Endpunkts (die YouTube Data API) über den HTTP-Header Authorization: Bearer könnte so aussehen: Beachten Sie, dass Sie Ihr eigenes Zugriffstoken angeben müssen:
GET /youtube/v3/channels?part=snippet&mine=true HTTP/1.1 Host: www.googleapis.com Authorization: Bearer access_token
Hier sehen Sie einen Aufruf derselben API für den authentifizierten Nutzer mit dem Abfragestringparameter access_token:
GET https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true
Beispiele für curl
Sie können diese Befehle mit der curl-Befehlszeilenanwendung testen. Hier ein Beispiel, in dem die HTTP-Header-Option verwendet wird (bevorzugt):
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true
Alternativ können Sie die Parameteroption für den Abfragestring verwenden:
curl https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true
JavaScript-Beispielcode
Das folgende Code-Snippet zeigt, wie CORS (Cross-Origin Resource Sharing) verwendet wird, um eine Anfrage an eine Google API zu senden. In diesem Beispiel wird nicht die Google APIs-Clientbibliothek für JavaScript verwendet. Auch wenn Sie die Clientbibliothek nicht verwenden, hilft Ihnen wahrscheinlich der CORS-Supportleitfaden in der Dokumentation der Bibliothek dabei, diese Anfragen besser zu verstehen.
In diesem Code-Snippet steht die Variable access_token für das Token, das Sie erhalten haben, um im Namen des autorisierten Nutzers API-Anfragen zu senden. Das vollständige Beispiel zeigt, wie dieses Token im lokalen Speicher des Browsers gespeichert und bei einer API-Anfrage abgerufen wird.
var xhr = new XMLHttpRequest();
xhr.open('GET',
'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
console.log(xhr.response);
};
xhr.send(null);
Vollständiges Beispiel
OAuth 2.0-Endpunkte
In diesem Codebeispiel wird gezeigt, wie der OAuth 2.0-Vorgang in JavaScript ausgeführt wird, ohne die Google APIs-Clientbibliothek für JavaScript zu verwenden. Der Code ist für eine HTML-Seite bestimmt, auf der eine Schaltfläche zum Ausführen einer API-Anfrage angezeigt wird. Wenn Sie auf die Schaltfläche klicken, prüft der Code, ob die Seite ein API-Zugriffstoken im lokalen Speicher Ihres Browsers gespeichert hat. Falls ja, wird die API-Anfrage ausgeführt. Andernfalls wird der OAuth 2.0-Vorgang initiiert.
Für den OAuth 2.0-Vorgang sind auf der Seite die folgenden Schritte auszuführen:
- Sie leitet den Nutzer zum OAuth 2.0-Server von Google weiter, der Zugriff auf den Bereich
https://www.googleapis.com/auth/youtube.force-sslanfordert. - Nachdem der Nutzer Zugriff auf einen oder mehrere angeforderte Bereiche gewährt oder verweigert hat, wird er zur ursprünglichen Seite weitergeleitet, die das Zugriffstoken aus dem String der Fragment-ID parst.
Auf der Seite wird das Zugriffstoken verwendet, um die Beispiel-API-Anfrage zu senden.
Diese API-Anfrage ruft die Methode
channels.listder YouTube Data API auf, um Daten zum YouTube-Kanal des autorisierten Nutzers abzurufen.- Wenn die Anfrage erfolgreich ausgeführt wird, wird die API-Antwort in der Debugging-Konsole des Browsers protokolliert.
Du kannst den Zugriff auf die App auf der Seite Berechtigungen für dein Google-Konto widerrufen. Die Anwendung wird als OAuth 2.0-Demo für Google API-Dokumente aufgeführt.
Wenn Sie diesen Code lokal ausführen möchten, müssen Sie Werte für die Variablen YOUR_CLIENT_ID und YOUR_REDIRECT_URI festlegen, die Ihren Anmeldedaten für die Autorisierung entsprechen. Die Variable YOUR_REDIRECT_URI sollte auf dieselbe URL festgelegt werden, unter der die Seite angezeigt wird. Der Wert muss genau mit einem der autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client übereinstimmen, die du in API Console Credentials pagekonfiguriert hast. Wenn dieser Wert mit keinem autorisierten URI übereinstimmt, erhalten Sie den Fehler redirect_uri_mismatch. Im Projekt muss außerdem die entsprechende API für diese Anfrage aktiviert sein.
<html><head></head><body>
<script>
var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
// Parse query string to see if page request is coming from OAuth 2.0 server.
var fragmentString = location.hash.substring(1);
var params = {};
var regex = /([^&=]+)=([^&]*)/g, m;
while (m = regex.exec(fragmentString)) {
params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
if (Object.keys(params).length > 0 && params['state']) {
if (params['state'] == localStorage.getItem('state')) {
localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
trySampleRequest();
} else {
console.log('State mismatch. Possible CSRF attack');
}
}
// Function to generate a random state value
function generateCryptoRandomState() {
const randomValues = new Uint32Array(2);
window.crypto.getRandomValues(randomValues);
// Encode as UTF-8
const utf8Encoder = new TextEncoder();
const utf8Array = utf8Encoder.encode(
String.fromCharCode.apply(null, randomValues)
);
// Base64 encode the UTF-8 data
return btoa(String.fromCharCode.apply(null, utf8Array))
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=+$/, '');
}
// If there's an access token, try an API request.
// Otherwise, start OAuth 2.0 flow.
function trySampleRequest() {
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
if (params && params['access_token']) {
var xhr = new XMLHttpRequest();
xhr.open('GET',
'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.response);
} else if (xhr.readyState === 4 && xhr.status === 401) {
// Token invalid, so prompt for user permission.
oauth2SignIn();
}
};
xhr.send(null);
} else {
oauth2SignIn();
}
}
/*
* Create form to request access token from Google's OAuth 2.0 server.
*/
function oauth2SignIn() {
// create random state value and store in local storage
var state = generateCryptoRandomState();
localStorage.setItem('state', state);
// Google's OAuth 2.0 endpoint for requesting an access token
var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
// Create element to open OAuth 2.0 endpoint in new window.
var form = document.createElement('form');
form.setAttribute('method', 'GET'); // Send as a GET request.
form.setAttribute('action', oauth2Endpoint);
// Parameters to pass to OAuth 2.0 endpoint.
var params = {'client_id': YOUR_CLIENT_ID,
'redirect_uri': YOUR_REDIRECT_URI,
'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
'state': state,
'include_granted_scopes': 'true',
'response_type': 'token'};
// Add form parameters as hidden input values.
for (var p in params) {
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', p);
input.setAttribute('value', params[p]);
form.appendChild(input);
}
// Add form to page and submit it to open the OAuth 2.0 endpoint.
document.body.appendChild(form);
form.submit();
}
</script>
<button onclick="trySampleRequest();">Try sample request</button>
</body></html>
Regeln für die Validierung der JavaScript-Ursprung
Google wendet die folgenden Validierungsregeln auf JavaScript-Quellen an, um Entwickler beim Schutz ihrer Anwendungen zu unterstützen. Ihre JavaScript-Quellen müssen diesen Regeln entsprechen. Die Definition von Domain, Host und Schema finden Sie in Abschnitt 3 von RFC 3986.
| Validierungsregeln | |
|---|---|
| Schema |
JavaScript-Quellen müssen das HTTPS-Schema und nicht einfaches HTTP verwenden. Localhost-URIs (einschließlich Localhost-IP-Adress-URIs) sind von dieser Regel ausgenommen. |
| Organisator |
Hosts dürfen keine unformatierten IP-Adressen sein. Localhost-IP-Adressen sind von dieser Regel ausgenommen. |
| Domain |
“googleusercontent.com” sein.goo.gl) enthalten, es sei denn, die Domain ist der Anwendung. |
| Nutzerinformationen |
JavaScript-Quellen dürfen die Unterkomponente „Nutzerinformationen“ nicht enthalten. |
| Pfad |
JavaScript-Quellen dürfen die Pfadkomponente nicht enthalten. |
| Abfrage |
JavaScript-Quellen dürfen die Abfragekomponente nicht enthalten. |
| Fragment |
JavaScript-Quellen dürfen die Fragmentkomponente nicht enthalten. |
| Zeichen |
JavaScript-Quellen dürfen folgende Zeichen nicht enthalten:
|
Inkrementelle Autorisierung
Im OAuth 2.0-Protokoll fordert Ihre Anwendung die Autorisierung für den Zugriff auf Ressourcen an, die durch Bereiche gekennzeichnet sind. Es hat sich bewährt, die Autorisierung für Ressourcen anzufordern, wenn Sie diese benötigen. Dazu unterstützt der Autorisierungsserver von Google die inkrementelle Autorisierung. Mit dieser Funktion können Sie Bereiche nach Bedarf anfordern. Wenn der Nutzer die Berechtigung für den neuen Bereich erteilt, wird ein Autorisierungscode zurückgegeben, der gegen ein Token ausgetauscht werden kann, das alle Bereiche enthält, die der Nutzer dem Projekt gewährt hat.
Angenommen, eine App hilft Nutzern, interessante lokale Ereignisse zu identifizieren. Mit der App können sich Nutzer Videos zu den Ereignissen ansehen, sie bewerten und Playlists zu Playlists hinzufügen. Nutzer können die App auch verwenden, um ihren Google-Kalendern Termine hinzuzufügen.
In diesem Fall benötigt die Anwendung zum Zeitpunkt der Anmeldung möglicherweise keinen Zugriff auf Bereiche und fordert auch keinen Zugriff darauf an. Wenn der Nutzer jedoch ein Video bewerten, einer Playlist ein Video hinzufügen oder eine andere YouTube-Aktion ausführen wollte, könnte die App Zugriff auf den Bereich https://www.googleapis.com/auth/youtube.force-ssl anfordern.
Entsprechend könnte die Anwendung Zugriff auf den Bereich https://www.googleapis.com/auth/calendar anfordern, wenn der Nutzer versucht, einen Kalendertermin hinzuzufügen.
Die folgenden Regeln gelten für ein Zugriffstoken, das über eine inkrementelle Autorisierung abgerufen wird:
- Das Token kann für den Zugriff auf Ressourcen verwendet werden, die einem der Bereiche entsprechen, die in die neue kombinierte Autorisierung gerollt werden.
- Wenn Sie das Aktualisierungstoken für die kombinierte Autorisierung verwenden, um ein Zugriffstoken abzurufen, stellt das Zugriffstoken die kombinierte Autorisierung dar und kann für jeden der in der Antwort enthaltenen
scope-Werte verwendet werden. - Die kombinierte Autorisierung umfasst alle Bereiche, die der Nutzer dem API-Projekt gewährt hat, auch wenn die Berechtigungen von verschiedenen Clients angefordert wurden. Wenn ein Nutzer beispielsweise über den Desktopclient einer Anwendung Zugriff auf einen Bereich und dann über einen mobilen Client einem anderen Bereich gewährt hat, umfasst die kombinierte Autorisierung beide Bereiche.
- Wenn Sie ein Token widerrufen, das eine kombinierte Autorisierung darstellt, wird gleichzeitig der Zugriff auf alle Bereiche dieser Autorisierung im Namen des zugehörigen Nutzers widerrufen.
Die folgenden Codebeispiele zeigen, wie Sie einem vorhandenen Zugriffstoken Bereiche hinzufügen. So muss deine App nicht mehrere Zugriffstokens verwalten.
OAuth 2.0-Endpunkte
In diesem Beispiel fordert die aufrufende Anwendung zusätzlich zu jedem anderen Zugriff, den der Nutzer der Anwendung bereits gewährt hat, den Zugriff zum Abrufen der YouTube Analytics-Daten des Nutzers an.
Wenn Sie einem vorhandenen Zugriffstoken Bereiche hinzufügen möchten, fügen Sie den Parameter include_granted_scopes in Ihre Anfrage an den OAuth 2.0-Server von Google ein.
Das folgende Code-Snippet zeigt, wie dies funktioniert. Bei diesem Snippet wird davon ausgegangen, dass Sie die Bereiche, für die das Zugriffstoken gültig ist, im lokalen Speicher des Browsers gespeichert haben. Im vollständigen Beispielcode wird eine Liste der Bereiche gespeichert, für die das Zugriffstoken gültig ist. Dazu wird das Attribut oauth2-test-params.scope im lokalen Speicher des Browsers festgelegt.
Das Snippet vergleicht die Bereiche, für die das Zugriffstoken gültig ist, mit dem Bereich, den Sie für eine bestimmte Abfrage verwenden möchten. Wenn das Zugriffstoken diesen Bereich nicht abdeckt, wird der OAuth 2.0-Vorgang gestartet.
Hier entspricht die Funktion oauth2SignIn der Funktion, die in Schritt 2 angegeben wurde und später im vollständigen Beispiel bereitgestellt wird.
var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
var scopes = params['scope'].split(' ');
for (var s = 0; s < scopes.length; s++) {
if (SCOPE == scopes[s]) {
current_scope_granted = true;
}
}
}
if (!current_scope_granted) {
oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
// Since you already have access, you can proceed with the API request.
}
Token widerrufen
In einigen Fällen möchte ein Nutzer den Zugriff auf eine Anwendung widerrufen. Nutzer können den Zugriff in den Kontoeinstellungen widerrufen. Weitere Informationen finden Sie im Supportdokument zu Websites und Apps von Drittanbietern mit Zugriff auf Ihr Konto im Abschnitt Zugriff auf Websites oder Apps entfernen.
Es ist auch möglich, den Zugriff einer Anwendung programmatisch zu widerrufen. Der programmatische Widerruf ist in Fällen wichtig, in denen ein Nutzer das Abo beendet oder eine Anwendung entfernt oder sich die für eine Anwendung erforderlichen API-Ressourcen erheblich geändert haben. Mit anderen Worten: Ein Teil des Entfernungsprozesses kann eine API-Anfrage umfassen, mit der sichergestellt wird, dass die der Anwendung zuvor gewährten Berechtigungen entfernt werden.
OAuth 2.0-Endpunkte
Wenn Sie ein Token programmatisch widerrufen möchten, stellt Ihre Anwendung eine Anfrage an https://oauth2.googleapis.com/revoke und fügt das Token als Parameter ein:
curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
https://oauth2.googleapis.com/revoke?token={token}
Das Token kann ein Zugriffstoken oder ein Aktualisierungstoken sein. Wenn das Token ein Zugriffstoken ist und ein entsprechendes Aktualisierungstoken hat, wird auch das Aktualisierungstoken widerrufen.
Wenn der Widerruf erfolgreich verarbeitet wurde, lautet der HTTP-Statuscode der Antwort 200. Bei Fehlerbedingungen wird der HTTP-Statuscode 400 zusammen mit einem Fehlercode zurückgegeben.
Das folgende JavaScript-Snippet zeigt, wie ein Token in JavaScript widerrufen wird, ohne die Google APIs-Clientbibliothek für JavaScript zu verwenden. Da der OAuth 2.0-Endpunkt von Google zum Widerrufen von Tokens Cross-Origin Resource Sharing (CORS) nicht unterstützt, wird mit dem Code ein Formular erstellt und an den Endpunkt gesendet. Es wird also nicht die Methode XMLHttpRequest() verwendet, um die Anfrage zu senden.
function revokeAccess(accessToken) {
// Google's OAuth 2.0 endpoint for revoking access tokens.
var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';
// Create <form> element to use to POST data to the OAuth 2.0 endpoint.
var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', revokeTokenEndpoint);
// Add access token to the form so it is set as value of 'token' parameter.
// This corresponds to the sample curl request, where the URL is:
// https://oauth2.googleapis.com/revoke?token={token}
var tokenField = document.createElement('input');
tokenField.setAttribute('type', 'hidden');
tokenField.setAttribute('name', 'token');
tokenField.setAttribute('value', accessToken);
form.appendChild(tokenField);
// Add form to page and submit it to actually revoke the token.
document.body.appendChild(form);
form.submit();
}