如何在React中借助Fetch API及Access Token创建Google日历事件

以下是修改后的完整代码，已集成Fetch API创建Google日历事件的逻辑：

import React, { useEffect, useState } from 'react'
import jwt_decode from "jwt-decode";

const CLIENT_ID = '25262567698-tsaoo718sc35n3k25os074b17jklc5rm.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/calendar';

const TEST_EVENT = {
    'summary': 'Example Event',
    'location': 'New York, NY',
    'description': 'a description for this',
    'start': {
        'dateTime': '2023-03-26T10:00:00-04:00',
        'timeZone': 'America/New_York',
    },
    'end': {
        'dateTime': '2023-03-26T11:00:00-04:00',
        'timeZone': 'America/New_York',
    },
};

const TestGIS = (props) => {
    const [user, setUser] = useState({});
    const [tokenClient, setTokenClient] = useState({});

    function handleCallbackResponse(response) {
        console.log('encoded JWT ID token:' + response.credential);
        var userObject = jwt_decode(response.credential);
        console.log(userObject)
        setUser(userObject);
        document.getElementById('signInDiv').hidden = true;
    }

    function handleSignOut(event) {
        setUser({});
        document.getElementById('signInDiv').hidden = false;
    }

    // 使用Access Token创建日历事件的核心函数
    async function createEventWithToken(accessToken, eventData) {
        try {
            const response = await fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${accessToken}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(eventData)
            });

            if (!response.ok) {
                const errorDetails = await response.json();
                throw new Error(`创建失败: ${errorDetails.error.message}`);
            }

            const createdEvent = await response.json();
            console.log('事件创建成功:', createdEvent);
            alert('日历事件创建成功！');
        } catch (error) {
            console.error('创建事件出错:', error);
            alert(`创建事件失败: ${error.message}`);
        }
    }

    useEffect(() => {
        /* global google */
        const google = window.google;
        google.accounts.id.initialize({
            client_id: CLIENT_ID,
            callback: handleCallbackResponse
        })
        google.accounts.id.renderButton(
            document.getElementById('signInDiv'),
            { theme: 'outline', size: 'large' }
        );

        setTokenClient(
            google.accounts.oauth2.initTokenClient({
                client_id: CLIENT_ID,
                scope: SCOPES,
                callback: (tokenResponse) => {
                    console.log('tokenResponse=', tokenResponse);
                    if (tokenResponse && tokenResponse.access_token) {
                        // 获取到有效Token后触发事件创建
                        createEventWithToken(tokenResponse.access_token, TEST_EVENT);
                    }
                }
            })
        );
    }, []);

    function createCalendarEvent() {
        tokenClient.requestAccessToken();
    }

    return (
        <div className='main-cover' style={{ backgroundColor: 'lightblue', width: '100%', height: '100%', zIndex: '10000' }}>
            <div id="signInDiv"></div>
            {Object.keys(user).length !== 0 &&
                <button onClick={handleSignOut}>Sign Out</button>
            }
            {Object.keys(user).length !== 0 &&
                <div>
                    <img src={user.picture} alt="User avatar" />
                    <h3>{user.name}</h3>
                    <button onClick={createCalendarEvent}>Create calendar event</button>
                </div>
            }
        </div>
    )
}
export default TestGIS

核心实现细节 #

1. API端点与权限 #

我们调用的是用户主日历的事件创建接口：

https://www.googleapis.com/calendar/v3/calendars/primary/events

若需操作其他日历，将primary替换为对应日历ID即可。当前使用的https://www.googleapis.com/auth/calendar权限支持创建/修改/删除事件，若仅需创建功能，可改用更严格的https://www.googleapis.com/auth/calendar.events权限。

2. 请求头配置 #

必须包含两个关键请求头：

• Authorization: Bearer ${accessToken}：通过Access Token完成身份验证
• Content-Type: application/json：告知API请求体为JSON格式

3. 异步请求处理 #

使用async/await简化异步流程：

• 检查响应状态码，非2xx状态时解析API返回的错误信息并抛出
• 成功创建后解析返回的事件数据，可用于后续扩展（如跳转至日历事件页面）
• 捕获网络或API错误，给用户明确的提示信息

4. 流程逻辑 #

用户点击创建按钮后，tokenClient.requestAccessToken()会触发权限请求（若用户未授权过），获取有效Token后，在回调函数中直接调用createEventWithToken完成事件创建。

内容的提问来源于stack exchange，提问作者afshin