MsalProvider - 动态 msal 配置答案

【问题标题】：MsalProvider - dynamic msal configMsalProvider - 动态 msal 配置
【发布时间】：2021-12-18 13:03:23
【问题描述】：

我遵循教程https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial/single-page-application-azure-login-button-sdk-msal。但是，我需要修改代码，以便它能够使用呈现后可用的 clientId 对其进行配置（从应用程序级别检索 msal 配置）。是否可以更新子组件中的 msalConfig？

//index.js
ReactDOM.render(
  <Provider store={store}>
      <MsalProvider instance={new PublicClientApplication(MSAL_CONFIG)}>
        <Router>
          <App />
        </Router>
      </MsalProvider>
  </Provider>,
  document.getElementById("root")
);

【问题讨论】：

标签： dynamic react-hooks msal

【解决方案1】：

在 src 文件夹中创建一个名为 authConfig.js 的文件，以包含您用于身份验证的配置参数，然后添加以下代码：

export const msalConfig = {
auth: {
clientId: "Enter_the_Application_Id_Here",
authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here", 

redirectUri: "Enter_the_Redirect_Uri_Here",
  },
  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

    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge

  }
};

// Add scopes here for ID token to be used at Microsoft identity platform endpoints.

export const loginRequest = {

 scopes: ["User.Read"]

};



// The endpoints here for Microsoft Graph API services you'd like to use.

export const graphConfig = {

   graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me"

};

这样您就可以使用 ClientID 对其进行配置。这是doc。

【讨论】：