oauth2 客户端凭据流 Cors 问题答案

【问题标题】：oauth2 client credentials flow Cors Issueoauth2 客户端凭据流 Cors 问题
【发布时间】：2021-02-09 16:36:47
【问题描述】：

我正在尝试在我的 react 应用中使用 adal-node 实现客户端凭据流

我正在尝试的代码

var AuthenticationContext = require('adal-node').AuthenticationContext;

const authenticate = (): any =>{   

    var authorityHostUrl = 'https://login.microsoftonline.com';
    var tenant = 'xxxx.onmicrosoft.com'; 
    var authorityUrl = authorityHostUrl + '/' + tenant;
    var applicationId = '2sdsdwewe-232jkdksdsdsadfsfdsdf'; 
    var clientSecret = 'sdfer245dwfsfw3rt345r342fwfwefwf'; 
    var resource = 'api://sdfwerwerwrwerwerwrewrwer'; 
    
    var context = new AuthenticationContext(authorityUrl);
    
    context.acquireTokenWithClientCredentials(resource, applicationId, clientSecret, (err: { stack: string; }, tokenResponse: any)=> {
      if (err) {
        console.log('well that didn\'t work: ' + err.stack);
      } else {
        console.log(tokenResponse);
      }
    });
}

我从我的本地人http://localhost:3000/ 运行

因此，在应用程序的 Azure 活动目录应用程序注册中，我在 Web 重定向 URI 下添加了 http://localhost:3000/。还尝试在 SPA 下添加它

但是当我运行它时会出现 CORS 错误

Access to fetch at 'https://login.microsoftonline.com/xxxx.onmicrosoft.com/oauth2/token?api-version=1.0' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我在这里遗漏了一些东西

当我以 chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security 运行 Chrome 时

这工作并生成有效令牌

【问题讨论】：

所以你想避免cors问题？我不确定您的目标是什么，如果您想在 SPA 中 generate token，您可以使用身份验证代码流或隐式流（新 Msal.UserAgentApplication）来避免 cors。
@Tiny-wa 是的，根据我的理解，如果您指定正确的重定向 URI，这不应该发生

标签： reactjs azure-active-directory cors adal clientcredential

【解决方案1】：

您可以查看此document 以了解 adal 和 msal 之间的区别。如果您决定使用 msal.js 通过 azure ad 集成身份验证，则不能使用客户端凭据流程，因为此流程适用于 Daemon application。

我可以为您提供一个sample，它使用 msal.js 在 spa 中使用隐式授权流，希望它可以提供帮助，我将继续在 adal 上找到解决方案。

然后按照您提供的链接，我下载了这个sample，然后我发现我在vs code中打开示例代码，修改'client-credentials-sample.js'、npm模块和'node sample\client-credentials-sample.js'中的配置后，就可以成功得到响应了，所以我无法重现您的问题。我没有添加重定向网址。

另一方面，如果你想解决 cors 问题，你应该编辑你的 api 程序而不是这个，同一个域不同端口也会导致跨域。我创建了一个 java api 应用程序，我使用过滤器来解决核心问题。而且我是node新手，所以我不确定it是否可以帮助解决nodejs中的cors问题。

@Order(Integer.MIN_VALUE)
@Component
public class CorsFilter implements Filter {
    @Override
      public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
          throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN,Authorization");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
          response.getWriter().println("ok");
          return;
        }
        chain.doFilter(request, response);
      }
      @Override
      public void destroy() {
      }
      @Override
      public void init(FilterConfig filterConfig) throws ServletException {
      }
}

【讨论】：