reactjs - Azure B2C 引发访问 token 验证失败。无效观众

Question

我正在尝试在我的 React 应用程序中使用 Microsoft Azure B2C AD 并使用图形 SDK 尝试在 React 应用程序中获取用户信息。

我成功地能够使用用户流程登录，并在登录后获得 ID-Token。

现在，当我尝试使用 Graph SDK 获取用户配置文件或使用 acquireTokenSilent 方法获取 token 时，我收到了不同的错误:-

import React from 'react';
import {
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
  useMsal,
} from '@azure/msal-react';
import { loginRequest } from '../authConfig';

import { AuthCodeMSALBrowserAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/authCodeMsalBrowser';
import { InteractionType } from '@azure/msal-browser';
import { Client } from '@microsoft/microsoft-graph-client';

const Home = () => {
  const { instance } = useMsal();
  const { accounts } = useMsal();
  let graphClient = undefined;

  const scopes = [
    'openid',
    'offline_access',
    'https://my-tanent.onmicrosoft.com/my-app/user.read',
  ];

  const authProvider = new AuthCodeMSALBrowserAuthenticationProvider(instance, {
    account: accounts[0],
    scopes,
    interactionType: InteractionType.Popup,
  });

  function ensureClient() {
    graphClient = Client.initWithMiddleware({
      authProvider: authProvider,
    });

    return graphClient;
  }

  async function getUser() {
    ensureClient();

    // Return the /me API endpoint result as a User object
    const user = await graphClient
      .api('/me')
      // Only retrieve the specific fields needed
      .select('displayName,mail,mailboxSettings,userPrincipalName')
      .get();

    console.log(user);
  }

//just to check the token
  const getAccessToken = async () => {
    try {
      const token = await instance.acquireTokenSilent({
        scopes,
      });

      console.log(token);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>
      <UnauthenticatedTemplate>
        <h3 className="h3">Login</h3>
        <button onClick={() => instance.loginPopup(loginRequest)}>Login</button>
      </UnauthenticatedTemplate>

      <AuthenticatedTemplate>
        <div className="App">
          <header className="App-header">
            <p>Hello {accounts[0]?.name}!</p>

            <button
              onClick={() =>
                instance.logoutRedirect({ postLogoutRedirectUri: '/' })
              }
            >
              Logout
            </button>

            <button onClick={() => getUser()}>Get User</button>

            <button onClick={() => getAccessToken()}>AcquireTokenSilent</button>
          </header>
        </div>
      </AuthenticatedTemplate>
    </>
  );
};

Graph SDK = Error: Access token validation failure. Invalid audience.

In the second method I'm getting an access token but when I decrypt it, it looks like ID-Token as aud is client-ID:- check This to know more about token

 "exp": 1660120614,
  "nbf": 1660117014,
  "aud": "my-client-id",
  "sub": "df5a1676-74bb-46b6-9116-a5fa125941da",
  "name": "Parteek",
  "postalCode": "246401",
  "tfp": "B2C_1_susi",
  "nonce": "9f13aefb-1a6e-4818-a39e-4f1369ca67d8",
  "scp": "user.read",
  "azp": "93dee6ed-1f87-4f0f-bedb-fd3f1a03b0ed",
  "ver": "1.0",
  "iat": 1660117014

范围更改的第二次 TRY

 const scopes = [
    'openid',
    'offline_access',
    'https://graph.microsoft.com/.default',
  ];

使用此范围值:-

Graph SDK Error =Access token is undefined: Received empty access token from PublicClientApplication

acquireTokenSilent: The access token is empty.

我的 Azure 帐户的权限

我不知道为什么会收到这些错误，这与权限有关还是我以错误的方式实现了它？

Answer 1

1. 看来您可能必须使用客户端凭据流，以便服务器代表用户调用图形 api，因为在对 azure ad b2c 进行身份验证时不可能直接进行。
2. 或者创建个人资料编辑用户流程，然后使用该流程。

另请注意:如果您使用受支持的帐户类型作为任何身份提供商在 B2C 租户中注册应用，则您可能无法使用该应用执行图形操作。

• 您可以在 Azure AD B2C 中注册应用程序并关联 带有客户端 ID 和 key 及其详细信息的 Azure AD，即；使用 client_credentials 用于调用 Graph API。
• 还要确保您拥有正确的 API 权限，例如 Application.ReadWrite.All、User.Read.All Directory.Read.All(或)Directory.ReadWrite.All 已获得管理员同意。
• 请确保您向 Web 应用程序授予 API 访问权限，以便返回访问 token :请参阅 Request an access token - Azure Active Directory B2C | Microsoft Docs

引用文献:

1. reactjs - Can a user update their own Azure B2C account details via the Graph API? - Stack Overflow
2. Azure AD B2C: AcquireTokenSilentAsync returns empty access token - Stack Overflow