尝试使用 React.js 和 Redux 将 Azure B2c 身份验证添加到 Asp.net 核心

如何解决尝试使用 React.js 和 Redux 将 Azure B2c 身份验证添加到 Asp.net 核心

我在 virtual studio 2019 中使用 React.js 和 Redux 创建了一个 Asp.net 核心。我做了一些更改以使用 Azuer 配置 B2C 身份验证，更改是 startup.cs、appsettings.json 和 在 NavMenu.tsx 中如下

        // Configuration to sign-in users with Azure AD B2C
        services.AddMicrosoftIdentityWebAppAuthentication(Configuration,"AzureAdB2C");

        services.AddControllersWithViews()
            .AddMicrosoftIdentityUI();

        services.AddRazorPages();

        //Configuring appsettings section AzureAdB2C,into IOptions
        services.AddOptions();
        services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
        
         public void Configure(IApplicationBuilder app,IWebHostEnvironment env)
         {
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseSpaStaticFiles();
            app.UseCookiePolicy();

            app.UseRouting();
            app.UseAuthentication();
            app.UseAuthorization();
         }

在应用设置中

 "AzureAdB2C": {
    "Instance": "https://xxxxx.b2clogin.com","ClientId": "90cxxxx-bxxxx-44xxx-8xxx-xxxx0b29xxx","Domain": "fabrikamb2c.onmicrosoft.com","SignedOutCallbackPath": "/signout/B2C_1_xxxxx","SignUpSignInPolicyId": "b2c_1_xxx","ResetPasswordPolicyId": "b2c_1_xxx","EditProfilePolicyId": "b2c_1_xxxxx" // Optional profile editing policy
    //"CallbackPath": "/signin/B2C_1_sign_up_in"  // defaults to /signin-oidc
  },

在 NavMenu.tsx 中，我像这样尝试.. 我确实将 asp 代码复制到了 .tsx，但它不起作用

 <NavItem>
          <NavLink tag={Link} className="text-dark" >
                <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                       <button type="submit" >Sign Up/In</button>
                </form>
           </NavLink>
   </NavItem>

需要一个方向来解决这个问题

解决方法

您不必像这样设置代码。可以直接将 Azure AD B2C 与 React.js 和 Redux 集成。

请按照以下步骤操作：React JS Application with Azure AD B2C