Diese Seite wurde von der Cloud Translation API übersetzt.

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

OAuth2 ist das Standardprotokoll der Branche für die Autorisierung. Es bietet Nutzern einen Mechanismus, mit dem sie Web- und Desktopanwendungen Zugriff auf private Informationen gewähren können, ohne ihren Nutzernamen, ihr Passwort und andere private Anmeldedaten preiszugeben.

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

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 Dienst-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 einzelne ID beizubehalten. So sorgen Sie für eine einheitliche ID:

Erweiterung in das Entwickler-Dashboard hochladen

Verpacken Sie das Erweiterungsverzeichnis in einer .zip-Datei und laden Sie es ohne Veröffentlichung in das Chrome-Entwickler-Dashboard hoch:

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

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

Gehen Sie so vor:

Kopieren Sie den Code zwischen -----BEGIN PUBLIC KEY----- und -----END PUBLIC KEY-----.
Entfernen Sie die Zeilenumbrüche, damit nur eine Zeile Text übrig bleibt.

Fügen Sie den Code unter dem Feld "key" in manifest.json ein. 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 „Erweiterungsverwaltung“ 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 „Verwaltung von Erweiterungen“ mit der Artikel-ID im Entwickler-Dashboard. Sie sollten übereinstimmen.

Die ID der Übereinstimmung der Erweiterung

OAuth-Client-ID erstellen

Rufen Sie die Google API Console auf und erstellen Sie ein neues Projekt. Wählen Sie in der Seitenleiste Anmeldedaten aus, klicken Sie auf Anmeldedaten erstellen und wählen Sie OAuth-Client-ID aus.

Anmeldedaten für die Erweiterung erstellen

Wählen Sie auf der Seite „Client-ID erstellen“ die Option Chrome-Erweiterung aus. Geben Sie den Namen der Erweiterung ein und fügen Sie die Erweiterungs-ID am Ende der URL in das Feld „App-ID“ ein.

Informationen zur Erweiterung eingeben

Klicken Sie abschließend auf „Erstellen“. Die Console stellt eine OAuth-Client-ID bereit.

OAuth im Manifest registrieren

Fügen Sie das Feld "oauth2" in das Manifest der Erweiterung ein. Fügen Sie die generierte OAuth-Client-ID unter "client_id" ein. Fügen Sie "scopes" vorerst einen leeren String hinzu.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":[""]
  },
  ...
}

Ersten OAuth-Vorgang starten

Registrieren Sie die Berechtigung identity im Manifest.

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

Erstellen Sie eine Datei namens oauth.js, um den OAuth-Vorgang zu verwalten, 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);
    });
  });
};

Fügen Sie ein Script-Tag für oauth.js in den Head von index.html ein.

...
  <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 Console und klicken Sie auf die Schaltfläche „FriendBlock Contacts“. In der Console 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 Library (Bibliothek) aus. Suchen Sie nach „Google People API“, klicken Sie auf das richtige Ergebnis und aktivieren Sie es.

People API aktivieren

Fügen Sie die Clientbibliothek der Google People API "scopes" im Manifest der Erweiterung 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 gehen Sie zu den Anmeldedaten. Klicken Sie auf „Anmeldedaten erstellen“ und wählen Sie im Drop-down-Menü „API-Schlüssel“ aus.

Anmeldedaten für die People API erstellen

Bewahren Sie den generierten API-Schlüssel für später auf.

Erste API-Anfrage erstellen

Da die Erweiterung jetzt über die richtigen Berechtigungen und Anmeldedaten verfügt und einen Google-Nutzer autorisieren kann, kann sie Daten über die People API anfordern. Aktualisieren Sie den Code in oauth.js so, dass er mit dem unten stehenden Code übereinstimmt.

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 in der Google API Console generierten API-Schlüssel. Die Erweiterung sollte ein JSON-Objekt protokollieren, das im Feld memberResourceNames ein Array von people/account_ids enthält.

Gesichter ausschließen

Da die Erweiterung jetzt eine Liste der Kontakte des Nutzers zurückgibt, kann sie zusätzliche Anfragen senden, um die Profile und Informationen dieser Kontakte abzurufen . Die Erweiterung verwendet die memberResourceNames, um die Bildinformationen der Nutzerkontakte abzurufen. Aktualisieren Sie oauth.js, um den folgenden Code einzufügen.

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 Seite neu und kehren Sie zur Erweiterung zurück. Klicke auf die Schaltfläche „Freund blockieren“ und schon ist es geschafft. Die Gesichter der Kontakte in einem Block anzeigen lassen

Kontaktansichten 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.