OAuth 2.0: Nutzer bei Google authentifizieren

OAuth2 ist das Standardprotokoll der Branche für die Autorisierung. Es bietet Nutzern einen Mechanismus, um Web- und Desktopanwendungen Zugriff auf private Informationen zu gewähren, ohne ihren Nutzernamen, ihr Passwort und andere private Anmeldedaten weiterzugeben.

In diesem Tutorial wird eine Erweiterung erstellt, die mit der Google People API und der Chrome Identity API auf die Google-Kontakte eines Nutzers zugreift. Da Erweiterungen nicht über HTTPS geladen werden, keine Weiterleitungen ausführen und keine Cookies festlegen können, verwenden sie die Chrome Identity API, um OAuth2 zu nutzen.

Jetzt starten

Erstellen Sie zuerst ein Verzeichnis und die folgenden Startdateien.

manifest.json

Fügen Sie das Manifest hinzu, indem Sie eine Datei mit dem Namen manifest.json erstellen und den folgenden Code einfügen.

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 3,
  "action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

service-worker.js

Fügen Sie den Service Worker der Erweiterung hinzu, indem Sie eine Datei mit dem Namen service-worker.js erstellen und den folgenden Code einfügen.

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

index.html

Fügen Sie eine HTML-Datei mit dem Namen index.html hinzu und fügen Sie den folgenden Code ein.

<html>
  <head>
    <title>FriendBlock</title>
    <style>
      button {
        padding: 10px;
        background-color: #3C79F8;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <button>FriendBlock Contacts</button>
    <div id="friendDiv"></div>
  </body>
</html>

Einheitliche Erweiterungs-ID verwenden

Während der Entwicklung ist es wichtig, eine einheitliche ID zu verwenden. So behalten Sie eine einheitliche ID bei:

Erweiterung in das Entwickler-Dashboard hochladen

Packen Sie das Erweiterungsverzeichnis in eine .zip Datei und laden Sie es in das Chrome Developer Dashboard hoch, ohne es zu veröffentlichen:

Klicken Sie im Entwickler-Dashboard auf Neues Element hinzufügen.
Klicken Sie auf Dateien durchsuchen, wählen Sie die ZIP-Datei der Erweiterung aus und laden Sie sie hoch.
Wechseln Sie zum Tab Paket und klicken Sie auf Öffentlichen Schlüssel ansehen.

Schaltfläche „Öffentlichen Schlüssel ansehen“ auf dem Tab „Paket“

Wenn das Dialogfeld geöffnet ist, gehen Sie so vor:

Kopieren Sie den Code zwischen -----BEGIN PUBLIC KEY----- und -----END PUBLIC KEY-----.
Entfernen Sie die Zeilenumbrüche, damit der Code in einer einzigen Textzeile steht.

Fügen Sie den Code in der Datei manifest.json unter dem Feld "key" hinzu. So verwendet die Erweiterung dieselbe ID.

{ // manifest.json
  "manifest_version": 3,
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}

IDs vergleichen

Öffnen Sie die Seite „Erweiterungen verwalten“ unter chrome://extensions, prüfen Sie, ob der Entwicklermodus aktiviert ist, und laden Sie das entpackte Erweiterungsverzeichnis hoch. Vergleichen Sie die Erweiterungs-ID auf der Seite „Erweiterungen verwalten“ mit der Element-ID im Entwickler-Dashboard. Die IDs müssen übereinstimmen.

Die ID des Erweiterungsabgleichs

OAuth-Client-ID generieren

Jede Anwendung, die OAuth 2.0 verwendet, um auf Google APIs zuzugreifen, muss Autorisierungsanmeldedaten haben, mit denen die Anwendung auf dem OAuth 2.0-Server von Google identifiziert wird. 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 dieses Projekt aktiviert haben.

Rufen Sie zuerst die Google API Console auf, um ein neues Projekt zu erstellen, falls Sie noch keines haben. Folgen Sie dieser Anleitung, um einen OAuth-Client zu erstellen und eine Client-ID zu erhalten.

Rufen Sie die Seite „Clients“ auf.
1. Klicken Sie auf Client erstellen.
2. Wählen Sie den Anwendungstyp Chrome-Erweiterung aus.
3. Geben Sie einen Namen für den OAuth-Client ein. Dieser Name wird auf der Seite „ Clients “ Ihres Projekts angezeigt, um den Client zu identifizieren.
4. Geben Sie die Erweiterungs-ID in das Feld „Element-ID“ ein.
5. Klicken Sie auf Erstellen.

OAuth im Manifest registrieren

Fügen Sie das "oauth2" Feld in das Erweiterungsmanifest ein. Platzieren Sie die generierte OAuth-Client-ID unter "client_id". Um Zugriff auf die Kontoinformationen des Nutzers zu erhalten, müssen wir die relevanten "scope", "https://www.googleapis.com/auth/userinfo.email", anfordern.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":["https://www.googleapis.com/auth/userinfo.email"]
  },
  ...
}

Ersten OAuth-Ablauf initiieren

Registrieren Sie die identity Berechtigung im Manifest.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

Erstellen Sie eine Datei zur Verwaltung des OAuth-Ablaufs mit dem Namen oauth.js und fügen Sie den folgenden Code ein.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      console.log(token);
    });
  });
};

Platzieren Sie ein Skript-Tag für oauth.js im Head-Bereich von index.html.

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

Laden Sie die Erweiterung neu und klicken Sie auf das Browsersymbol, um index.html zu öffnen. Öffnen Sie die Konsole und klicken Sie auf die Schaltfläche „FriendBlock Contacts“. In der Konsole wird ein OAuth-Token angezeigt.

Token in der Console ansehen

Google People API aktivieren

Kehren Sie zur Google API Console zurück und wählen Sie in der Seitenleiste Bibliothek aus. Suchen Sie nach „Google People API“, klicken Sie auf das richtige Ergebnis und aktivieren Sie die API.

People API aktivieren

Fügen Sie die Google People API-Clientbibliothek in "scopes" im Erweiterungsmanifest hinzu.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/contacts.readonly"
    ]
  },
  ...
}

Kehren Sie zur Google API Console zurück und rufen Sie die Anmeldedaten auf. Klicken Sie auf „Anmeldedaten erstellen“ und wählen Sie im Drop-down-Menü „API-Schlüssel“ aus.

People API-Anmeldedaten erstellen

Bewahren Sie den generierten API-Schlüssel für die spätere Verwendung auf.

Erste API-Anfrage erstellen

Nachdem die Erweiterung die entsprechenden Berechtigungen und Anmeldedaten hat und einen Google-Nutzer autorisieren kann, kann sie Daten über die People API anfordern. Aktualisieren Sie den Code in oauth.js entsprechend dem unten stehenden Code.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data)
          });
    });
  });
};

Ersetzen Sie API_KEY durch den API-Schlüssel, der in der Google API Console generiert wurde. Die Erweiterung sollte ein JSON-Objekt protokollieren, das ein Array von people/account_ids im Feld memberResourceNames enthält.

Gesichter blockieren

Nachdem die Erweiterung eine Liste der Kontakte des Nutzers zurückgegeben hat, kann sie zusätzliche Anfragen stellen , um die Profile und Informationen dieser Kontakte abzurufen . Die Erweiterung verwendet memberResourceNames, um die Fotoinformationen der Nutzerkontakte abzurufen. Aktualisieren Sie oauth.js und fügen Sie den folgenden Code ein.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
          init)
          .then((response) => response.json())
          .then(function(data) {
            let photoDiv = document.querySelector('#friendDiv');
            let returnedContacts = data.memberResourceNames;
            for (let i = 0; i < returnedContacts.length; i++) {
              fetch(
                  'https://people.googleapis.com/v1/' + returnedContacts[i] +
                      '?personFields=photos&key=API_KEY',
                  init)
                  .then((response) => response.json())
                  .then(function(data) {
                    let profileImg = document.createElement('img');
                    profileImg.src = data.photos[0].url;
                    photoDiv.appendChild(profileImg);
                  });
            };
          });
    });
  });
};

Laden Sie die Erweiterung neu und kehren Sie zu ihr zurück. Klicken Sie auf die Schaltfläche „FriendBlock“ – fertig! Die Gesichter der Kontakte werden in einem Block angezeigt.

Kontaktflächen in einem Block

OAuth 2.0: Nutzer bei Google authentifizieren Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.