如何使用Ajax调用经Active Directory认证的Web API

Hey，针对你在CRM Portal里用adal.min.js调用受AD保护的Azure Web API拿不到令牌的问题，我整理了几个关键排查点和解决步骤，应该能帮到你：

第一步：确认ADAL初始化的正确性 #

• 首先检查你的adalConfig配置，必须确保clientId是CRM Portal在Azure AD中注册的应用的Client ID，而不是Web API的Client ID。很多人在这里搞混，导致拿不到正确的令牌。
• tenant参数要和Web API的AD配置一致，比如是具体的租户ID（xxx.onmicrosoft.com或者GUID），而不是随便填common（除非你的场景是多租户）。
• 初始化代码要确保全局可访问，比如：

  var adalConfig = {
    clientId: "CRM_PORTAL_APP_CLIENT_ID",
    tenant: "YOUR_TENANT_ID",
    redirectUri: window.location.origin + "/", // 要和CRM Portal应用的重定向URI一致
    cacheLocation: "localStorage" // 可选，但建议开启以便持久化令牌
  };
  window.authContext = new AuthenticationContext(adalConfig);
  

第二步：正确获取针对Web API的令牌 #

• 不要直接调用authContext.getToken()，必须传入Web API的资源ID（也就是Web API在Azure AD注册时的Application ID URI，比如https://your-api.azurewebsites.net或者自定义的URI）。正确的调用方式是：

  authContext.acquireToken("WEB_API_RESOURCE_ID", function(error, token) {
    if (error) {
      console.error("获取令牌失败:", error);
      // 处理令牌过期场景
      if (error.indexOf("token is expired") !== -1) {
        authContext.acquireTokenSilent("WEB_API_RESOURCE_ID", function(silentError, silentToken) {
          if (silentToken) {
            callWebApi(silentToken);
          } else {
            authContext.login(); // 静默刷新失败，引导用户重新登录
          }
        });
      }
      return;
    }
    // 拿到有效令牌后调用Web API
    callWebApi(token);
  });
  
  function callWebApi(token) {
    $.ajax({
      url: "YOUR_WEB_API_ENDPOINT",
      type: "POST", // 或GET，根据你的API需求调整
      headers: {
        "Authorization": "Bearer " + token,
        "Content-Type": "application/json"
      },
      data: JSON.stringify({ /* 传入你的字段变更数据 */ }),
      success: function(response) {
        console.log("API调用成功:", response);
        // 这里处理API返回的结果
      },
      error: function(xhr) {
        console.error("API调用失败:", xhr.statusText);
      }
    });
  }
  

第三步：排查CRM Portal的上下文冲突 #

• CRM Portal本身可能有自带的认证脚本，要确保adal.min.js的加载顺序正确，建议放在页面底部加载，避免和Portal的JS变量或事件冲突。
• 打开浏览器控制台，查看是否有ADAL相关的错误日志（比如adal: error前缀的信息），或者CORS错误。如果是CORS问题，需要在Azure App Service的Web API配置里，把CRM Portal的域名添加到CORS允许列表中。
• 检查Azure AD中的权限配置：确保CRM Portal的应用已经被授予访问Web API的委派权限，并且已经完成管理员同意（如果是租户级应用的话）。

第四步：处理字段变更的触发时机 #

• 在字段变更事件中，先确认用户已经完成AD登录，避免在未登录状态下尝试获取令牌：

  $("#your-target-field").on("change", function() {
    var cachedUser = authContext.getCachedUser();
    if (!cachedUser) {
      // 用户未登录，引导登录
      authContext.login();
      return;
    }
    // 用户已登录，开始获取令牌并调用API
    authContext.acquireToken("WEB_API_RESOURCE_ID", function(error, token) {
      // 后续逻辑同上
    });
  });
  

常见的坑点提醒 #

• 令牌过期：ADAL会自动处理令牌刷新，但如果用户长时间未操作，静默刷新可能失败，这时候需要引导用户重新登录。
• Web API的Azure配置：确保Web App的Authentication/Authorization功能已经开启，并且设置为“仅允许已验证的用户访问”，同时AD租户和应用配置正确。

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