OAuth2: Nutzer mit 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 der Chrome Identity API. Da Erweiterungen nicht über HTTPS geladen werden, sind sie 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.

Die vollständige, fertige Erweiterung kann hier heruntergeladen werden.

manifest.json

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

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 2,
  "browser_action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  }
}

background.js

Fügen Sie das Hintergrundskript hinzu, indem Sie eine Datei namens background.js erstellen, die den folgenden Code enthält. Sie können die Datei auch hier herunterladen.

chrome.browserAction.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. Sie können die Datei auch hier herunterladen.

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

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 Datei auswählen, wählen Sie das Verzeichnis für die Erweiterung .zip aus und laden Sie die Datei hoch.
  3. Wählen Sie Entwurf speichern und zum Dashboard zurückkehren aus, ohne zusätzliche Felder auszufüllen.

Suchen Sie unter Meine Einträge nach der Erweiterung und klicken Sie auf Weitere Informationen. Kopieren Sie aus dem Pop-up-Fenster die öffentlichen Schlüssel und fügen Sie ihn dem Manifest im entpackten Verzeichnis im Feld "key" hinzu.

{
  "name": "OAuth Tutorial FaceBlcok",
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}

IDs vergleichen

Öffnen Sie unter chrome://extensions die Seite zur Verwaltung von Erweiterungen, prüfen Sie, ob der Entwicklermodus aktiviert ist und das entpackte Erweiterungsverzeichnis hochladen. Erweiterungs-ID in der Erweiterungsverwaltung vergleichen der Artikel-ID im Entwickler-Dashboard hinzu. Sie sollten übereinstimmen.

Die ID der Erweiterung stimmt an allen Stellen überein

Die Erweiterung behält dieselbe ID, indem sie das Feld „"key"“ in das Manifest einfügt. Beibehaltung eines ID ist für die API-Registrierung erforderlich.

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-App aus. Geben Sie den Namen der Erweiterung ein 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 FaceBlcok",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

Erstellen Sie eine Datei namens oauth.js, um den OAuth-Ablauf zu verwalten, und fügen Sie den folgenden Code ein. Oder herunterladen hier.

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. Öffnen Sie die Konsole und klicken Sie auf in "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 FaceBlcok",
  ...
  "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