请求帮助：用JavaScript解析Dropbox重定向URI中的access_token

需求说明 #

• 处理Dropbox用户授权后发来的重定向URL，示例URL：

  https://myServer/dropbox.html#access_token=sl.BpYUz-Ey3Sxh3futS_EbAOhJcX_opQ4NB8nbjAawJcoH99q1L8952LaEps0rGt_W_ARy0ZDD38LiBckTdqi3RATbT8evA57ysqvQO8o1V4z76MjiVA2VzBMbMi_84JiFxXA4tie0&token_type=bearer&expires_in=14400&scope=account_info.read+files.content.write+files.metadata.read+files.metadata.write&uid=60558915&account_id=dbid%3AAADgKd0bJIMHUI_EmJFGWw9UTPV_CEkLlhg&state=NameOfmyFile
  

• 提取URL哈希部分中的access_token参数值
• 将提取到的token传入FileMaker脚本存储到用户偏好

完善后的代码方案 #

方案1：使用原生URLSearchParams解析（推荐）

这个方法利用浏览器原生API处理哈希参数，兼容性好且能应对参数顺序变化等情况：

// 获取URL哈希部分并去掉开头的#
const hashParams = new URLSearchParams(window.location.hash.slice(1));
// 提取access_token
const TheToken = hashParams.get('access_token');

if (TheToken) {
  // 将token传入FileMaker脚本（替换为你的实际文件名和脚本名）
  const fmpUri = `fmp://$/YourFileMakerFile.fmp12?script=SaveToken&param=${encodeURIComponent(TheToken)}`;
  window.location.href = fmpUri;
} else {
  console.error("未检测到access_token参数");
}

方案2：正则表达式匹配

如果需要更直接的字符串匹配，也可以用正则提取：

const hash = window.location.hash;
// 匹配access_token=后面直到第一个&的内容
const tokenMatch = hash.match(/access_token=([^&]+)/);
let TheToken = null;

if (tokenMatch) {
  TheToken = tokenMatch[1];
  // 传入FileMaker的逻辑
  const fmpUri = `fmp://$/YourFileMakerFile.fmp12?script=SaveToken&param=${encodeURIComponent(TheToken)}`;
  window.location.href = fmpUri;
} else {
  console.error("未找到access_token参数");
}

关键注意事项 #

• 必须用encodeURIComponent对token编码，避免token中的特殊字符（如-、_、=等）破坏fmp:uri的格式
• 替换代码中的YourFileMakerFile.fmp12为你的FileMaker文件名，SaveToken为负责存储token的脚本名称
• 测试时可通过Live Server构造带哈希参数的URL访问你的页面，验证解析逻辑是否正常

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