Javascript 中的 Google API

IT技术 javascript google-api
2021-03-04 06:50:30

我正在尝试使用 javascript 从谷歌获取日历信息。我已经阅读了“操作方法”手册。他们没有帮助。即使是这个“有用的”复制粘贴代码(用于授权)也没有。有人会教我如何使用google api吗?也许有人有一些样品要分享

这个漂亮的 js 代码:

<html>
<button id="authorize-button" onclick='handleAuthClick()'>Authorize</button>

<script type="text/javascript">
    var clientId = '***';
    var apiKey = '***';
    var scopes = 'https://www.googleapis.com/auth/plus.me';

    function handleClientLoad() {
        gapi.client.setApiKey(apiKey);
        window.setTimeout(checkAuth,1);
    }

    function checkAuth() {
        gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
    }

    function handleAuthResult(authResult) {
        var authorizeButton = document.getElementById('authorize-button');
        if (authResult && !authResult.error) {
            authorizeButton.style.visibility = 'hidden';
            makeApiCall();
        } else {
            authorizeButton.style.visibility = '';
            authorizeButton.onclick = handleAuthClick;
        }
    }

    function handleAuthClick(event) {
        // Step 3: get authorization to use private data
        gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
        return false;
    }

    // Load the API and make an API call.  Display the results on the screen.
    function makeApiCall() {
        // Step 4: Load the Google+ API
        gapi.client.load('plus', 'v1', function() {
            // Step 5: Assemble the API request
            var request = gapi.client.plus.people.get({
            'userId': 'me'
            });
            // Step 6: Execute the API request
            request.execute(function(resp) {
            var heading = document.createElement('h4');
            var image = document.createElement('img');
            image.src = resp.image.url;
            heading.appendChild(image);
            heading.appendChild(document.createTextNode(resp.displayName));

            document.getElementById('content').appendChild(heading);
            });
        });
    }
</script>

错误消息(来自控制台):

 'Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').'

所以我坚持“gapi.auth.authorize”。之后没有任何效果

4个回答

根据您收到的错误,我的猜测是您没有在从中获取客户端 IDGoogle API 控制台正确配置您的 Javascript Origin ,和/或您正在尝试从文件系统运行您的脚本通过网络服务器,即使是运行在localhost. 就我所知,Google API 客户端不接受来自文件系统或任何未配置为在提供的客户端 ID 下请求授权的域的授权请求。

出于调试目的,如果您安装了 Ruby,只需 cd 到 index.html 文件所在的文件夹并运行ruby -run -e httpd .(不要错过点),这将启动一个可在http://localhost:8080/.
2021-04-22 06:50:30
我应该说它对我帮助很大。请在服务器中部署相同的 html 文件。
2021-04-24 06:50:30
是的。我使用文件系统中的js。谢谢。我会去尝试从本地主机加载
2021-05-06 06:50:30
似乎有一种方法可以使用 CORS 从文件系统中使其工作:github.com/google/google-api-javascript-client/issues/46
2021-05-12 06:50:30
在本地主机上我仍然有同样的错误。我不完全理解这里的答案。您如何“配置”域以接受授权,您的客户端 ID 是什么?google api 控制台不起作用。
2021-05-20 06:50:30

谷歌 API 控制台参考:

在 Web 应用程序的客户端 ID 中:

Javascript 起源: http://localhost:3000/


浏览器应用程序的关键:

推荐人: http://localhost:3000/

本地主机将工作 100%

您如何在加载 youtube iframe 的 html 文件中实现这一点?
2021-05-16 06:50:30

在我的本地 Web 服务器中运行 html 文件后,我遇到了同样的错误,并且如您所愿,问题解决了。

我为 Web 应用程序创建了凭据,并使用“ http://localhost:5000 ”字符串将以下值都设置为我的本地

"Authorized JavaScript origins" 
"Authorized redirect URIs

我也检查了 json 文件。结果我得到了以下json文件。

{"web":
 {
    "client_id":"myClientID",
    "project_id":"my-project",
    "auth_uri":"https://accounts.google.com/o/oauth2/auth",
    "token_uri":"https://accounts.google.com/o/oauth2/token",
    "auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs",
    "client_secret":"XqXmgQGrst4xkZ2pgJh3Omxg",
    "redirect_uris":["http://localhost:5000"],
    "javascript_origins":["http://localhost:5000"]
 }

}

https://developers.google.com/drive/v2/web/auth/web-client

当从本地文件查询时,有些 API 可以正常工作,但有些则不行。为了响应诸如您的错误,请尝试从 Web 服务器提供您的文件。如果您需要快速运行的 Web 服务器,请使用 Python 的内置 HTTP 服务器(Mac OSX 和 Linux 系统已预装 Python)。此 HTTP 服务器可以将您系统中的任何目录转换为您的 Web 服务器目录。cd进入您的项目目录并运行以下命令: python -m SimpleHTTPServer 3000末尾的数字是您的 http 服务器将启动的端口号,您可以更改该端口号。在我们的示例中,您的目录将来自:http://localhost:3000