Web 使用Google login和calender

网页使用Google第三方登录和使用calender。使用JavaScript来实现。

1. 首先在Google API控制中心创建client id

首先在Google API 控制台选择或者创建一个项目。

当注册完之后根绝需要添加google API的范围。比如我需要google calendar所以我需要添加google calendar的API。一般是用google calendar选择../auth/calendar.events和../auth/calendar

然后创建 OAuth 客户端 ID, 选择创建web项目。已获授权的 JavaScript 来源和已获授权的重定向 URI可以写成http://localhost:5000。主要是根据大家的IP和port来确定的。当创建完之后会生成一个client_id。

2. 具体代码实现

切记在浏览器访问的时候输入的IP地址需要和你申请client id填写的IP相同。比如你申请写的http://localhost:5000，那么你浏览器打开的时候也需要用http://localhost:5000才能正常使用google login。

首先根绝官方文档来定义CSS的login button的样式：

<style type="text/css">
    body { padding: 2em; }
    /* Shared */
    .loginBtn {
        box-sizing: border-box;
        position: relative;
        /* width: 13em;  - apply for fixed size */
        margin: 0.2em;
        padding: 0 15px 0 46px;
        border: none;
        text-align: left;
        line-height: 34px;
        white-space: nowrap;
        border-radius: 0.2em;
        font-size: 16px;
        color: #FFF;
    }
    .loginBtn:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 34px;
        height: 100%;
    }
    .loginBtn:focus {
        outline: none;
    }
    .loginBtn:active {
        box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
    }
    /* Google */
    .loginBtn--google {
        /*font-family: "Roboto", Roboto, arial, sans-serif;*/
        background: #DD4B39;
    }
    .loginBtn--google:before {
        border-right: #BB3F30 1px solid;
        background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
    }
    .loginBtn--google:hover,
    .loginBtn--google:focus {
        background: #E74B37;
    }
</style>

然后我们来定义HTML的内容：

<body>
    <button class="loginBtn loginBtn--google" id="googleLogin">
        Login with Google
    </button>
    <button type="button" οnclick="signOut();">Sign out</button>
</body>

<script src="https://apis.google.com/js/api:client.js"></script>
<script>
    var googleUser = {}
    function initClient() {
        gapi.load('auth2', function(){
            auth2 = gapi.auth2.init({
                // 上一步获取的 client_id 
                client_id: '104xxxxxxxxxxxx', 
                cookiepolicy: 'single_host_origin',
                // scope 是需要获取的google api的权限
                // 可以请求除了默认的'profile' and 'email'之外的数据, 比如这里的calendar
                scope: 'profile https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/calendar.events'
            });
            // 当login button被点击之后执行function
            attachSignin(document.getElementById('googleLogin'));
        });
    }

    // 当页面load之后初始化client
    initClient();

    function attachSignin(element) {
        auth2.attachClickHandler(element, {}, function(googleUser) {
            // 可以查看详细信息
            console.log(googleUser);
            var profile = auth2.currentUser.get().getBasicProfile();
            console.log('ID: ' + profile.getId());
            console.log('Full Name: ' + profile.getName());
            console.log('Given Name: ' + profile.getGivenName());
            console.log('Family Name: ' + profile.getFamilyName());
            console.log('Image URL: ' + profile.getImageUrl());
            console.log('Email: ' + profile.getEmail());

            // 这里包含了请求的access_token
            var token = auth2.currentUser.get().getAuthResponse();
            console.log(token);
        }, function(erroe) {
            console.log(JSON.stringify(error, undefined, 2));
        });
    }
    //注销
    function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
            alert('用户注销成功');
        });
    }

</script>

Google calendar 的使用

Google calendar API 的使用链接。

获取calendar list

(我们一般是用的calendar id是google login之后的邮箱：

import requests
import json

# 从前端获取到的access_token
access_token = 'ya29.xxxxxxx'

# get the calendar list
response = requests.get(
    url = 'https://www.googleapis.com/calendar/v3/users/me/calendarList',
    headers = {
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + access_token
    }
)
response.raise_for_status()
print(response.json())

获取当前calendar的event list

import requests
import json

# 从前端获取到的access_token
access_token = 'ya29.xxxxxxx'
email = 'xxx@gmail.com'

# 获取email calendar的event list
response = requests.get(
    url = 'https://www.googleapis.com/calendar/v3/calendars/' + email + '/events',
    headers = {
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + access_token
    }
)

response.raise_for_status()
print(response.json())

添加新的event

值得注意的地方是需要把EVENT_TEXT转成json的格式。不然会报错。里面会返回event id和一系列有关这个event的东西。

import requests
import json

# 从前端获取到的access_token
access_token = 'ya29.xxxxxxx'
email = 'xxx@gmail.com'

EVENT_TEXT = {
    "summary": "hotel booking",
    "description": "make a hotel booking",
    "end": {
        "dateTime": "2019-10-17T23:14:31+11:00",
        "timeZone": "Australia/Sydney"
    },
    "start": {
        "dateTime": "2019-10-17T00:00:00+11:00",
        "timeZone": "Australia/Sydney"
    }
}


response = requests.post(
    url ='https://www.googleapis.com/calendar/v3/calendars/' + email +'/events',
    
    data = json.dumps(EVENT_TEXT),

    headers = {
        'Authorization': 'Bearer ' + access_token,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
)
response.raise_for_status()
print(response.json())

更新event

我们可以根绝insert返回的event id来更新这个事件。

import requests
import json

# 从前端获取到的access_token
access_token = 'ya29.xxxxxxx'
email = 'xxx@gmail.com'

event_id = 'xxxx'

# 改变了日期
EVENT_TEXT = {
    "summary": "Hotel",
    "description": "make a hotel booking",
    "end": {
        "dateTime": "2019-10-18T23:14:31+11:00",
        "timeZone": "Australia/Sydney"
    },
    "start": {
        "dateTime": "2019-10-18T00:00:00+11:00",
        "timeZone": "Australia/Sydney"
    }
}

# 更新event
response = requests.put(
    url ='https://www.googleapis.com/calendar/v3/calendars/' + email +'/events/' + event_id,
    
    data = json.dumps(EVENT_TEXT),

    headers = {
        'Authorization': 'Bearer ' + access_token,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
)
response.raise_for_status()
print(response.json())

删除event

import requests
import json

# 从前端获取到的access_token
access_token = 'ya29.xxxxxxx'
email = 'xxx@gmail.com'

event_id = 'xxxx'

# 删除event
response = requests.delete(
    url ='https://www.googleapis.com/calendar/v3/calendars/' + email +'/events/' + event_id,
    
    data = json.dumps(EVENT_TEXT),

    headers = {
        'Authorization': 'Bearer ' + access_token,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
)
response.raise_for_status()
print(response.json())

关于calendar还有很多用法，大家可以一起学习学习。