Asp.Net React 项目模板 Google 身份验证不起作用

Question

我正在使用的项目实际上是一个 asp.net 反应项目模板，包括开箱即用的身份框架。

我按照此处指定的示例进行操作： https://learn.microsoft.com/en-us/as.net/core/security/authentication/social/?view=as.netcore-6.0&tabs=visual-studio

这是他们收到的代码更改：

using CompraDeMi.ConsumerWeb.Areas.Identity;
using CompraDeMi.ConsumerWeb.Data;
using CompraDeMi.ConsumerWeb.Models;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Identity.UI;
using Microsoft.EntityFrameworkCore;
using System.Configuration;

namespace CompraDeMi.ConsumerWeb
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // Add services to the container.
            var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
            builder.Services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(connectionString));
            builder.Services.AddDatabaseDeveloperPageExceptionFilter();

            builder.Services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
                .AddEntityFrameworkStores<ApplicationDbContext>();

            builder.Services.AddScoped<IUserClaimsPrincipalFactory<ApplicationUser>, ApplicationUserClaimsPrincipalFactory>();

            builder.Services.AddIdentityServer()
                .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

            builder.Services.AddAuthentication()
                .AddIdentityServerJwt()
                .AddGoogle(googleOptions => {
                    googleOptions.ClientId = builder.Configuration["Authentication:Google:ClientId"];
                    googleOptions.ClientSecret = builder.Configuration["Authentication:Google:ClientSecret"];
                });

            builder.Services.AddControllersWithViews();
            builder.Services.AddRazorPages();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (app.Environment.IsDevelopment())
            {
                app.UseMigrationsEndPoint();
            }
            else
            {
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            using (var svcScope = app.Services.GetRequiredService<IServiceScopeFactory>().CreateScope())
            {
                var appContext = svcScope.ServiceProvider.GetService<ApplicationDbContext>();
                if (appContext is not null) 
                    appContext.Database.Migrate(); 
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseRouting();

            app.UseAuthentication();
            app.UseIdentityServer();
            app.UseAuthorization();

            app.MapControllerRoute(
                name: "default",
                pattern: "{controller}/{action=Index}/{id?}");
            app.MapRazorPages();

            app.MapFallbackToFile("index.html");

            app.Run();
        }
    }
}

我还基于此实现了谷歌身份验证： https://learn.microsoft.com/en-us/as.net/core/security/authentication/social/google-logins?view=as.netcore-6.0

我在谷歌注册了这个应用程序，除了我使用谷歌身份验证注册或登录时，一切似乎都运行良好。

除了控制台警告外，我没有得到太多反馈：

router.ts:11 No routes matched location "/signin-google?state=CfDJ8FUFmpOzEnlEgxO5Hun5JDlqGr8BLuC31PgS_uHAK0U2KcsmY4YvZwK740bnV9SHpMaqx-wNdCJnq3_DlacPC-oNhKN6hAQezjJFdAjyBHUL-MwMMe27_b-4gZM7Jf6IYTAYxbDj2ij_OaNLEsSyAxB1jT40TQicPwX1dmEu6FT40xZn54EhmNKRe1jpOZ_jixO0-jNUC8j-jE6gtwJCKGzkYP_RnhEJMEx79_GCqVK5Atu0cIho2ew_BPfNL-Y4G3q_rQgSyIvpbVszW8YtcWyfX-4RK93blAogHW2iX7kRhje98SVwhHuAEt8gTNlF1Tvr0xFKUrW0RQd0j3z3tOQ&code=4%2F0ARtbsJoMtOs4W_GAG36XEMq9r999I_awQ3Tn7S8yf-aJbuZYjBaAat56sPCagDDACOgrfg&scope=email+profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=consent" 
warning @ router.ts:11
useRoutes @ hooks.tsx:348
Routes @ components.tsx:256
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

我知道身份框架正在使用 Razor 页。 根据警告，反应路由器似乎正在尝试处理回调。

我想 MS 在提供 React 项目模板时会考虑到这一点。

我错过了什么吗？ 或者也许有人可以指出我的一些文档？

非常感谢您的帮助。

Answer 1

经过几天的寻找答案但没有找到答案后，我记得我需要在添加新的 api 端点时设置我的代理，如下所述： Out of box VS 2022 SPA React App won't route Web API

我修改了 setupProxy.js 文件：

我添加了以下代码行：

Google 身份验证开箱即用！