如何在ASP.NET Core Razor Pages项目中启用外部OAuth 2.0认证？

我来一步步帮你完成这个配置，全程基于VS2017 Community和ASP.NET Core Razor Pages项目：

前置准备 #

首先确保你的项目已经具备身份认证基础：如果是新建项目时选了个人用户账户模板，那框架已经帮你搭好基础了；如果是空白项目，需要先安装Microsoft.AspNetCore.Identity相关NuGet包，并在Startup.cs中配置身份中间件（不过大部分场景下选模板更省心）。

一、配置Google OAuth2登录 #

1. 在Google平台创建应用并获取凭据 #

• 登录Google开发者控制台，新建一个项目。
• 在项目内搜索并启用People API（这是Google身份认证依赖的核心API）。
• 进入「凭据」页面，点击「创建凭据」→「OAuth 2.0客户端ID」：
  • 应用类型选「Web应用」；
  • 授权重定向URI填：https://localhost:<你的项目端口号>/signin-google（端口号可以在VS项目属性的「调试」标签里查看）。
• 创建完成后，复制好客户端ID和客户端密钥，这两个是后面配置的关键。

2. 项目内配置Google认证 #

• 打开项目根目录的appsettings.json，添加Google认证配置：

"Authentication": {
  "Google": {
    "ClientId": "你的Google客户端ID",
    "ClientSecret": "你的Google客户端密钥"
  }
}

• 打开Startup.cs，在ConfigureServices方法中添加Google认证服务（记得放在身份服务配置之后）：

services.AddAuthentication()
    .AddGoogle(options =>
    {
        var googleConfig = Configuration.GetSection("Authentication:Google");
        options.ClientId = googleConfig["ClientId"];
        options.ClientSecret = googleConfig["ClientSecret"];
    });

• 确认Configure方法里已经启用了认证和授权中间件（顺序不能错）：

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

3. 显示Google登录按钮 #

如果用的是默认的身份UI模板，/Identity/Account/Login页面已经自带Google登录按钮了。如果你的登录页面是自定义的，添加这段代码即可：

<div class="mt-3">
    <button type="submit" asp-page="./ExternalLogin" asp-route-provider="Google" class="btn btn-danger w-100">
        用Google账号登录
    </button>
</div>

二、配置Facebook OAuth2登录 #

1. 在Facebook平台创建应用并获取凭据 #

• 登录Facebook开发者平台，新建一个「消费者」类型的应用。
• 在应用的「产品」页面，添加「Facebook登录」产品，进入其设置页面：
  • 在「有效的OAuth重定向URI」中填写：https://localhost:<你的项目端口号>/signin-facebook。
• 进入「设置→基本」页面，复制应用ID和应用密钥（应用密钥需要点击「显示」按钮才能看到）。

2. 项目内配置Facebook认证 #

• 在appsettings.json中添加Facebook配置：

"Authentication": {
  // 保留之前的Google配置
  "Facebook": {
    "AppId": "你的Facebook应用ID",
    "AppSecret": "你的Facebook应用密钥"
  }
}

• 在Startup.cs的ConfigureServices方法中追加Facebook认证服务：

services.AddAuthentication()
    // 保留之前的Google配置
    .AddFacebook(options =>
    {
        var fbConfig = Configuration.GetSection("Authentication:Facebook");
        options.AppId = fbConfig["AppId"];
        options.AppSecret = fbConfig["AppSecret"];
    });

3. 显示Facebook登录按钮 #

同样，默认身份UI已经自带按钮，自定义页面的话添加这段代码：

<div class="mt-3">
    <button type="submit" asp-page="./ExternalLogin" asp-route-provider="Facebook" class="btn btn-primary w-100">
        用Facebook账号登录
    </button>
</div>

三、测试登录流程 #

启动项目，访问登录页面，点击对应的第三方登录按钮：

1. 会跳转到Google/Facebook的授权页面，输入账号密码并授权；
2. 授权成功后会自动跳回你的网站，首次登录时会提示你绑定本地账户（或直接创建本地用户）；
3. 完成后就成功登录啦！

几个注意点 #

• 必须使用HTTPS：OAuth2协议要求重定向URI为HTTPS，本地开发时VS会自动生成自签名证书，直接用https://localhost:<端口>访问即可；
• 端口号要一致：如果修改了项目的运行端口，务必同步更新第三方平台的重定向URI；
• ASP.NET Core版本兼容：VS2017支持的ASP.NET Core版本是2.1到3.1，以上配置在这些版本中都适用。

内容的提问来源于stack exchange，提问作者Samir