使用 javascript 的谷歌身份验证失败答案

【问题标题】：google authentication using javascript fails使用 javascript 的谷歌身份验证失败
【发布时间】：2019-03-17 19:18:07
【问题描述】：

尝试使用gapi函数实现google身份验证（oauth2）但下面的代码失败

<html>
  <head></head>
  <body>
    <script type="text/javascript">
      function handleClientLoad() {
        // Loads the client library and the auth2 library together for efficiency.
        // Loading the auth2 library is optional here since `gapi.client.init` function will load
        // it if not already loaded. Loading it upfront can save one network request.
        gapi.load('client:auth2', initClient);
      }

      function initClient() {
        // Initialize the client with API key and People API, and initialize OAuth with an
        // OAuth 2.0 client ID and scopes (space delimited string) to request access.
        gapi.client.init({
            apiKey: 'APP_ID',
            discoveryDocs: ["https://people.googleapis.com/$discovery/rest?version=v1"],
            clientId: 'CLEINT_ID.apps.googleusercontent.com',
            scope: 'profile'
        }).then(function () {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        });
      }

      function updateSigninStatus(isSignedIn) {
        // When signin status changes, this function is called.
        // If the signin status is changed to signedIn, we make an API call.
        if (isSignedIn) {
          makeApiCall();
        }
      }

      function handleSignInClick(event) {
        // Ideally the button should only show up after gapi.client.init finishes, so that this
        // handler won't be called before OAuth is initialized.
        gapi.auth2.getAuthInstance().signIn();
      }

      function handleSignOutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      function makeApiCall() {
        // Make an API call to the People API, and print the user's given name.
        gapi.client.people.people.get({
          'resourceName': 'people/me',
          'requestMask.includeField': 'person.names'
        }).then(function(response) {
          console.log('Hello, ' + response.result.names[0].givenName);
        }, function(reason) {
          console.log('Error: ' + reason.result.error.message);
        });
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
    <button id="signin-button" onclick="handleSignInClick()">Sign In</button>
    <button id="signout-button" onclick="handleSignOutClick()">Sign Out</button>
  </body>
</html>

并显示错误

在“DOMWindow”上执行“postMessage”失败：提供的目标源（“file://”）与接收窗口的源（“null”）不匹配。

我哪里错了？

【问题讨论】：

标签： javascript google-oauth gmail-api google-api-nodejs-client

【解决方案1】：

根据link，如果 iFrame 尚未加载，您可能会收到该错误，如果一切仍然正常，您可以忽略它，因为它会多次尝试通信。如果目标站点忘记包含内容窗口脚本文件，就会发生这种情况。

也来自这个帖子：Google API in Javascript

根据您收到的错误，我的猜测是您没有在 Google API console 上正确配置您的 Javascript Origin，您从中获得了您的客户端 ID，和/或您正在尝试从文件系统而不是通过 Web 服务器，甚至是在 localhost 上运行的服务器。据我所知，Google API 客户端不接受来自文件系统或任何未配置为根据提供的客户端 ID 请求授权的域的授权请求。

【讨论】：