Como usar corretamente a biblioteca Javascript OAuth2.0 do Google
-
21-12-2019 - |
Pergunta
Estou tentando acessar algumas APIs do Google do meu cliente javascript usando Oauth2.Consegui fazer com que o usuário autenticasse solicitações, mas há algum comportamento inesperado ao executar o código abaixo que gostaria de entender.Quando clico no botão 'autorizar' pela primeira vez, o resultado é:
'[{"erro":{"código":401, "mensagem":"Login obrigatório", "dados":[ { "domínio":"global", "razão":"obrigatório", "mensagem":"Login obrigatório", "locationType":"cabeçalho", "localização":"Autorização" } ] }, "id":"gapiRpc" } ] '
no segundo clique o resultado é
[ { "eu ia":"gapiRpc", "resultado":{ "eu ia":"1115793426680xxxx", "e-mail":"xxxxx@gmail.com", "e-mail_verificado":verdadeiro } } ]
aqui está o código da página que estou testando
<div id='sign in'>
<button onclick="init();">Authorize</button>
</div>
<p id="output">hello</p>
<script type="text/javascript">
function init() {
document.getElementById('output').innerHTML='loading oauth2 api'
gapi.client.load('oauth2', 'v2', auth);
}
function auth() {
var config = {
client_id: '2264xxxxx-odt0g7jn8vspa3ot9ogjxxxxxxxxx.apps.googleusercontent.com',
scope: 'https://www.googleapis.com/auth/userinfo.email',
immediate:true
};
document.getElementById('output').innerHTML='authorizing'
gapi.auth.authorize(config, authed());
}
function authed() {
document.getElementById('output').innerHTML='authorized'
var request = gapi.client.oauth2.userinfo.get().execute(
function(resp, raw) {
document.getElementById('output').innerHTML=raw
}
);
}
</script>
<script src="https://apis.google.com/js/client.js"></script>
<!--<script src="https://apis.google.com/js/client.js?onload=init"></script>-->
Você poderia explicar por que eu obteria um 'login obrigatório' na primeira execução do código e uma autenticação bem-sucedida na segunda execução?
Solução
Devido aos parênteses imediatamente após "authed" na chamada para gapi.auth.authorize, o retorno de chamada authed() é executado imediatamente, antes da chamada para gapi.auth.authorize.
Além disso, em seu manipulador authed() você precisa verificar se a autorização é verificada com imediato:verdadeiro teve sucesso;para obter mais detalhes, consulte a documentação de referência aqui:
Consulte também a seção sobre bloqueio de pop-ups aqui:
https://developers.google.com/api-client-library/javascript/features/authentication#popup
Quando a autorização "imediata" falhar, o retorno de chamada autenticado será invocado com um objeto token nulo ou um objeto token contendo um campo "erro";nesses casos, você precisa apresentar um elemento da interface do usuário no qual o usuário pode clicar, que executará novamente a chamada gapi.auth.authorize, mas com "imediato" definido como falso (ou omitido).Isso permite que o pop-up de autorização seja aberto sem entrar em conflito com o bloqueador de pop-up do seu navegador.