Os protocolos de autenticação da Web utilizam recursos HTTP, mas os apps do Chrome são executados dentro do contêiner. Eles não são carregados por HTTP e não podem realizar redirecionamentos nem definir cookies.
Use a API Chrome Identity para autenticar usuários: o getAuthToken
para usuários que fizeram login na
Conta do Google e o launchWebAuthFlow
para usuários conectados a uma conta que não é do Google. Se o
app usar um servidor próprio para autenticar usuários, você vai precisar usar o segundo.
Como funciona
Os usuários dos apps do Chrome têm uma Conta do Google associada ao perfil. Os apps podem receber tokens OAuth2 para esses usuários usando a API getAuthToken
.
Os apps que quiserem realizar a autenticação com provedores de identidade que não sejam do Google precisam chamar
launchWebAuthFlow
. Esse método usa um pop-up do navegador para mostrar as páginas do provedor e captura
redirecionamentos para os padrões de URL específicos. Os URLs de redirecionamento são transmitidos ao app, que extrai
o token do URL.
Autenticação da Conta do Google
Aqui estão as cinco etapas que você precisa concluir:
- Adicione permissões ao manifesto e faça upload do app.
- Copie a chave no
manifest.json
instalado para o manifesto de origem. Assim, o ID do aplicativo permanece constante durante o desenvolvimento. - Gerar um ID do cliente OAuth2 para seu app do Chrome.
- Atualize o manifesto para incluir o ID do cliente e os escopos.
- Consiga o token de autenticação.
Adicionar permissões e fazer upload do app
Verifique se a permissão de identidade está no manifesto. Em seguida, faça o upload do seu app para a página de gerenciamento de apps e extensões (consulte Publicar).
"permissions": [
"identity"
]
Copiar a chave para o manifesto
Ao registrar seu aplicativo no console do Google OAuth, você fornece o ID do aplicativo, que será verificado durante as solicitações de token. Portanto, é importante ter um ID do aplicativo consistente durante o desenvolvimento.
Para manter o ID do aplicativo constante, você precisa copiar a chave do manifest.json
instalado para
o manifesto de origem. Esta não é a tarefa mais elegante, mas é assim que acontece:
- Acesse o diretório de dados do usuário. Exemplo em MacOs:
~/Library/Application\ Support/Google/Chrome/Default/Extensions
- Liste as extensões e os aplicativos instalados e associe o ID do aplicativo na página de gerenciamento de aplicativos e extensões ao mesmo código aqui.
- Acesse o diretório do app instalado, que é uma versão do ID do app. Abra o
manifest.json
instalado. O pico é uma maneira rápida de abrir o arquivo. - Copie a "chave" do
manifest.json
instalado e cole no arquivo de manifesto de origem do app.
Receber o ID do cliente OAuth2
É necessário registrar seu aplicativo no Console de APIs do Google para obter o ID do cliente:
- Faça login no Console de APIs do Google com a mesma Conta do Google usada para fazer o upload do seu app na Chrome Web Store.
- Crie um novo projeto expandindo o menu suspenso no canto superior esquerdo e selecionando o item de menu Create....
- Depois de criar e nomear, acesse o item do menu de navegação "Serviços" e ative todos os Serviços do Google necessários para o app.
- Vá até o item do menu de navegação "Acesso à API" e clique no botão azul Criar um ID do cliente OAuth 2.0....
- Insira as informações de marca solicitadas e selecione o tipo Aplicativo instalado.
- Selecione Aplicativo do Chrome e insira o ID do aplicativo, o mesmo ID exibido na página de gerenciamento de apps e extensões.
Atualizar seu manifesto com o ID do cliente OAuth2 e os escopos
É necessário atualizar o manifesto para incluir o ID do cliente e os escopos. Veja o exemplo "oauth2" para o exemplo do gdrive:
"oauth2": {
"client_id": "665859454684.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/drive"
]
}
Receber tokens de acesso
Agora você está pronto para receber o token de autenticação chamando identity.getAuthToken.
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
// Use the token.
});
Interação do usuário
Ao chamar getAuthToken
, você pode transmitir uma flag ('interactive': true
no exemplo acima)
indicando se quer que a API seja chamada no modo interativo ou no modo silencioso. Se você invocar
a API no modo interativo, o usuário verá uma interface de login e/ou aprovação quando necessário, conforme mostrado
na captura de tela abaixo:
Se você invocar a API no modo silencioso, ela só vai retornar um token se for possível produzir um sem mostrar nenhuma interface. Isso é útil nos casos em que um app está fazendo o fluxo na inicialização do app, por exemplo, ou, em geral, quando não há um gesto do usuário envolvido.
A prática recomendada que sugerimos é usar o modo silencioso, quando não há um gesto do usuário envolvido, e usar o modo interativo se houver um gesto do usuário, por exemplo, o usuário clicou no botão "Fazer login" no seu app. Não aplicamos nenhum requisito de gestos.
Armazenamento em cache
O Chrome tem um cache de tokens de acesso na memória para que você possa chamar getAuthToken
sempre que precisar usar um token. A expiração do token é tratada automaticamente pelo cache.
É possível conferir o estado atual do cache do token em chrome://identity-internals
.
Em alguns casos, por exemplo, quando o usuário altera a senha, os tokens de acesso não expirados param de funcionar. As chamadas de API que usam o token começarão a retornar com um código de status HTTP 401. Se você detectar que isso aconteceu, remova o token inválido do cache do Chrome chamando identity.removeCachedAuthToken.
Exemplo de uso de removeCachedAuthToken
:
// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
var retry = true;
function getTokenAndXhr() {
chrome.identity.getAuthToken({/* details */},
function (access_token) {
if (chrome.runtime.lastError) {
callback(chrome.runtime.lastError);
return;
}
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader('Authorization',
'Bearer ' + access_token);
xhr.onload = function () {
if (this.status === 401 && retry) {
// This status may indicate that the cached
// access token was invalid. Retry once with
// a fresh token.
retry = false;
chrome.identity.removeCachedAuthToken(
{ 'token': access_token },
getTokenAndXhr);
return;
}
callback(null, this.status, this.responseText);
}
});
}
}
Autenticação de conta que não é do Google
Aqui estão as três etapas que você precisa concluir:
- Registre-se com o provedor.
- Adicione permissões para os recursos do provedor que seu app vai acessar.
- Consiga o token de autenticação.
Registrar com o provedor
Você precisa registrar um ID do cliente OAuth2 no provedor e configurá-lo como um site.
Para que o URI de redirecionamento seja inserido durante o registro, use o URL do formulário:
https://<extension-id>.chromiumapp.org/<anything-here>
Por exemplo, se o ID do app for abcdefghijklmnopqrstuvwxyzabcdef
e você quiser que provider_cb
seja
o caminho, para distingui-lo com URIs de redirecionamento de outros provedores, use:
https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb
Adicionar permissões para o provedor
Para fazer XHRs de origem cruzada para os endpoints da API do provedor, é necessário colocar os padrões apropriados nas permissões na lista de permissões:
"permissions": [
...
"https://www.website-of-provider-with-user-photos.com/photos/*"
]
Receber o token
Para receber o token:
chrome.identity.launchWebAuthFlow(
{'url': '<url-to-do-auth>', 'interactive': true},
function(redirect_url) { /* Extract token from redirect_url */ });
O <url-to-do-auth>
é o URL para fazer a autenticação no provedor a partir de um site. Por exemplo,
digamos que você está executando o fluxo OAuth2 com um provedor, registrou seu app com
o ID do cliente 123456789012345 e quer acessar as fotos do usuário no site do provedor:
https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos
O provedor realizará a autenticação e, se apropriado, mostrará a interface de login e/ou aprovação ao
usuário. Em seguida, ele vai redirecionar para
https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>
O Chrome vai capturar isso e invocar o callback do app com o URL de redirecionamento completo. O app precisa extrair o token do URL.
Modo interativo vs. silencioso
Ao chamar launchWebAuthFlow
, você pode transmitir uma flag ('interactive': true
no exemplo acima)
indicando se quer que a API seja chamada no modo interativo ou não (também conhecido como modo silencioso). Se
você invocar a API no modo interativo, o usuário vai receber a interface, se necessário, para receber o token (interface de
login e/ou de aprovação ou, para esse caso, qualquer interface específica do provedor).
Se você invocar a API no modo silencioso, ela só vai retornar um token se o provedor puder fornecer um token sem mostrar nenhuma interface. Isso é útil nos casos em que um app está realizando o fluxo na inicialização do app, por exemplo, ou, em geral, quando não há um gesto do usuário envolvido.
A prática recomendada que sugerimos é usar o modo silencioso, quando não há um gesto do usuário envolvido, e usar o modo interativo se houver um gesto do usuário, por exemplo, o usuário clicou no botão "Fazer login" no seu app. Não aplicamos requisitos de gestos.