如何在无服务端环境下用JavaScript从Salesforce Calendar获取事件？

既然你只能用纯前端JS，还不能碰服务端或安装任何程序，那最优的方案就是用Salesforce的REST API配合OAuth 2.0 PKCE授权流程——这是目前前端安全调用Salesforce API的标准玩法，完全不需要后端支持。

1. 先在Salesforce中配置Connected App #

这是前提步骤，你需要有Salesforce的管理员权限（或者找管理员帮你操作），创建一个Connected App：

• 进入Salesforce Setup → Apps → App Manager → 新建Connected App
• 填写基本信息（名称、API名称等）
• 在"API (Enable OAuth Settings)"部分勾选"Enable OAuth Settings"
• 填写回调URL：就是你的Sharepoint页面的完整URL（比如https://your-sharepoint-site.com/pages/calendar-sync.aspx）
• 在"Selected OAuth Scopes"中添加：Access and manage your data (api)、Perform requests on your behalf at any time (refresh_token, offline_access)（如果需要长期自动同步的话）
• 一定要勾选"Require Proof Key for Code Exchange (PKCE)"（纯前端场景必须选，避免泄露敏感凭证）
• 保存后，记录下Consumer Key（后续JS代码要用到）

2. 前端JS实现授权与API调用 #

下面是完整的纯JS代码示例，你可以直接嵌入到Sharepoint页面的脚本区域：

第一步：处理OAuth授权流程 #

// 配置参数，替换成你自己的信息
const SF_DOMAIN = 'your-salesforce-domain.my.salesforce.com'; // 比如xxx.my.salesforce.com
const CLIENT_ID = 'your-connected-app-consumer-key';
const REDIRECT_URI = 'https://your-sharepoint-site.com/pages/calendar-sync.aspx';
const API_VERSION = 'v59.0'; // 用Salesforce最新稳定版本即可

// 生成PKCE需要的code verifier和challenge
function generateCodeVerifier() {
  const array = new Uint32Array(56 / 2);
  window.crypto.getRandomValues(array);
  return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
}

function generateCodeChallenge(verifier) {
  return window.crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier))
    .then(buffer => {
      let binary = '';
      const bytes = new Uint8Array(buffer);
      const len = bytes.byteLength;
      for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return btoa(binary)
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=+$/, '');
    });
}

// 处理Salesforce授权回调
function handleAuthCallback() {
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  if (code) {
    // 取出之前存在sessionStorage的code verifier
    const codeVerifier = sessionStorage.getItem('sf_code_verifier');
    if (codeVerifier) {
      exchangeCodeForToken(code, codeVerifier);
      // 清除URL里的code参数，避免重复处理
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  } else {
    // 没有授权码，跳转到Salesforce授权页面
    initiateAuthFlow();
  }
}

// 发起授权流程
async function initiateAuthFlow() {
  const codeVerifier = generateCodeVerifier();
  const codeChallenge = await generateCodeChallenge(codeVerifier);
  // 把verifier存在sessionStorage，后续换token要用
  sessionStorage.setItem('sf_code_verifier', codeVerifier);
  
  const authUrl = `https://${SF_DOMAIN}/services/oauth2/authorize?` + new URLSearchParams({
    response_type: 'code',
    client_id: CLIENT_ID,
    redirect_uri: REDIRECT_URI,
    code_challenge: codeChallenge,
    code_challenge_method: 'S256',
    scope: 'api refresh_token'
  });
  
  window.location.href = authUrl;
}

// 用授权码换取access token
function exchangeCodeForToken(code, codeVerifier) {
  fetch(`https://${SF_DOMAIN}/services/oauth2/token`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      client_id: CLIENT_ID,
      redirect_uri: REDIRECT_URI,
      code: code,
      code_verifier: codeVerifier
    })
  })
  .then(res => res.json())
  .then(data => {
    if (data.access_token) {
      // 把token存在sessionStorage（比localStorage更安全，关闭页面就失效）
      sessionStorage.setItem('sf_access_token', data.access_token);
      sessionStorage.setItem('sf_refresh_token', data.refresh_token);
      // 拿到token后直接调用API获取Events
      fetchSalesforceEvents(data.access_token);
    } else {
      console.error('获取token失败:', data.error_description);
    }
  })
  .catch(err => console.error('换token出错:', err));
}

第二步：调用API获取并渲染Events #

// 获取Salesforce日历事件
function fetchSalesforceEvents(accessToken) {
  // 用SOQL查询你需要的字段，可根据需求调整
  const soqlQuery = encodeURIComponent(`
    SELECT Id, Subject, StartDateTime, EndDateTime, Description, Who.Name, What.Name 
    FROM Event 
    WHERE StartDateTime >= TODAY 
    ORDER BY StartDateTime ASC
  `);
  
  fetch(`https://${SF_DOMAIN}/services/data/${API_VERSION}/query?q=${soqlQuery}`, {
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json'
    }
  })
  .then(res => res.json())
  .then(data => {
    if (data.records) {
      // 拿到数据后渲染到Sharepoint页面
      renderEvents(data.records);
    } else {
      console.log('没有找到符合条件的事件');
    }
  })
  .catch(err => {
    console.error('获取Events出错:', err);
    // 如果token过期，尝试用refresh token刷新
    refreshTokenAndRetry();
  });
}

// 刷新access token（避免用户频繁重新授权）
function refreshTokenAndRetry() {
  const refreshToken = sessionStorage.getItem('sf_refresh_token');
  if (refreshToken) {
    fetch(`https://${SF_DOMAIN}/services/oauth2/token`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams({
        grant_type: 'refresh_token',
        client_id: CLIENT_ID,
        refresh_token: refreshToken
      })
    })
    .then(res => res.json())
    .then(data => {
      if (data.access_token) {
        sessionStorage.setItem('sf_access_token', data.access_token);
        fetchSalesforceEvents(data.access_token);
      } else {
        // 刷新失败，重新发起授权
        initiateAuthFlow();
      }
    });
  } else {
    // 没有refresh token，引导用户重新授权
    initiateAuthFlow();
  }
}

// 把Events渲染到Sharepoint页面
function renderEvents(events) {
  // 你需要在Sharepoint页面里提前加一个带这个ID的容器
  const container = document.getElementById('sf-events-container');
  if (!container) return;
  
  container.innerHTML = '';
  events.forEach(event => {
    const eventCard = document.createElement('div');
    eventCard.className = 'sf-event-card'; // 可自定义样式
    eventCard.innerHTML = `
      <h3>${event.Subject}</h3>
      <p><strong>开始时间:</strong> ${new Date(event.StartDateTime).toLocaleString()}</p>
      <p><strong>结束时间:</strong> ${new Date(event.EndDateTime).toLocaleString()}</p>
      ${event.Who ? `<p><strong>关联联系人:</strong> ${event.Who.Name}</p>` : ''}
      ${event.What ? `<p><strong>关联对象:</strong> ${event.What.Name}</p>` : ''}
      ${event.Description ? `<p><strong>描述:</strong> ${event.Description}</p>` : ''}
    `;
    container.appendChild(eventCard);
  });
}

// 页面加载时自动执行
document.addEventListener('DOMContentLoaded', () => {
  const accessToken = sessionStorage.getItem('sf_access_token');
  if (accessToken) {
    // 已有token，直接拉取事件
    fetchSalesforceEvents(accessToken);
  } else {
    // 无token，处理授权流程
    handleAuthCallback();
  }
});

3. 关键注意事项 #

• CORS配置：在Salesforce的Connected App里，一定要把你的Sharepoint域名加到CORS Allow List（在Connected App的"API (Enable OAuth Settings)"下方），否则前端会出现跨域错误。
• 权限检查：确保你的Salesforce账号有读取Event对象的权限，Connected App的OAuth scopes也必须包含api权限。
• 安全提示：token存在sessionStorage里，虽比localStorage安全，但仍要注意XSS风险，建议在Sharepoint页面启用内容安全策略（CSP）。
• API版本：代码里的API_VERSION建议用Salesforce最新的稳定版本，可在Salesforce官方文档中查询当前最新版本。

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