使用 React 应用程序以及 Authority link 结构的 Azure B2C 身份验证的配置文件的结构是什么？

Question

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

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

/**
 * To learn more about user flows, visit: https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
 * To learn more about custom policies, visit: https://docs.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://docs.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

根据指南 here:
，这是一个授权示例 URL authority: "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 -> 不符合样本。

您需要使其遵循以下格式：
authority: "https://contoso.b2clogin.com/contoso.onmicrosoft.com/Your-B2C-SignInOrSignUp-Policy-Id"

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

使用 React 应用程序以及 Authority link 结构的 Azure B2C 身份验证的配置文件的结构是什么？

What is the structure of the config file for Azure B2C Authetication using react app along with the Authority link structure?

azure

db2-connect

reactjs

azure-ad-b2c

azure-ad-b2c-custom-policy