MsalProvider -动态msal配置

Question

我遵循教程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")
);

Answer 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。