OAuth 2.0 für clientseitige Webanwendungen

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 Auf diesen Endpunkt kann über HTTPS zugegriffen werden. Einfache HTTP-Verbindungen werden abgelehnt.

Der Google-Autorisierungsserver unterstützt die folgenden Abfragestringparameter für das Web Serveranwendungen:

Beispiel für eine Weiterleitung zum Autorisierungsserver von Google

Im Folgenden sehen Sie eine Beispiel-URL mit Zeilenumbrüchen und Leerzeichen zur besseren Lesbarkeit.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 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 verwenden, ohne die Google APIs-Clientbibliothek für JavaScript zu verwenden. Da dieser OAuth 2.0-Endpunkt unterstützt Cross-Origin Resource Sharing (CORS) nicht, das Snippet erstellt ein 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/drive.metadata.readonly',
                '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();
}

OAuth 2.0-Endpunkte

Der OAuth 2.0-Server sendet eine Antwort an die redirect_uri, die in deinem Zugriffs-Token-Anforderung

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 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_token enthält der Fragmentstring auch enthält den Parameter token_type, der immer auf Bearer und dem Parameter expires_in, der die Lebensdauer des Tokens in Sekunden. Wenn der Parameter state angegeben wurde in der Zugriffstokenanfrage enthält, ist sein Wert ebenfalls 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, die Anfragen Lesezugriff auf Metadaten für Dateien in Google Drive:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

Nach Abschluss des OAuth 2.0-Vorgangs werden Sie weitergeleitet zu http://localhost/oauth2callback Diese URL liefert ein 404 NOT FOUND-Fehler, es sei denn, Ihr lokaler Computer stellt zufällig eine Datei bereit diese Adresse. Im nächsten Schritt erhalten Sie weitere Details zu den im URI, wenn der Nutzer zu Ihrer Anwendung zurückgeleitet wird.

OAuth 2.0-Endpunkte

Nachdem Ihre Anwendung ein Zugriffstoken erhalten hat, können Sie mit diesem Token Aufrufe an eine Google API für eine bestimmte Nutzerkonto, wenn die von der API erforderlichen Zugriffsbereiche gewährt wurden. Fügen Sie dazu Das Zugriffstoken in einer Anfrage an die API durch Einfügen einer access_token-Abfrage oder einen Bearer-Wert für den Authorization-HTTP-Header. Wenn möglich, der HTTP-Header ist zu bevorzugen, da Abfragezeichenfolgen in Serverprotokollen in der Regel sichtbar sind. In den meisten können Sie Aufrufe von Google APIs mithilfe einer Clientbibliothek einrichten (z. B. Drive Files API aufrufen.

Sie können alle Google APIs ausprobieren und ihre Bereiche auf der OAuth 2.0 Playground.

Beispiele für HTTP GET

Ein Aufruf an die <ph type="x-smartling-placeholder"></ph> drive.files. (die Drive Files API) über Authorization: Bearer-HTTP könnte wie folgt aussehen. Beachten Sie, dass Sie Ihr eigenes Zugriffstoken angeben müssen:

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Hier ist ein Aufruf derselben API für den authentifizierten Nutzer mithilfe der access_token Abfragestringparameter:

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

Beispiele für curl

Sie können diese Befehle mit der curl-Befehlszeilenanwendung testen. Hier ist ein Beispiel mit HTTP-Header-Option (bevorzugt):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

Alternativ können Sie die Parameteroption für den Abfragestring verwenden:

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

JavaScript-Beispielcode

Das Code-Snippet unten zeigt, wie CORS (Cross-Origin Resource Sharing) zum Senden eines an eine Google API senden. In diesem Beispiel wird nicht die Google APIs-Clientbibliothek für JavaScript verwendet. Aber auch wenn Sie die Clientbibliothek nicht verwenden, CORS-Supportleitfaden in der Dokumentation der Bibliothek ist wahrscheinlich hilfreich. um diese Anfragen besser zu verstehen.

In diesem Code-Snippet steht die Variable access_token für das Token, Zugriff erhalten, um im Namen des autorisierten Nutzers API-Anfragen zu stellen. Das vollständige Beispiel zeigt, wie Sie dieses Token im lokalen Speicher des Browsers speichern und abrufen. wenn Sie eine API-Anfrage stellen.

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/drive/v3/about?fields=user&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

OAuth 2.0-Endpunkte

Dieses Codebeispiel zeigt, wie der OAuth 2.0-Vorgang in JavaScript ausgeführt wird, ohne den Google APIs-Clientbibliothek für JavaScript Der Code ist für eine HTML-Seite bestimmt, die eine Schaltfläche versuchen Sie es mit einer API-Anfrage. Wenn Sie auf die Schaltfläche klicken, prüft der Code, ob auf der Seite ein API-Zugriffstoken im lokalen Speicher Ihres Browsers. 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:

1. Sie leitet den Nutzer zum OAuth 2.0-Server von Google weiter, der Zugriff auf den https://www.googleapis.com/auth/drive.metadata.readonly Bereich.
2. Nachdem der Nutzer Zugriff auf einen oder mehrere angeforderte Bereiche gewährt (oder verweigert) hat, wird er an folgende URL weitergeleitet: Die Originalseite, die das Zugriffstoken aus dem String der Fragment-ID analysiert.

3. Auf der Seite wird das Zugriffstoken verwendet, um die Beispiel-API-Anfrage zu erstellen.

   In der API-Anfrage wird die about.get-Methode der Drive API aufgerufen, um Informationen zum Google Drive-Konto des autorisierten Nutzers.

4. Wenn die Anfrage erfolgreich ausgeführt wird, wird die API-Antwort im Debugging-Tool des Browsers protokolliert. .

Du kannst den Zugriff auf die App über die Berechtigungen für Ihr Google-Konto. 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 YOUR_CLIENT_ID und YOUR_REDIRECT_URI Variablen, die Ihrem Anmeldedaten für die Autorisierung Variable YOUR_REDIRECT_URI sollte dieselbe URL haben, unter der die Seite bereitgestellt wird. Der Wert muss genau einem der folgenden Werte entsprechen: Die autorisierten Weiterleitungs-URIs für den OAuth 2.0-Client, die Sie im API Console Credentials pageWenn stimmt dieser Wert mit keinem autorisierten URI überein, erhalten Sie den Fehler redirect_uri_mismatch. Fehler. Ihr Projekt muss außerdem die entsprechende API für diese Anfrage aktiviert haben.

<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/drive/v3/about?fields=user&' +
          '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/drive.metadata.readonly',
                  '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>

OAuth 2.0-Endpunkte

Fügen Sie einen include_granted_scopes ein, um einem vorhandenen Zugriffstoken Bereiche hinzuzufügen. in Ihrer Anfrage an den OAuth 2.0-Server von Google.

Das folgende Code-Snippet zeigt, wie dies funktioniert. Das Snippet geht davon aus, dass Sie Die Bereiche, für die Ihr Zugriffstoken im lokalen Speicher des Browsers gültig ist. Der Parameter vollständiger Beispielcode speichert eine Liste von Bereichen, für die das Zugriffstoken ist gültig, indem die Eigenschaft oauth2-test-params.scope im lokalen Browser storage.)

Mit dem Snippet werden die Bereiche, für die das Zugriffstoken gültig ist, mit dem Bereich verglichen, den Sie verwenden möchten für eine bestimmte Suchanfrage. Wenn das Zugriffstoken diesen Bereich nicht abdeckt, wird der OAuth 2.0-Vorgang gestartet. Hier ist die Funktion oauth2SignIn die gleiche wie die in Schritt 2 (und dieser wird später im vollständigen Beispiel)

var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
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.
}

OAuth 2.0-Endpunkte

Zum programmatischen Widerrufen eines Tokens sendet Ihre Anwendung eine Anfrage an https://oauth2.googleapis.com/revoke und enthält das Token als Parameter:

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. Handelt es sich bei dem Token um ein Zugriffstoken mit einem entsprechendes Aktualisierungstoken, 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 mit einem Fehlercode.

Das folgende JavaScript-Snippet zeigt, wie ein Token in JavaScript widerrufen wird, ohne die Methode Google APIs-Clientbibliothek für JavaScript Da der OAuth 2.0-Endpunkt von Google zum Widerrufen der wird Cross-Origin Resource Sharing (CORS) nicht unterstützt, mit dem Code wird ein Formular erstellt und an den Endpunkt zu senden, anstatt die Methode XMLHttpRequest() zu verwenden,

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