A biblioteca JavaScript google.accounts.oauth2
ajuda você a solicitar que o usuário
consentir e receber um token de acesso para trabalhar com dados do usuário. Ele é baseado na
Fluxo de concessão implícita do OAuth 2.0 criado para permitir que você chame o Google
diretamente usando REST e CORS, ou usar nossa biblioteca de clientes de APIs do Google para
JavaScript (também conhecido como gapi.client
) para acesso simples e flexível aos nossos
APIs mais complexas.
Antes de acessar os dados protegidos do usuário em um navegador, os usuários no seu site acionam o seletor de conta do Google baseado na Web, o login e os processos de consentimento; e, por fim, Os servidores OAuth do Google emitem e retornam um token de acesso ao seu app da Web.
No modelo de autorização com base em token, não é necessário armazenar tokens de atualização no servidor de back-end.
Recomendamos que você siga a abordagem descrita aqui em vez da técnicas cobertas pelo antigo OAuth 2.0 para aplicativos da Web do lado do cliente guia.
Configuração
Encontre ou crie um ID do cliente seguindo as etapas descritas na seção Tenha
Guia do ID do cliente da API do Google. Em seguida, adicione a biblioteca de cliente às páginas.
no site que vão chamar as APIs do Google. Por fim, inicialize o token
para o cliente. Normalmente, isso é feito dentro do gerenciador onload
da biblioteca de cliente.
Inicializar um cliente de token
Chame initTokenClient()
para inicializar um novo cliente de token com o método
ID do cliente, você pode incluir uma lista de um ou mais escopos que o usuário
precisa acessar:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
...
},
});
Acionar o fluxo do token OAuth 2.0
Use o método requestAccessToken()
para acionar o fluxo de UX do token e conseguir uma
token de acesso. O Google solicita que o usuário:
- Escolha a conta dele,
- fazer login na Conta do Google, caso ainda não esteja conectado;
- dê consentimento para que seu app da Web acesse cada escopo solicitado.
Um gesto do usuário aciona o fluxo do token: <button onclick="client.requestAccessToken();">Authorize me</button>
O Google retorna um TokenResponse
contendo um token de acesso e uma lista de
escopos aos quais o usuário concedeu acesso ou um erro ao gerenciador de retornos de chamada.
Os usuários podem fechar o seletor de conta ou as janelas de login. Nesse caso, função de callback não será invocada.
Como lidar com o consentimento
O design e a experiência do usuário para seu aplicativo só devem ser implementados após um análise completa das políticas do OAuth 2.0 do Google. Essas políticas abrangem trabalhar com vários escopos, quando e como lidar com o consentimento do usuário e muito mais.
A autorização incremental é uma metodologia de política e design de app usada para solicitar acesso a recursos, usando escopos, somente conforme necessário, e tudo de uma só vez. Os usuários podem aprovar ou rejeitar o compartilhamento de recursos individuais solicitado pelo app, isso é conhecido como permissões granulares.
Durante esse processo, o Google solicita o consentimento do usuário, listando individualmente cada escopo solicitado, os usuários selecionam os recursos a serem compartilhados com seu app e Por fim, o Google invoca sua função de callback para retornar um token de acesso e o escopos aprovados. Em seguida, o app processa com segurança os vários resultados diferentes possível com permissões granulares.
Autorização incremental
Para aplicativos da Web, os dois cenários de alto nível a seguir demonstram autorização usando:
- Um app Ajax de uma única página, geralmente usando
XMLHttpRequest
com acesso dinâmico a do Google Cloud. - Com várias páginas da Web, os recursos são separados e gerenciados por página.
Esses dois cenários são apresentados para ilustrar considerações de design e metodologias, mas não se destinam a ser recomendações abrangentes sobre como para incorporar o consentimento ao seu app. Apps reais podem usar uma variação ou uma combinação dessas técnicas.
Ajax
Adicionar suporte para autorização incremental ao seu app fazendo várias chamadas
a requestAccessToken()
e usando o objeto OverridableTokenClientConfig
o parâmetro scope
para solicitar escopos individuais no momento em que são necessários
apenas quando necessário. Neste exemplo, os recursos serão solicitados e estarão visíveis
somente depois que um gesto do usuário expandir uma seção de conteúdo recolhida.
App Ajax |
---|
Inicialize o cliente de token no carregamento da página:
const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", }); Documentos para lerMostrar documentos recentes client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/documents.readonly' }) ); Próximos eventosMostrar informações da agenda client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/calendar.readonly' }) ); Carrossel de fotosMostrar fotos client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/photoslibrary.readonly' }) ); |
Cada chamada para requestAccessToken
aciona um momento de consentimento do usuário, seu app
têm acesso apenas aos recursos exigidos pela seção escolhida pelo usuário
se expandem, limitando o compartilhamento de recursos com a escolha do usuário.
Várias páginas da Web
Ao projetar para autorização incremental, várias páginas são usadas para solicitar apenas os escopos necessários para carregar uma página, reduzindo a complexidade e a necessidade fazer várias chamadas para obter o consentimento do usuário e recuperar um token de acesso;
Aplicativo de várias páginas | ||||||||
---|---|---|---|---|---|---|---|---|
|
Cada página solicita o escopo necessário e recebe um token de acesso chamando
initTokenClient()
e requestAccessToken()
no tempo de carregamento. Nesse cenário,
páginas da Web individuais são usadas para separar claramente a funcionalidade do usuário e
recursos por escopo. Em uma situação real, páginas individuais podem solicitar
vários escopos relacionados.
Permissões granulares
As permissões granulares são tratadas da mesma forma em todos os cenários. depois
requestAccessToken()
invoca sua função de callback e um token de acesso
retornado, verifique se o usuário aprovou os escopos solicitados usando
hasGrantedAllScopes()
ou hasGrantedAnyScope()
. Exemplo:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/documents.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
'https://www.googleapis.com/auth/photoslibrary.readonly')) {
// Look at pictures
...
}
if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
'https://www.googleapis.com/auth/calendar.readonly',
'https://www.googleapis.com/auth/documents.readonly')) {
// Meeting planning and review documents
...
}
}
},
});
Todas as concessões já aceitas de sessões ou solicitações anteriores também serão
incluído na resposta. Um registro do consentimento do usuário é mantido por usuário e
ID do cliente e persiste em várias chamadas para initTokenClient()
ou
requestAccessToken()
. Por padrão, o consentimento do usuário é necessário apenas na primeira
vez que um usuário visita seu site e solicita um novo escopo, mas pode ser solicitado em
cada carregamento de página usando prompt=consent
em objetos de configuração do cliente de token.
Como trabalhar com tokens
No modelo de token, um token de acesso não é armazenado pelo SO ou pelo navegador.
um novo token é obtido primeiro no tempo de carregamento da página ou, posteriormente, pelo acionamento de uma
chamada para requestAccessToken()
com um gesto do usuário, como o pressionamento de um botão.
Como usar REST e CORS com as APIs do Google
Um token de acesso pode ser usado para fazer solicitações autenticadas às APIs do Google usando REST e CORS. Isso permite que os usuários façam login, concedam consentimento, e o Google emita uma token de acesso e seu site para funcionar com os dados do usuário.
Neste exemplo, veja os próximos eventos da agenda dos usuários que fizeram login usando o
token de acesso retornado por tokenRequest()
:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();
Consulte Como usar o CORS para acessar as APIs do Google para saber mais.
A próxima seção mostra como fazer uma integração fácil com APIs mais complexas.
Como trabalhar com a biblioteca JavaScript das APIs do Google
O cliente de token funciona com a biblioteca de cliente das APIs do Google para JavaScript. Confira o snippet de código abaixo.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
gapi.client.setApiKey('YOUR_API_KEY');
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
},
});
function listUpcomingEvents() {
gapi.client.calendar.events.list(...);
}
Expiração do token
Por padrão, os tokens de acesso têm uma vida útil curta. Se o token de acesso expirar
antes do fim da sessão do usuário, consiga um novo token chamando
requestAccessToken()
de um evento orientado pelo usuário, como o pressionamento de um botão.
Usar um token de acesso para revogar o consentimento
Chame o método google.accounts.oauth2.revoke
para remover o consentimento do usuário e
acesso a recursos para todos os escopos concedidos ao app. Um acesso válido
é necessário para revogar essa permissão:
google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
console.log(done);
console.log(done.successful);
console.log(done.error);
console.log(done.error_description);
});