OAuth 2.0: Nutzer bei Google authentifizieren

OAuth2 ist das branchenübliche Protokoll für die Autorisierung. Sie bietet Nutzern einen Mechanismus um Web- und Desktop-Anwendungen Zugriff auf private Informationen zu gewähren, ohne dass ihr Nutzername weitergegeben wird, Passwort und andere private Anmeldedaten.

In dieser Anleitung wird eine Erweiterung erstellt, die auf die Google-Kontakte eines Nutzers mithilfe der Funktion Google People API und die Chrome Identity API. Da Erweiterungen nicht über HTTPS, keine Leistung oder Cookies setzen, benötigen sie für die Verwendung von OAuth2 die Chrome Identity API.

Erste Schritte

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 Erweiterungs-Service-Worker hinzu, indem Sie eine Datei namens service-worker.js erstellen, die den folgenden Code enthält.

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

index.html

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

<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

Die Beibehaltung einer einzelnen ID ist während der Entwicklung wichtig. Gehen Sie so vor, um eine einheitliche ID beizubehalten:

Erweiterung in das Entwickler-Dashboard hochladen

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

  1. Klicken Sie im Entwickler-Dashboard auf Neuen Artikel hinzufügen.
  2. Klicken Sie auf Dateien suchen, wählen Sie die ZIP-Datei der Erweiterung aus und laden Sie sie hoch.
  3. Gehen Sie zum Tab Paket und klicken Sie auf Öffentlichen Schlüssel anzeigen.

Tab „Paket“ im Entwickler-Dashboard

Wenn das Pop-up geöffnet ist, gehen Sie so vor:

  1. Kopieren Sie den Code zwischen -----BEGIN PUBLIC KEY----- und -----END PUBLIC KEY-----.
  2. Entfernen Sie die Zeilenumbrüche, um daraus eine einzelne Textzeile zu machen.

Pop-up für öffentlichen Schlüssel

Fügen Sie den Code in das Feld manifest.json unter dem Feld "key" 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 unter chrome://extensions die Seite zur Verwaltung von Erweiterungen und prüfen Sie, ob der Entwicklermodus aktiviert ist. und laden Sie das entpackte Erweiterungsverzeichnis hoch. Erweiterungs-ID in der Erweiterungsverwaltung vergleichen der Artikel-ID im Entwickler-Dashboard hinzu. Sie sollten übereinstimmen.

Die ID des Übereinstimmung mit der Erweiterung

OAuth-Client-ID erstellen

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

Anmeldedaten für Erweiterung erstellen

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

Erweiterungsinformationen eingeben

Klicken Sie zum Abschluss auf „Erstellen“. Die Konsole stellt eine OAuth-Client-ID bereit.

OAuth im Manifest registrieren

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

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

Ersten OAuth-Ablauf initiieren

Registrieren Sie die Berechtigung identity im Manifest.

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

Erstellen Sie eine Datei namens oauth.js, um den OAuth-Ablauf 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>
...

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

Token in der Konsole ansehen

Google People API aktivieren

Kehren Sie zur Google API Console zurück und wählen Sie in der Seitenleiste Bibliothek aus. Nach „Google People“ suchen API" auf das richtige Ergebnis und aktivieren Sie es.

People API aktivieren

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

Anmeldedaten für die People API erstellen

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

Erste API-Anfrage erstellen

Jetzt, da die Erweiterung über die erforderlichen 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 den folgenden Werten ü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 API-Schlüssel, der über die Google API Console generiert wurde. Die Erweiterung sollte ein JSON-Objekt protokollieren, das ein Array von people/account_ids unter der memberResourceNames.

Gesichter blockieren

Nachdem die Erweiterung nun eine Liste der Kontakte des Nutzers zurückgibt, können zusätzliche Anfragen gesendet werden. zum Abrufen der Profile und Informationen dieses Kontakts . Die Erweiterung verwendet das memberResourceNames, um die Fotoinformationen der Nutzerkontakte abzurufen. oauth.js aktualisieren auf enthält den folgenden 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_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);
                  });
            };
          });
    });
  });
};

Aktualisieren Sie die Seite und kehren Sie zur Erweiterung zurück. Klicke auf die Schaltfläche FriendBlock und ta-da! Gesichter von Kontakten ansehen in einen Block.

Gesichter in einem Block kontaktieren