Come utilizzare correttamente la libreria JavaScript OAuth2.0 di Google

Question

Sto cercando di accedere ad alcune API di Google dal mio client JavaScript utilizzando OAuth2.Sono riuscito a ottenere l'utente ad autenticare le richieste, ma c'è qualche comportamento inaspettato quando si esegue il codice qui sotto che vorrei capire.Quando faccio clic sul pulsante "Autorizzazione" la prima volta, il risultato è:

'[{"Errore": {"Codice": 401, "Messaggio": "Accesso richiesto", "Dati": [{"Dominio": "Global", "Motivo": "Richiesto", "Messaggio"":" Accesso richiesto "," LocationType ":" Intestazione "," Posizione ":" Autorizzazione "}]}," ID ":" GAPIRPC "}] '

Al secondo clic del risultato è

[{"ID": "GAPIRPC", "Risultato": {"ID": "1115793426680xxxx", "Email": "xxxxx@gmail.com", "verified_email": true}}]

Ecco il codice per la pagina che sto 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>-->

.

.

Potresti spiegare perché avrei ricevuto un 'login richiesto' sulla prima esecuzione del codice e un'autenticazione di successo sulla seconda esecuzione?

Answer 1

A causa delle parentesi immediatamente dopo "Autorizzato" nella chiamata a gapi.auth.authorize, la callback Auturied () viene eseguita immediatamente, prima della chiamata a gapi.auth.authorize.

Inoltre, nel tuo gestore Auturizzato () è necessario verificare se il controllo dell'autorizzazione con immediato: vero successo; Per ulteriori dettagli, consultare la documentazione di riferimento qui:

https://develes.google.com/api- Client-Library / JavaScript / Riferimento / Riferimento # GapiauthAuthorize

Si riferisce anche alla sezione sul blocco pop-up qui:

https://developers.google.com/api- Client-Library / JavaScript / Caratteristiche / Authentication # Popup

Quando l'autorizzazione "immediata" non riesce, la richiamata autorizzata verrà invocata con un oggetto null token o un oggetto token contenente un campo "Errore"; In questi casi è necessario presentare un elemento di interfaccia utente, l'utente può fare clic su cui eseguirà nuovamente la chiamata gapi.auth.authorize ma con "immediato" impostato su false (o omesso). Ciò consente di aprire il pop-up di autorizzazione senza eseguire l'aful del blocco pop-up del tuo browser.