Zendesk应用中如何基于安全设置调用JavaScript函数

你当前的代码存在5个核心问题，按以下规则修正即可正常运行：

• 配置项属性名大小写错误：ZAF（Zendesk App Framework）的请求配置中接口地址字段为小写url，不是大写URL
• 参数名不匹配：你在manifest中声明的安全参数名为api_token，代码中误写为apiKey，无法匹配到配置值
• 语法逻辑错误：btoa{{apiKey}}属于无效语法，btoa作为函数调用需要搭配圆括号，且你手动在前端代码中拼接安全参数的逻辑本身就不符合Zendesk安全参数的调用规则
• 安全参数调用方式错误：所有标记secure: true的参数不会暴露在前端JS上下文中，无法通过常规变量读取、模板字符串插值的方式获取，必须通过ZAF客户端的安全请求机制自动注入
• Basic鉴权格式错误：Zendesk标准API的Basic认证需要拼接登录邮箱/token:api_token的完整字符串再做base64编码，仅传入token值会直接鉴权失败

正确实现步骤 #

1. 保留你当前manifest中api_token的secure配置即可，不需要调整，注意后续代码中引用的参数名必须和name字段完全一致。
2. 不要使用原生fetch、第三方AJAX库发起需要用到安全参数的请求，必须使用ZAF初始化后的客户端实例的request方法发起请求。
3. 安全参数的占位符直接写在请求配置的对应位置，使用Zendesk自有安全模板语法完成base64编码，框架会在发起请求时自动替换加密存储的真实参数值，不会在浏览器端暴露敏感信息。

正确代码示例：

// 初始化ZAF客户端，Zendesk应用必须提前完成初始化
const client = ZAFClient.init();

const requestConfig = {
  url: "替换为你实际的接口请求地址",
  headers: {
    // 注意：这里不要用ES6模板字符串，直接写普通字符串，使用ZAF安全模板语法调用btoa
    // 将下方的`your_login_email@example.com`替换为你实际用于接口鉴权的Zendesk账号邮箱
    "Authorization": "Basic {{btoa 'your_login_email@example.com/token:' api_token}}"
  },
  secure: true, // 必须开启该标记，框架才会注入secure类型的配置参数
  type: 'GET',
  dataType: 'json'
};

// 发起请求
client.request(requestConfig)
  .then(response => {
    // 这里写请求成功后的业务逻辑
    console.log('接口返回数据', response);
  })
  .catch(error => {
    // 这里写请求失败的错误处理逻辑
    console.error('请求异常', error);
  });

额外注意事项 #

• 不要尝试通过client.metadata()接口读取secure类型的参数，该接口返回的secure参数是加密占位符，无法拿到真实值。
• 安全模板的运算逻辑在Zendesk服务端侧完成，真实的api_token和base64编码后的鉴权值都不会出现在浏览器前端代码、网络请求的本地调试快照中，符合安全合规要求。
• 如果你调用的不是Zendesk官方API，是第三方自定义接口，不需要拼接邮箱/token前缀的话，可以把headers里的Authorization配置改成对应你业务需要的格式，比如"Authorization": "Bearer {{api_token}}"，框架会自动注入真实token值。

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