React中使用refresh token调用Google Calendar API实现静默授权预定同步

核心错误认知纠正 #

你当前的方案逻辑从根上就存在问题：

• Google OAuth2的refresh token、client secret属于服务端敏感凭证，绝对不能暴露在前端React代码里，一旦泄露任何人都可以操控你关联的Google日历账号，会导致严重的房源预订数据错乱问题
• 前端gapi库的授权流程是针对用户授权自己的谷歌账号的场景，你要的是静默使用企业自身谷歌账号操作日历，本来就不该在前端做授权
• 你之前Node.js服务端的逻辑是完全正确的，只要把日历操作的逻辑放到后端，React前端只需要在用户支付成功后调用自有后端接口即可，全程不会出现任何谷歌授权弹窗给用户

具体实现方案 #

第一步：保留现有Node.js服务端的日历操作逻辑 #

你已经跑通的Node.js代码不需要修改，只要补充两个业务接口即可：

• 预订成功后创建日历事件的接口
• 查询日历时间段是否冲突的接口（可选，用于提交订单前提前判断房源是否被预订）

你已有的基础代码不用改动，补充事件创建的逻辑示例：

// 新增创建日历事件的函数
async function createCalendarEvent(checkinTime, checkoutTime, roomInfo, orderId) {
  const event = {
    summary: `房源预订：${roomInfo} 订单号${orderId}`,
    start: {
      dateTime: checkinTime,
      timeZone: 'Asia/Shanghai', // 替换为你对应业务的时区
    },
    end: {
      dateTime: checkoutTime,
      timeZone: 'Asia/Shanghai',
    },
  }
  const res = await calendar.events.insert({
    calendarId: 'primary', // 替换为你绑定Airbnb的对应日历ID
    resource: event,
  })
  return res.data
}

把这个函数封装成HTTP接口即可，比如POST /api/order/create-calendar-event，参数传入入住时间、退房时间、房源信息、订单号即可。

第二步：React前端只需要调用自有后端接口 #

前端不用引入任何gapi相关脚本，也不用做任何谷歌授权操作，用户支付成功后直接调用你自己的后端接口就行：

// React中支付成功后的处理逻辑
const handlePaySuccess = async (orderInfo) => {
  try {
    // 调用自有后端接口，触发日历事件创建
    await fetch('/api/order/create-calendar-event', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        checkinTime: orderInfo.checkin,
        checkoutTime: orderInfo.checkout,
        roomInfo: orderInfo.roomName,
        orderId: orderInfo.orderId,
      })
    })
    // 后续成功提示等业务逻辑
    alert('预订成功')
  } catch (err) {
    console.error('日历同步失败', err)
  }
}

你之前前端代码跑不通的原因 #

• 你把refresh_token当成access_token传入了，这两个是完全不同的凭证，refresh_token只能用来兑换access_token，不能直接作为调用接口的凭证
• 前端gapi库不支持用refresh_token做静默授权，Google的OAuth2策略本来就禁止前端使用refresh_token，防止凭证泄露
• clientKey这个参数在gapi的client.init里根本不存在，正确参数是apiKey，而且apiKey只能用来调用公开的谷歌接口，不能用来操作私有日历数据

注意事项 #

• 所有谷歌相关的敏感凭证（client ID、client secret、refresh token）都要存在服务端的环境变量里，不要硬编码，避免泄露
• 日历ID要设置为和Airbnb同步的对应日历，不要用错
• 建议增加接口调用失败的重试逻辑，避免同步失败导致超售

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