如何在ASP.NET Core MVC中集成Firebase Authentication及Firebase Web UI

前置配置 #

你需要先在Firebase控制台完成基础准备：创建项目、启用Authentication服务、开启你需要的登录方式（邮箱/手机号/第三方社交登录等）、将你的ASP.NET Core MVC应用的访问域名添加到Firebase Auth的授权域名列表中，同时获取Firebase Web应用的配置参数。 #

1. 前端集成Firebase UI到MVC视图 #

你可以把Firebase相关的SDK引用放到全局布局页_Layout.cshtml，或者单独放到登录页视图里，引用内容如下：

<!-- Firebase SDK 引用 -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
<!-- Firebase UI 引用 -->
<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />

然后在登录页添加UI渲染容器，以及初始化代码：

<!-- 登录组件渲染容器 -->
<div id="firebaseui-auth-container"></div>

<script>
// 替换为你自己的Firebase配置参数
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

// 初始化Firebase
firebase.initializeApp(firebaseConfig);
const ui = new firebaseui.auth.AuthUI(firebase.auth());

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    // 你可以在这里添加其他需要的登录方式
  ],
  // 登录成功后的回调
  signInSuccessWithAuthResult: function(authResult, redirectUrl) {
    // 获取登录后的ID令牌
    authResult.user.getIdToken().then(function(idToken) {
      // 将令牌提交到后端验证，完成本地会话创建
      fetch('/Account/LoginWithFirebase', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify({ idToken: idToken })
      }).then(res => {
        if(res.ok) window.location.href = '/Home/Index';
      })
    });
    return false;
  }
});
</script>

2. 后端验证令牌并创建本地会话 #

首先通过NuGet安装Firebase Admin SDK：Install-Package FirebaseAdmin，然后在Program.cs中初始化Firebase Admin并配置身份验证：

using FirebaseAdmin;
using Google.Apis.Auth.OAuth2;
using Microsoft.AspNetCore.Authentication.Cookies;

var builder = WebApplication.CreateBuilder(args);

// 初始化Firebase Admin，密钥建议用机密管理器/环境变量存储，不要硬编码
FirebaseApp.Create(new AppOptions()
{
    Credential = GoogleCredential.FromFile("你的服务账号密钥文件路径")
});

// 启用Cookie身份验证
builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.LoginPath = "/Account/Login";
    });

// 其他服务配置...

var app = builder.Build();

// 中间件配置要按顺序加上认证、授权
app.UseAuthentication();
app.UseAuthorization();

// 其他中间件配置...
app.Run();

然后在Account控制器中添加验证令牌的接口：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> LoginWithFirebase([FromBody] FirebaseLoginRequest request)
{
    try
    {
        // 验证Firebase ID令牌有效性
        var decodedToken = await FirebaseAdmin.Auth.FirebaseAuth.DefaultInstance
            .VerifyIdTokenAsync(request.IdToken);
        var userId = decodedToken.Uid;
        var userEmail = decodedToken.Claims.TryGetValue("email", out var email) ? email.ToString() : string.Empty;

        // 创建本地身份声明
        var claims = new List<Claim>
        {
            new Claim(ClaimTypes.NameIdentifier, userId),
            new Claim(ClaimTypes.Email, userEmail),
            // 可以添加其他你需要的自定义声明
        };

        var claimsIdentity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
        await HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, 
            new ClaimsPrincipal(claimsIdentity));
        
        return Ok();
    }
    catch (Exception)
    {
        return BadRequest("身份验证失败");
    }
}

// 对应的请求实体类
public class FirebaseLoginRequest
{
    public string IdToken { get; set; }
}

常见注意事项 #

• 本地开发时需要将localhost:你的端口号添加到Firebase Auth的授权域名列表中，否则会出现登录拦截
• Firebase服务账号密钥属于敏感信息，生产环境不要提交到代码仓库，建议使用ASP.NET Core机密管理器、环境变量或者云密钥管理服务存储
• 默认Firebase ID令牌有效期为1小时，你可以根据业务需要配置自动刷新逻辑，或者将本地Cookie的有效期和令牌有效期对齐
• 如果你的应用有API接口，也可以直接在请求头中携带ID令牌，后端用同样的验证逻辑做无状态身份校验

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