如何在Angular+.NET Core+Identity Server4栈中实现Facebook外部登录

现有MVC场景的教程大多依赖服务端渲染的跳转逻辑，你当前的单页应用+独立API栈不需要适配这部分逻辑，直接走OAuth 2.0 授权码流+PKCE即可，原有接口调用逻辑不需要做任何修改，核心实现要点如下：

Identity Server 4 端配置 #

• 首先安装官方Facebook身份验证中间件：Install-Package Microsoft.AspNetCore.Authentication.Facebook
• 在Identity Server 4服务的Program.cs/Startup.cs中添加Facebook认证配置：

builder.Services.AddAuthentication()
    .AddFacebook("Facebook", options =>
    {
        options.SignInScheme = IdentityServerConstants.ExternalCookieAuthenticationScheme;
        // 替换为你在Facebook开发者平台申请的应用ID和密钥
        options.AppId = "YOUR_FACEBOOK_APP_ID";
        options.AppSecret = "YOUR_FACEBOOK_APP_SECRET";
        // 回调路径为中间件默认处理地址，不需要自行实现对应接口，只需要在Facebook开发者平台配置回调域名指向你的Identity Server 4服务即可
        options.CallbackPath = "/signin-facebook";
    });

• 检查你为Angular应用配置的Identity Server 4客户端参数：授权类型需开启authorization_code、开启PKCE校验、无需配置客户端密钥、回调地址配置为Angular应用的对应回调路由。

Angular 端适配 #

• 如果你已经在使用angular-oauth2-oidc等库对接Identity Server 4，原有登录逻辑只需要新增Facebook登录入口的请求参数即可：
  1. 点击Facebook登录按钮时，跳转的Identity Server 4授权地址新增参数acr_values=idp:Facebook，指定使用Facebook作为外部身份提供商
  2. 后续授权码回调、兑换access_token的逻辑和原有普通账号登录的逻辑完全一致

.NET Core API 端适配 #

• 无需做任何改动，Facebook外部登录流程最终下发的access_token和原有登录方式下发的token校验规则完全相同，原有接口的token校验逻辑可以直接复用。

内容的提问来源于stack exchange，提问作者Anthony Earl R. Cuartero