使用 React-AAD-MSAL 查找 Azure/AD 个组

Question

我已将 React-Aad-MSAL 客户端的基本身份验证集成到我的 react-app 中，这使我能够成功获取用户名和电子邮件等信息。在一个组件中，我想在显示一些数据之前检查用户组。

import React, { useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Container, Header } from 'semantic-ui-react';
import {
    AzureAD,
    AuthenticationState,
    IAzureADFunctionProps
  } from "react-aad-msal";
import { authProvider } from '../../../app/auth/authProvider';
import { RootStoreContext } from '../../../app/stores/rootStore';

const PurchasePipelineDashboard: React.FC = () => {
    const rootStore = useContext(RootStoreContext)
    const {
        idTokenClaimsAction } = rootStore.serverCatalogStore;

    return (
        // <Container style={{marginTop:'7em'}}>
        //     <Header content="Purchase Pipeline" />
        // </Container>
        <AzureAD provider={authProvider} >
        {({
          accountInfo,
          authenticationState,
          error
        }: IAzureADFunctionProps) => {
          return (
            <React.Fragment>
              {authenticationState === AuthenticationState.Unauthenticated && (
                  <h1>Oooo weee!</h1>
              )}
            </React.Fragment>
          );

        }}
      </AzureAD>
    )   
}

export default observer(PurchasePipelineDashboard);

我的问题是；我将如何收集用户所在的组？我已经检查了 accountInfo.account.idTokenClaims，但是 none 那些 return 标记。我看到其他使用 Graph 的教程，但我真的需要这两个库吗？任何帮助将不胜感激！

Answer 1

这里有两个选项，您可以按照此处将它们添加到令牌中的声明中：https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-optional-claims#configuring-groups-optional-claims 但也有限制，比如最多只能 return 150-200 组。

或者您可以进行单独的图 api 调用以获取用户组。这是一个如何使用 react https://github.com/microsoftgraph/msgraph-training-reactspa

调用图形的示例

您将为此查看图表的 getmembergroups 端点：https://docs.microsoft.com/en-us/graph/api/user-getmembergroups?view=graph-rest-1.0&tabs=http

使用 React-AAD-MSAL 查找 Azure/AD 个组

Finding Azure/AD groups with React-AAD-MSAL

reactjs

msal

react-aad-msal