无组织支持下，如何在React中对接Google Calendar API与Zoom会议功能

一、Google Calendar API 个人授权对接 #

无需组织支持的核心是采用Google OAuth 2.0个人授权流程，具体步骤如下：

1. Google Cloud配置准备

   • 登录Google Cloud控制台，创建新项目
   • 搜索并启用「Google Calendar API」
   • 进入「OAuth同意屏幕」，选择「外部」类型，填写应用名称、联系方式等必要信息，添加你的个人邮箱作为测试用户
   • 创建「OAuth客户端ID」，应用类型选「Web应用」，将React项目的本地/生产域名添加至「已授权的JavaScript来源」和「已授权的重定向URI」

2. React项目中实现授权与API调用

   • 安装依赖：npm install @react-oauth/google axios
   • 初始化Google授权：

     import { GoogleOAuthProvider } from '@react-oauth/google';
     import { GoogleLogin } from '@react-oauth/google';
     
     function App() {
       return (
         <GoogleOAuthProvider clientId="你的OAuth客户端ID">
           {/* 项目其他组件 */}
         </GoogleOAuthProvider>
       );
     }
     

   • 实现登录并获取访问令牌：

     const handleGoogleLogin = async (response) => {
       const accessToken = response.access_token;
       // 用sessionStorage存储令牌，避免持久化带来的安全风险
       sessionStorage.setItem('googleAccessToken', accessToken);
     };
     
     <GoogleLogin
       onSuccess={handleGoogleLogin}
       onError={() => console.log('Google登录失败')}
       scope="https://www.googleapis.com/auth/calendar.events" // 仅申请必要权限
     />
     

   • 调用API创建日历事件：

     import axios from 'axios';
     
     const createCalendarEvent = async (eventData) => {
       const token = sessionStorage.getItem('googleAccessToken');
       try {
         const res = await axios.post(
           'https://www.googleapis.com/calendar/v3/calendars/primary/events',
           eventData,
           { headers: { Authorization: `Bearer ${token}` } }
         );
         return res.data;
       } catch (err) {
         console.error('创建日历事件失败:', err);
       }
     };
     

二、Zoom API 个人授权对接 #

Zoom支持个人OAuth应用，无需组织管理员权限即可对接：

1. Zoom Marketplace配置准备

   • 登录Zoom Marketplace，创建「OAuth个人应用」
   • 填写应用基础信息，添加与React项目域名一致的重定向URI
   • 申请必要权限：meeting:write（创建会议）、user:read（获取用户信息）
   • 记录生成的Client ID和Client Secret

2. React项目中实现授权与API调用

   • 实现授权跳转（Zoom OAuth需前端跳转至官方授权页面）：

     const zoomAuthUrl = `https://zoom.us/oauth/authorize?response_type=code&client_id=你的Zoom Client ID&redirect_uri=你的重定向URI&scope=meeting:write user:read`;
     
     const handleZoomAuth = () => {
       window.location.href = zoomAuthUrl;
     };
     

   • 在重定向页面（如/zoom-callback）换取访问令牌：

     import axios from 'axios';
     import { useEffect } from 'react';
     
     useEffect(() => {
       const code = new URLSearchParams(window.location.search).get('code');
       if (code) {
         exchangeCodeForToken(code);
       }
     }, []);
     
     const exchangeCodeForToken = async (code) => {
       try {
         const res = await axios.post('https://zoom.us/oauth/token', null, {
           params: {
             grant_type: 'authorization_code',
             code: code,
             redirect_uri: '你的重定向URI',
           },
           auth: {
             username: '你的Zoom Client ID',
             password: '你的Zoom Client Secret',
           },
         });
         const accessToken = res.data.access_token;
         sessionStorage.setItem('zoomAccessToken', accessToken);
         // 跳转回主页面
         window.location.href = '/';
       } catch (err) {
         console.error('换取Zoom令牌失败:', err);
       }
     };
     

   • 调用Zoom API创建会议：

     const createZoomMeeting = async (meetingData) => {
       const token = sessionStorage.getItem('zoomAccessToken');
       try {
         const res = await axios.post(
           'https://api.zoom.us/v2/users/me/meetings',
           meetingData,
           { headers: { Authorization: `Bearer ${token}` } }
         );
         return res.data;
       } catch (err) {
         console.error('创建Zoom会议失败:', err);
       }
     };
     

三、两者联动：创建Zoom会议后同步至Google Calendar #

核心逻辑为先创建Zoom会议，再将会议信息同步到Google日历：

const createMeetingAndSyncCalendar = async (formData) => {
  // 1. 创建Zoom会议
  const zoomMeeting = await createZoomMeeting({
    topic: formData.title,
    type: 2, // 预约会议类型
    start_time: formData.startTime, // ISO格式时间字符串
    duration: formData.duration, // 会议时长（分钟）
    settings: {
      join_before_host: true,
      auto_recording: 'cloud',
    },
  });

  if (!zoomMeeting) return;

  // 2. 同步会议信息到Google Calendar
  const calendarEvent = await createCalendarEvent({
    summary: formData.title,
    description: `Zoom会议链接：${zoomMeeting.join_url}\n会议ID：${zoomMeeting.id}`,
    start: {
      dateTime: zoomMeeting.start_time,
      timeZone: 'Asia/Shanghai', // 根据实际时区调整
    },
    end: {
      dateTime: new Date(new Date(zoomMeeting.start_time).getTime() + formData.duration * 60000).toISOString(),
      timeZone: 'Asia/Shanghai',
    },
    attendees: formData.attendees.map(email => ({ email })),
  });

  if (calendarEvent) {
    console.log('会议创建并同步日历成功');
  }
};

关键注意事项 #

• 令牌安全：优先用sessionStorage存储令牌，避免localStorage带来的XSS攻击风险，必要时可添加令牌过期刷新逻辑（Google和Zoom令牌有效期均约1小时）
• 权限最小化：仅申请业务必需的API权限，降低安全风险
• 测试限制：Google OAuth外部应用未通过审核前仅支持测试用户；Zoom个人应用默认仅支持个人账号使用

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