Comptes google com o oauth2 auth

OAuth2 est le protocole d’autorisation standard. Il fournit un mécanisme permettant aux utilisateurs d’accorder aux applications Web et de bureau l’accès à des informations privées sans partager leur nom d’utilisateur, leur mot de passe et d’autres informations d’identification privées.

Ce tutoriel crée une extension qui accède aux contacts Google d'un utilisateur à l'aide de l'API Google People et de l'API Chrome Identity.

Commencez

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

manifest.json

Ajoutez le manifeste en créant un fichier appelé et incluez le code suivant.

service-worker.js

Ajoutez le programme de travail du service d’extension en créant un fichier appelé et incluez le code suivant.

index.html

Ajoutez un fichier HTML appelé et incluez le code suivant.

Conserver un ID d’extension cohérent

Il est essentiel de conserver un seul ID pendant le développement. Pour conserver un ID cohérent, procédez comme suit :

Importer l’extension dans le tableau de bord du développeur

Empaquetez le répertoire de l’extension dans un fichier et importez-le dans le tableau de bord du développeur Chrome sans le publier :

1. dans le tableau de bord du développeur, cliquez sur Ajouter un nouvel élément .
2. Cliquez sur Parcourir les fichiers , sélectionnez le fichier zip de l'extension et téléchargez-le.
3. Allez dans l’onglet Package et cliquez sur Afficher la clé publique .

Lorsque la fenêtre contextuelle est ouverte, procédez comme suit :

1. Copiez le code entre et .
2. Supprimez les sauts de ligne afin d’en faire une seule ligne de texte.

Ajoutez le code à la sous le champ. De cette façon, l’extension utilisera le même ID.

Ouvrez

la page Gestion des extensions à l’adresse , assurez-vous que le mode développeur est activé et chargez le répertoire d’extensions non empaqueté. Comparez l’ID d’extension sur la page de gestion des extensions à l’ID d’élément dans le tableau de bord du développeur. Ils devraient correspondre.

Créer un ID client OAuth

Accédez à la console API Google et créez un projet. Une fois prêt, sélectionnez Informations d’identification dans la barre latérale, cliquez sur Créer des informations d’identification et choisissez ID client OAuth .

Sur la page Créer un ID client, sélectionnez Extension Chrome . Renseignez le nom de l’extension et placez l’ID d’extension à la fin de l’URL dans le champ ID d’application.

Terminer par Cliquez sur Créer. La console fournit un ID client OAuth.

Inscrire OAuth dans le manifeste

Incluez le champ dans le manifeste de l’extension. Placez l’ID client OAuth généré sous . Incluez une chaîne vide pour l’instant.

Initier le premier flux OAuth

Enregistrez l’autorisation dans le manifeste.

Créez un fichier pour gérer le flux OAuth appelé et incluez le code suivant.

Placez une balise de script pour dans l’en-tête de .

Rechargez l’extension et cliquez sur l’icône du navigateur pour ouvrir . Ouvrez la console et cliquez sur le bouton « FriendBlock Contacts ». Un jeton OAuth apparaîtra dans la console.

Activez l’API Google People

: revenez à la console de l’API Google et sélectionnez Bibliothèque dans la barre latérale. Recherchez « Google People API », cliquez sur le bon résultat et activez-le.

Ajoutez la bibliothèque cliente de l’API Google People dans le manifeste de l’extension.

Revenez à la console de l’API Google et revenez aux informations d’identification. Cliquez sur « Créer des informations d’identification » et sélectionnez « Clé API » dans la liste déroulante.

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

Créer la première demande d’API

Maintenant que l’extension dispose des autorisations et des informations d’identification appropriées et qu’elle peut autoriser un utilisateur Google, elle peut demander des données via l’API People. Mettez à jour le code pour qu’il corresponde ci-dessous.

Remplacez-la par la clé API générée à partir de la console API Google. L’extension doit consigner un objet JSON qui inclut un tableau de s sous le champ.

Bloquer les visages

Maintenant que l'extension renvoie une 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 permettra Utilisez le pour récupérer les informations photo des contacts de l’utilisateur. Mettez à jour pour inclure le code suivant.

Rechargez et revenez à l’extension. Cliquez sur le bouton FriendBlock et ta-da ! Profitez des visages du contact dans un bloc.