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.

MsalProvider - 动态 msal 配置

MsalProvider - dynamic msal config

dynamic

react-hooks

msal