Как правильно использовать библиотеку Google Javascript OAuth2.0

Question

Я пытаюсь получить доступ к некоторым API Google из моего клиента javascript, используя Oauth2.Мне удалось заставить пользователя проверять подлинность запросов, но при выполнении приведенного ниже кода возникает некоторое неожиданное поведение, которое я хотел бы понять.Когда я нажимаю кнопку "авторизоваться" в первый раз, результатом является:

'[ { "ошибка":{ "код":401, "сообщение":"Требуется войти в систему", "данные":[ { "домен":"глобальный", "разумный":"требуется", "сообщение":"Требуется войти в систему", "LocationType":"заголовок", "местоположение":"Авторизация" } ] }, "идентификатор":"gapiRpc" } ] '

при втором нажатии результат будет следующим

[ { "идентификатор":"gapiRpc", "результат":{ "идентификатор":"1115793426680xxxxx", "электронная почта":"xxxxx@gmail.com", "проверенная_ почта":верно } } ]

вот код для страницы, которую я тестирую

<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>-->

Не могли бы вы, пожалуйста, объяснить, почему я получаю сообщение "требуется вход в систему" при первом выполнении кода и успешную аутентификацию при втором выполнении?

Answer 1

Из-за круглых скобок сразу после "authed" в вызове gapi.auth.authorize обратный вызов authed() выполняется немедленно, до вызова gapi.auth.authorize .

Кроме того, в вашем обработчике authed() вам нужно проверить, выполняется ли проверка авторизации с помощью immediate:истинный успех;для получения более подробной информации смотрите справочную документацию здесь:

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

Также ознакомьтесь с разделом о блокировке всплывающих окон здесь:

https://developers.google.com/api-client-library/javascript/features/authentication#popup

Когда "немедленная" авторизация завершается неудачей, авторизованный обратный вызов будет вызван с нулевым объектом токена или объектом токена, содержащим поле "ошибка";в этих случаях вам необходимо представить элемент пользовательского интерфейса, который пользователь может щелкнуть, который повторно запустит вызов gapi.auth.authorize, но с "немедленным" значением false (или опущенным).Это позволяет открывать всплывающее окно авторизации, не сталкиваясь с блокировщиком всплывающих окон вашего браузера.