65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 JavaScript 的 Google Calendar API

Schatak
starIconstarIconstarIconstarIconstarIcon

5.00/5 (9投票s)

2015年8月19日

CPOL

5分钟阅读

viewsIcon

115820

downloadIcon

3139

关于在项目中使用 Google 日历 API 的非常基础的介绍。本技巧将涵盖使用 JavaScript 进行 API 集成。

引言

Google 日历 API 是将 Google 日历添加到应用程序并操作事件、组织会议、在各种设备上同步日历的最简单方法。在这里，我将提供关于使用 JavaScript 进行 Google 日历 API 的基本概念。例如，您可以开发一个 Web 应用程序来创建或显示日历数据，或者一个桌面应用程序来将用户的日历与现有的桌面应用程序同步。您的应用程序可以是一个将日历体验带到新平台的设备。

注意：本文的概念来源于 Google 本身提供的 Google 日历 API 文档。在这里，这些概念以一种易于理解的方式为初学者进行了定义。

背景

GoogleAPIs

正如我们所知，Google 通过提供许多 API 使我们的生活更加便捷。这些 API 各有其用武之地。在这里，我将介绍 Google 的其中一个 API——Google 日历 API。Google 日历 API 允许程序执行通过 Google 日历 Web 界面提供的许多操作。使用此 API，可以搜索和查看公共日历事件。经过身份验证的会话可以访问私有日历，还可以创建、编辑和删除事件以及包含这些事件的日历。

在本文中，您将找到将 Google 日历 API 集成到您的应用程序中的分步指南。这里使用的是当前版本：Google 日历 API V3。

必备组件

  • 获取一个 Google 帐户。
  • 熟悉 Google 日历（作为用户）。
  • 熟悉 Google Cloud 控制台。
  • 具备 REST（REpresentational State Transfer，表述性状态转移）的基础知识。
  • 具备 JSON 数据格式的基础知识。
  • 创建 API 密钥和 ClientID 以标识应用程序。
  • 激活 Calendar API。
  • 管理项目、账单、配额（如果 API 是付费的）。
  • 凭据、访问、安全和身份验证
  • ? oAuth 2.0 ClientID
  • ? API 密钥（服务器或浏览器）

让我们来熟悉一下 Google Cloud 控制台及其产品。

Google 提供了有关开发者控制台及其使用方法的全部文档。无需重复所有步骤来与 Google 产品进行交互，但您可以在此处获得开始使用的概览。

首先，请访问这里查看 Google 为开发者提供的所有产品列表。现在，由于我们只对 Calendar API 感兴趣，请在此页面上查找它并单击。它将带您进入 Calendar API 文档。

在左侧面板中，您将看到可以用各种语言构建代码的列表。但这里是 JavaScript 的描述，所以请单击 JavaScript。您将看到开发示例应用程序的完整文档。

此外，您可以在左侧面板的“使用日历 API”部分下看到如何使用 OAuth 2.0 授权您的应用程序。这是一个分步指南，并且实现起来非常简单。每当您创建一个应用程序时，都需要在 Google Cloud 控制台（https://console.developers.google.com/）上注册它。此链接将要求您登录。

成功登录后，您将在左侧看到所有可用的选项。

完成控制台管理后，请记下 OAuth ClientID 和 API 密钥，这些将在您的应用程序中使用。

您可以使用 OAuth 2.0 客户端 ID 生成访问令牌。令牌包含一个唯一标识符。

或者

API 密钥，使用 API 密钥不需要用户采取行动或同意。API 密钥不授予对任何帐户信息的访问权限，也不用于授权。

对于已标识为公共的数据，例如公共日历或公共博客（即所有者设置为公开的信息），或者由 Google 服务（如 Google 地图或 Google 翻译）拥有的数据，请使用 API 密钥。

使用 JavaScript 客户端库进行 API 请求

使用 JavaScript 客户端库进行 API 请求的常用方法是：

  1. 应用程序加载 JavaScript 客户端库。
  2. 应用程序引用其 API 密钥，该密钥会验证应用程序与 Google 服务的连接。
  3. 如果应用程序需要访问用户的个人信息，它会打开一个与 Google 身份验证服务器的会话。身份验证服务器会打开一个对话框，提示用户授权使用个人信息。
  4. 应用程序加载 Google 服务的 API。
  5. 应用程序初始化一个请求对象（也称为服务对象），该对象指定 API 要返回的数据。
  6. 应用程序执行请求并处理 API 返回的数据。

日历概念

Google 日历基于几个基本概念构建，这些概念在实现过程中非常有用。Google 还提供了有关日历概念及其用例的完整文档，请点击此处。

我已经将其总结为一张图，以便于理解。

CalendarConcepts

Google 日历 API 模型

API 参考按资源类型组织。每种资源类型都有一个或多个数据表示形式和一个或多个方法。参见此链接。

资源和集合进一步包含可以直接与 API 调用一起使用的方法。参见此链接。

应用程序如何与 Google 交互

Using the Code

基本上，我们在 Google Cloud 控制台中设置的所有内容，现在都将在我们的应用程序中使用。此示例与 Google 文档使用的示例类似。

在 HTML 页面的 script 部分中，添加以下几行。ClientID 和 ApiKey 负责与 Google 数据库通信。

// Google api console clientID and apiKey 

 var clientId = '252751we734600-se6610ol8twerwern886jj7gc5m2ugaai.apps.googleuserecontent.com';
 var apiKey = 'AIzaSyCnk5CDEX3Pvwerwerwe0OpnVf4eW_Lmeere80';

 // enter the scope of current project (this API must be turned on in the Google console)
   var scopes = 'https://www.googleapis.com/auth/calendar';


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

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

// This is the resource we will pass while calling api function
var resource = {
            "summary": "My Event",
            "start": {
                "dateTime": today
            },
            "end": {
                "dateTime": twoHoursLater
            },
            "description":"We are organizing events",
            "location":"US",
            "attendees":[
            {
                    "email":"attendee1@gmail.com",
                    "displayName":"Jhon",
                    "organizer":true,
                    "self":false,
                    "resource":false,
                    "optional":false,
                    "responseStatus":"needsAction",
                    "comment":"This is my demo event",
                    "additionalGuests":3
                    
            },
            {    
                "email":"attendee2@gmail.com",
                    "displayName":"Marry",
                    "organizer":true,
                    "self":false,
                    "resource":false,
                    "optional":false,
                    "responseStatus":"needsAction",
                    "comment":"This is an official event",
                    "additionalGuests":3
            }
            ],
        };

function makeApiCall(){
gapi.client.load('calendar', 'v3', function () { // load the calendar api (version 3)
                var request = gapi.client.calendar.events.insert
                ({
                    'calendarId': '24tn4fht2tr6m86efdiqqlsedk@group.calendar.google.com', 
// calendar ID which id of Google Calendar where you are creating events. this can be copied from your Google Calendar user view.

                    "resource": resource 	// above resource will be passed here
                });                
}

在 html 页面上，使用 frame 显示日历。此 iframe 在 Google 日历用户界面中可供您使用。它将持续同步您的日历在您的应用以及 Google 帐户或任何其他关联设备中。

<button id="btnCreateEvents" class="btn btn-primary" onclick="makeApiCall();">
                    Create Events</button>  

<div id="divifm">
                    <iframe id="ifmCalendar" 
                    src="https://www.google.com/calendar/embed?
                    height=550&wkst=1&bgcolor=%23FFFFFF&
                    amp;src=24tn4fht2sssdssfdiqqlsedk%40group.calendar.google.com&
                    amp;color=%238C500B&ctz=Asia%2FCalcutta"
                        style="border-width: 0" width="950" 
                        height="520" frameborder="0" scrolling="no">
                    </iframe>
                </div>

您的应用程序将看起来像这样：

我已附上全部代码。您可以下载并进行操作。这里，我只重点介绍了在与 API 通信时需要注意的重要区域。

日历设置：您可以使用 Google 日历中的界面来自定义您的日历，如下所示：

关注点

通过集成此日历 API，我学会了如何使用 Google API。我描述了所有已有的信息，但分散在不同的地方。在学习过程中，我花费了大量时间来整合这些概念。我在这里发布是为了节省您在这同一件事情上花费的时间。

有任何问题吗？

如果您有任何问题，请随时提出。

谢谢！

© . All rights reserved.