reactjs - 使用 React 应用程序以及权威链接结构的 Azure B2C 身份验证的配置文件的结构是什么？

Question

我正在尝试为我的 B2C 身份验证应用程序获取完美的配置结构和权限 url，该应用程序将与 Azure 和 React 集成。我确实为我的配置文件获取了这个结构，并且在注释中指定了身份验证链接。但我无法获取弹出屏幕，并且错误提示权限链接无效。

import { LogLevel } from "@azure/msal-browser";

/**
 * To learn more about user flows, visit: https://learn.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
 * To learn more about custom policies, visit: https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-overview
 */

const tenantName = "TenantName";
const signInPolicy = "Plicy_For_SignIn";
const applicationID = "CliendId";
const reactRedirectUri = "http://localhost:3000"; //RedirectURL

// Formatted as https://{b2ctenantname}.b2clogin.com/tfp/{b2ctenantguid or full tenant name including onmicrosoft.com}/{signuporinpolicyname}

const AuthorityUrl = `https://${tenantName}/tfp/${tenantName}/${signInPolicy}`;

/**
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
 */
export const msalConfig = {
  auth: {
    clientId: applicationID,
    authority: AuthorityUrl,
    redirectUri: reactRedirectUri,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            return;
        }
      },
    },
  },
};

/**
 * https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
  scopes: ["User.Read"],
};

使用相同的方法并将其用 MsalProvider 包装并将其传递到 Index.js 文件的根目录并调用弹出登录实例后，该文件不起作用。

我正在使用官方文档@azure/msal-react和@azure/msal-browser中提到的软件包

我收到的错误是 400，后跟一条消息:

ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientConfigurationError: untrusted_authority: The provided authority is not a trusted authority. Please include this authority in the knownAuthorities config parameter.

我需要一些帮助!!

谢谢你!!

Answer 1

这是一个示例权威 URL，根据指南 here :
权限:“https://contoso.b2clogin.com/contoso.onmicrosoft.com/Your-B2C-SignInOrSignUp-Policy-Id”

您的代码有:
const tenantName = "TenantName";
const signInPolicy = "Plicy_For_SignIn";
const AuthorityUrl = https://${tenantName}/tfp/${tenantName}/${signInPolicy}

结果为:https://TenantName/tfp/TenantName/Plicy_For_SignIn -> 不符合示例。

您需要使其遵循以下格式:
权限:“https://contoso.b2clogin.com/contoso.onmicrosoft.com/Your-B2C-SignInOrSignUp-Policy-Id”

如下:const AuthorityUrl = https://${tenantName}.b2clogin.com/tfp/${tenantName}.onmicrosoft.com/${signInPolicy}