使用 gapi.load 时 Google API 未捕获异常答案

【问题标题】：Google API Uncaught exception when use gapi.load使用 gapi.load 时 Google API 未捕获异常
【发布时间】：2017-12-30 07:52:51
【问题描述】：

当我使用这种类型的初始化时：

var auth2;
gapi.load('auth2', function() {
    gapi.auth2.init({
    client_id: 'MY_CLIENT_ID.apps.googleusercontent.com',
}).then(function(){
    auth2 = gapi.auth2.getAuthInstance();
    console.log(auth2.isSignedIn.get()); //now this always returns correctly        
    });
});

我收到以下错误：

uncaught exception: gapi.auth2.ExternallyVisibleError: Missing required parameter 'client_id'  (unknown)
TypeError: auth2 is undefined

但如果我使用元标记进行初始化

<meta name="google-signin-client_id" content="MY_CLIENT_ID.apps.googleusercontent.com">

这可行，但 auth2.isSignedIn.get() 给了我不一致的值。

我该如何解决这个问题？

【问题讨论】：

标签： javascript google-api google-signin google-developers-console google-api-js-client

【解决方案1】：

您可能已经包含以下代码行来显示 Google 的登录按钮。

<div class="g-signin2" data-onsuccess="onSignIn"></div>

如果是这样，请将其从您的 html 页面中删除并检查您是否仍然在控制台中收到错误。

【讨论】：

但这并不能解决手头的问题。 Google Docs 表示您添加了该类。因此，如果它被删除，您的按钮的 CSS 组件将不会呈现
你需要自己添加按钮。
谷歌模式。您应该确保在使用他们的身份验证方法登录时，使用他们的按钮和徽标以清楚起见。

【解决方案2】：

基于 Krishna 的回答，具体来说，您要删除 data-onsuccess="onSignIn"></div> 部分，然后创建一个 custom button：

<div id="my-signin2"></div>
<script>
    function renderButton() {
    gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
    });
    }
</script>

由于我的登录帐号是 handled server-side，因此我添加了另一个 jquery 函数来重定向到我的后端流程，但您可以进行相应调整：

    <script>
    $('#my-signin2').click(function() {
        // if your sign in is handled by your backend:
        location.href = "/signin";

        // signInCallback defined in step 6.
        // auth2.grantOfflineAccess().then(signInCallback);
    });
</script>

【讨论】：