将 Microsoft Graph 工具包与 msal-browser 一起使用

Question

我正在开发 React 应用程序并使用 @azure/msal-react 库进行身份验证。

效果很好，但后来我意识到我很想使用@microsoft/mgt-react 库中的人物选择器小部件。

有什么方法可以将我现有的@azure/msal-react / @azure/msal-browser 库连接到 MGT 库？

或者我是否必须重构我的代码才能使用 MGT 样式的身份验证方法？

如果是这样的话，我想我会构建自己的人员选择器组件，但我想我还是会看看是否可行。

Answer 1

如果您已经有办法获取访问令牌，则可以将 MGT 与 SimpleProvider 结合使用。

import {Providers, SimpleProvider, ProviderState} from '@microsoft/mgt-element';

Providers.globalProvider = new SimpleProvider((scopes: string[]) => {
  // return a promise with accessToken
});

// set state to signal to all components to start calling graph
Providers.globalProvider.setState(ProviderState.SignedIn)

Answer 2

我的解决方案是在 Microsoft Graph 工具包 (@microsoft/mgt-element) 和 @azure/msal-react 库中使用相同的 @azure/msal-browser 实例，如下所示：

// MSAL React
import { MsalProvider as MsalReactProvider } from "@azure/msal-react";
import { Configuration, PublicClientApplication } from "@azure/msal-browser";
// Microsoft Graph Toolkit
import { Providers as MGT_Providers } from '@microsoft/mgt-element';
import { Msal2Provider as MGT_Msal2Provider } from '@microsoft/mgt-msal2-provider';

// Your app
import App from './App';

// MSAL configuration
const configuration: Configuration = {
    ... MSAL Browser config
};

// Instantiate MSAL-Browser
const pca = new PublicClientApplication(configuration);
// instantiate the global provider for MGT
MGT_Providers.globalProvider = new MGT_Msal2Provider({ publicClientApplication: pca });

ReactDOM.render(
  <MsalReactProvider instance={pca}>
    <App />
  </MsalReactProvider>  document.getElementById('root')
);

并在应用程序组件中进行一些引导以保持登录状态同步：

import { useMsal, useIsAuthenticated } from "@azure/msal-react";
import { Providers as MGT_Providers, ProviderState } from '@microsoft/mgt-element';

export function App() {

  const isAuthenticated = useIsAuthenticated();
  const { inProgress } = useMsal();
  useEffect(() => {
    console.log("isAuthenticated, inProgress: ", [isAuthenticated, inProgress], [typeof isAuthenticated, typeof inProgress])
    MGT_Providers.globalProvider.setState(inProgress !== "none" ? ProviderState.Loading : (isAuthenticated ? ProviderState.SignedIn : ProviderState.SignedOut))
  }, [isAuthenticated, inProgress])

  ... 

}

将 Microsoft Graph 工具包与 msal-browser 一起使用

Use Microsoft Graph Toolkit with msal-browser

reactjs

msal

microsoft-graph-toolkit