OAuth2 é o protocolo padrão do setor para autorização. Ele oferece um mecanismo para os usuários permitir que aplicativos da Web e de computador acessem informações particulares sem compartilhar o nome de usuário, senha e outras credenciais particulares.
Este tutorial cria uma extensão que acessa os contatos do Google de um usuário usando o aplicativo Google People API e a API Chrome Identity. Como as extensões não carregam por HTTPS, não é possível realizar redirecionamentos ou cookies, eles dependem da API Chrome Identity para usar o OAuth2.
Primeiros passos
Comece criando um diretório e os seguintes arquivos iniciais.
Faça o download da extensão completa aqui.
manifest.json
Adicione o manifesto criando um arquivo com o nome manifest.json e inclua o código abaixo. Ou faça o download do arquivo aqui.
{ "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
Adicione o script de segundo plano criando um arquivo chamado background.js e inclua o código a seguir. Ou faça o download do arquivo aqui.
chrome.browserAction.onClicked.addListener(function() { chrome.tabs.create({url: 'index.html'}); }); index.html
Adicione um arquivo HTML chamado index.html e inclua o código a seguir. Ou faça o download do arquivo aqui.
<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> Fazer upload para o painel de controle do desenvolvedor
Empacote o diretório de extensão em um arquivo .zip e faça o upload dele no Chrome Developer painel sem publicá-lo:
- No Painel de controle do desenvolvedor, clique em Adicionar novo item.
- Clique em Choose file, selecione o diretório de extensão
.zipe faça upload dele. - Sem preencher outros campos, selecione Salvar rascunho e voltar ao painel.
Encontre a extensão em Suas listagens e clique em Mais informações. No pop-up, copie o chave pública e adicioná-la ao manifesto dentro do diretório descompactado no campo "key".
{ "name": "OAuth Tutorial FaceBlcok", ... "key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB" } Comparar IDs
Abra a página "Gerenciamento de extensões" em chrome://extensions, verifique se o modo de desenvolvedor está ativado e faça upload do diretório de extensão descompactado. Comparar o ID da extensão no gerenciamento de extensões ao ID do item no Painel de controle do desenvolvedor. Deve haver uma correspondência entre eles.
A extensão manterá o mesmo ID incluindo o campo "key" no manifesto. Preservar uma um único ID é essencial para o registro da API.
Criar ID do cliente do OAuth
Acesse o Console de APIs do Google e crie um novo projeto. Quando estiver tudo pronto, selecione Credenciais na barra lateral, clique em Criar credenciais e selecione ID do cliente OAuth.
Na página "Criar ID do cliente", selecione Aplicativo do Chrome. Preencha o nome da extensão e coloque o código da extensão no final do URL, no campo "ID do aplicativo".
Para concluir, clique em "Criar". O console fornecerá um ID do cliente OAuth.
Registrar OAuth no manifesto
Inclua o campo "oauth2" no manifesto da extensão. Coloque o ID do cliente OAuth gerado em "client_id": Por enquanto, inclua uma string vazia em "scopes".
{ "name": "OAuth Tutorial FriendBlock", ... "oauth2": { "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com", "scopes":[""] }, ... } Iniciar primeiro fluxo do OAuth
Registre a permissão identity no manifesto.
{ "name": "OAuth Tutorial FaceBlcok", ... "permissions": [ "identity" ], ... } Crie um arquivo para gerenciar o fluxo OAuth chamado oauth.js e inclua o código a seguir. Ou faça o download aqui.
window.onload = function() { document.querySelector('button').addEventListener('click', function() { chrome.identity.getAuthToken({interactive: true}, function(token) { console.log(token); }); }); }; Coloque uma tag de script para oauth.js no cabeçalho de index.html.
... <head> <title>FriendBlock</title> ... <script type="text/javascript" src="oauth.js"></script> </head> ... Atualize a extensão e clique no ícone do navegador para abrir index.html. Abra o console e clique em em "Contatos do Google FriendBlock" . Um token OAuth aparecerá no console.
Ativar a API Google People
Volte para o Console de APIs do Google e selecione Biblioteca na barra lateral. Pesquisar "Google People API", clique no resultado correto e ative-o.
Adicione a biblioteca de cliente da API Google People a "scopes" no manifesto da extensão.
{ "name": "OAuth Tutorial FaceBlcok", ... "oauth2": { "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com", "scopes": [ "https://www.googleapis.com/auth/contacts.readonly" ] }, ... } Volte ao Console de APIs do Google e volte às credenciais. Clique em "Criar credenciais" e selecione "Chave de API" no menu suspenso.
Guarde a chave de API gerada para uso posterior.
Criar a primeira solicitação de API
Agora que a extensão tem as permissões e credenciais adequadas e pode autorizar um usuário do Google, ela pode solicitar dados pela API People. Atualize o código em oauth.js para corresponder ao código abaixo.
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) }); }); }); }; Substitua API_KEY pela chave de API gerada no Console de APIs do Google. A extensão precisa registrar um objeto JSON que inclui uma matriz de people/account_ids na memberResourceNames.
Bloquear rostos
Agora que a extensão está retornando uma lista de contatos do usuário, ela pode fazer solicitações adicionais para recuperar os perfis e as informações desses contatos . A extensão usará o memberResourceNames para recuperar as informações da foto dos contatos do usuário. Atualizar oauth.js para inclua o código a seguir.
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); }); }; }); }); }); }; Atualize e volte para a extensão. Clique no botão FriendBlock e pronto! Confira os rostos dos seus contatos no um bloco.
