reactjs - 从 React 前端获取 Azure AD 的访问 token

Question

我有 React SPA 和 ASP.NET Web API，这两个应用程序都在 Azure 上注册。

我进行了身份验证设置，以便用户登录并通过前端应用程序的租户进行身份验证。但现在我需要为前端的 API 应用程序获取一个不记名 token ，以便与 API 调用一起传递。

我认为工作流程将:

调用https://login.microsoftonline.com/TEANTID/oauth2/v2.0/authorize -> 获取授权码-> 调用 https://login.microsoftonline.com/TENANTID/oauth2/v2.0/token使用之前的身份验证代码，这将返回一个不记名 token 以在 API 调用中使用，但两个最重要的请求将始终返回

“跨源请求被阻止:同源策略不允许读取远程资源。(原因:缺少 CORS header “Access-Control-Allow-Origin”)。”

我的理解是我无法改变这一点，所以我在这里一定做错了什么？我可以看到 Swagger 和 Postman 一样很好地调用这些端点，但我无法复制。

我遵循了很多示例和指南，但它们似乎只是为了获取前端应用程序的访问 token 。我已经有了，但现在我还需要对 API 进行身份验证。

这是我的 msalConfig，用于验证前端

export const msalConfig = {
auth: {
    clientId: "FRONT-END-APP-ID",
    authority: "https://login.microsoftonline.com/TENANTID",
    redirectUri: "http://localhost:3000"
},
cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
}

索引.tsx

   const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <App />
    </MsalProvider>
  </React.StrictMode>
);

Answer 1

我尝试在我的环境中重现相同的结果，并得到如下结果:

我创建了两个 Azure AD 应用程序，并在 ASP.NETWeb API 应用程序中公开了一个 API:

我同意Gaurav Mantri，在React SPA(前端)应用程序中添加了如下API权限:

我使用以下端点生成了身份验证代码:

https://login.microsoftonline.com/TenantId/oauth2/v2.0/authorize?
client_id=ClientID
&response_type=code
&redirect_uri=RedirectUri
&response_mode=query
&scope=api://ClientID/.default
&code_challenge=XXXXX
&code_challenge_method=S256

我使用以下参数生成了访问 token :

修改 React 前端的 msalConfig 文件，如下所示:

auth: { 
authority: "https://login.microsoftonline.com/TenantID",
clientId: "ClientID",
postLogoutRedirectUri: RedirectURI
redirectUri: RedirectURI
validateAuthority: true,
navigateToLoginRequestUrl: true,
},
cache:
{ cacheLocation: 'sessionStorage',
storeAuthStateInCookie: true,
},
},
{
scopes: ['api://clientid/.default']
},
LoginType.Redirect

如果问题仍然存在，请通过允许所有来源进行设置，在您的 React 应用程序中添加 CORS 策略。 cors.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());

引用:

React.JS + MSAL with ASP.NET Core to use Azure AD by Mark Deanil Vicente