Como usar corretamente a biblioteca Javascript OAuth2.0 do Google

Question

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?

Answer 1

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:

https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauthauthorize

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.