Question

我正在尝试使用Oauth2从我的javascript客户端访问一些谷歌API。我已经成功地让用户对请求进行身份验证，但是在运行下面的代码时会出现一些意想不到的行为，这是我想要了解的。当我第一次点击“授权”按钮时，结果是：

'[{“error”：{“code”：401，“message”：“需要登录”，“数据”：[{“domain”：“global”，“reason”：“required”，“message” “：”需要登录“，”locationType“：”标题“，”位置“：”授权“}]}，”id“：”gapiRpc“}]'

第二次点击结果是

[{“id”：“gapiRpc”，“result”：{“id”：“1115793426680xxxx”，“email”：“xxxxx@gmail.com”，“verified_email”：true}}]

这是我正在测试的页面的代码

<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

由于在对gapi.auth.authorize的调用中“authed”之后的括号，在调用gapi.auth.authorize之前立即运行authed（）回调。

此外，在您的authed（）处理程序中，您需要检查以立即：true的授权检查是否成功;有关详细信息，请参阅此处的参考文档：

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

另请参阅弹出窗口阻止部分：

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

当“立即”授权失败时，将使用空令牌对象或包含“错误”字段的令牌对象调用authed回调;在这些情况下，您需要提供用户可以单击的用户界面元素，该元素将重新运行gapi.auth.authorize调用，但“immediate”设置为false（或省略）。这样可以打开授权弹出窗口，而不会与浏览器的弹出窗口阻止程序发生冲突。

如何正确使用Google的Javascript OAuth2.0库

1 个答案: