Cette page a été traduite par l'API Cloud Translation.

OAuth2: authentifier les utilisateurs avec Google

OAuth2 est le protocole d'autorisation standard dans l'industrie. Il fournit un mécanisme aux utilisateurs d'autoriser les applications Web et de bureau à accéder à des informations privées sans partager leur nom d'utilisateur, un mot de passe et d’autres identifiants privés.

Ce didacticiel permet de créer une extension qui accède aux contacts Google d'un utilisateur à l'aide de l'application Google People API et API Chrome Identity. Étant donné que les extensions ne se chargent pas via HTTPS, ou définissent des cookies, ils s'appuient sur l'API Chrome Identity pour utiliser OAuth2.

Commencer

Commencez par créer un répertoire et les fichiers de démarrage suivants.

L'extension complète peut être téléchargée sur cette page.

manifest.json

Ajoutez le fichier manifeste en créant un fichier nommé manifest.json et en incluant le code suivant. Ou téléchargez le fichier ici.

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

Ajoutez le script d'arrière-plan en créant un fichier nommé background.js et en incluant le code suivant. Vous pouvez également télécharger le fichier.

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

index.html

Ajoutez un fichier HTML appelé index.html et incluez le code suivant. Vous pouvez également télécharger le fichier.

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

Importer dans le tableau de bord du développeur

Empaquetez le répertoire de l'extension dans un fichier .zip et importez-le dans l'application Chrome Developer tableau de bord sans le publier:

Dans le tableau de bord du développeur, cliquez sur Ajouter un nouvel élément.
Cliquez sur Sélectionner un fichier, sélectionnez le répertoire d'extension .zip et importez-le.
Sans remplir aucun champ supplémentaire, sélectionnez Enregistrer le brouillon et revenir au tableau de bord.

Recherchez l'extension concernée sous Vos fiches, puis cliquez sur Plus d'infos. Dans la fenêtre pop-up, copiez la et l'ajouter au fichier manifeste dans le répertoire décompressé, dans le champ "key".

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

Comparer les ID

Ouvrez la page de gestion des extensions sur chrome://extensions, vérifiez que le mode développeur est activé et importez le répertoire d'extension décompressé. Comparez l'ID d'extension sur la page de gestion des extensions à l'ID de l'article dans le tableau de bord du développeur. Ils doivent concorder.

L'ID de l'extension correspond à tous les emplacements

L'extension conservera le même ID en incluant le champ "key" dans le fichier manifeste. Préserver une l'identifiant unique est essentiel pour l'enregistrement d'API.

Créer un ID client OAuth

Accédez à la console Google APIs et créez un projet. Lorsque vous êtes prêt, sélectionnez Identifiants dans la barre latérale, cliquez sur Créer des identifiants, puis sélectionnez ID client OAuth.

Créer des identifiants pour l'extension

Sur la page "Créer un ID client", sélectionnez Application Chrome. Indiquez le nom de l'extension et le lieu l'ID d'extension à la fin de l'URL dans le champ "ID de l'application".

Fournir les informations sur l'extension

Pour terminer, cliquez sur "Créer". La console fournit un ID client OAuth.

Enregistrer OAuth dans le fichier manifeste

Incluez le champ "oauth2" dans le fichier manifeste de l'extension. Placez l'ID client OAuth généré sous "client_id" Incluez une chaîne vide dans "scopes" pour le moment.

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

Lancer le premier flux OAuth

Enregistrez l'autorisation identity dans le fichier manifeste.

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

Créez un fichier nommé oauth.js pour gérer le flux OAuth et incluez le code suivant. Ou téléchargez cliquez ici.

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

Placez un tag de script pour oauth.js dans l'en-tête de index.html.

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

Actualisez l'extension, puis cliquez sur l'icône du navigateur pour ouvrir index.html. Ouvrez la console et cliquez sur sur la liste des contacts "FriendBlock" . Un jeton OAuth s'affiche dans la console.

Afficher le jeton dans la console

Activer l'API Google People

Revenez à la console Google APIs et sélectionnez Bibliothèque dans la barre latérale. Recherchez "Google People" API", cliquez sur le résultat qui vous intéresse et activez-le.

Activer l'API People

Ajoutez la bibliothèque cliente de l'API Google People à "scopes" dans le fichier manifeste de l'extension.

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

Revenez à la console Google APIs et aux identifiants. Cliquez sur "Créer des identifiants" et sélectionnez "Clé API" dans le menu déroulant.

Créer des identifiants pour l'API People

Conservez la clé API générée pour une utilisation ultérieure.

Créer la première requête API

Maintenant que l'extension dispose des autorisations et des identifiants appropriés, et qu'elle peut autoriser un utilisateur Google, elle peut demander des données via l'API People. Mettez à jour le code dans oauth.js pour qu'il corresponde à ce qui suit.

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

Remplacez API_KEY par la clé API générée à partir de la console Google APIs. L'extension doit enregistrer un objet JSON qui inclut un tableau de people/account_ids sous le memberResourceNames.

Bloquer des visages

Maintenant que l'extension renvoie la liste des contacts de l'utilisateur, elle peut effectuer des requêtes supplémentaires. pour récupérer les profils et les informations de ces contacts . L'extension utilise la méthode memberResourceNames pour récupérer les informations sur les photos des contacts des utilisateurs. Remplacer oauth.js par incluez le code suivant.

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

Actualisez la page et revenez à l'extension. Cliquez sur le bouton FriendBlock et ta-da ! Découvrez les visages de vos contacts dans un bloc.

Visages de contact dans un bloc