.NET Core API与Vue.js SPA接入Keycloak实现身份认证相关问题咨询

一、前端Vue接入（自动跳转Keycloak自带认证页） #

你需要用Keycloak官方提供的keycloak-jsSDK走标准授权码流+PKCE，这个流程原生就会自动跳转Keycloak的官方登录页，完全不需要开发自定义登录界面。

前置准备 #

在Keycloak后台创建两个客户端：

• 给Vue用的public类型客户端，配置有效重定向URI、Web Origins为你的Vue应用地址，开启PKCE支持
• 给.NET Core API用的bearer-only类型客户端，不需要配置跳转地址

接入步骤 #

1. 安装依赖
   npm install keycloak-js
2. 初始化Keycloak实例（建议在main.js中执行）

import Keycloak from 'keycloak-js'
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)

const keycloak = new Keycloak({
  url: '你的Keycloak服务根地址',
  realm: '你创建的领域名称',
  clientId: 'Vue端用的public客户端ID'
})

// 初始化完成再挂载Vue应用，未登录会自动跳转Keycloak登录页
keycloak.init({
  onLoad: 'login-required',
  flow: 'standard',
  pkceMethod: 'S256', // 强制开启PKCE， public客户端必备安全配置
  checkLoginIframe: false
}).then(isAuthenticated => {
  if (isAuthenticated) {
    // 挂载全局实例方便组件调用
    app.config.globalProperties.$keycloak = keycloak
    app.mount('#app')
  }
}).catch(e => console.error('Keycloak初始化失败', e))

3. 配置请求拦截器，自动携带令牌

axios.interceptors.request.use(config => {
  if (keycloak.token) {
    config.headers.Authorization = `Bearer ${keycloak.token}`
  }
  return config
})

二、后端.NET Core API身份校验实现 #

后端只需要做JWT令牌校验，不需要参与登录流程，也不需要和Keycloak做登录交互。

接入步骤 #

1. 安装NuGet包
   Install-Package Microsoft.AspNetCore.Authentication.JwtBearer
2. 配置认证服务（Program.cs）

var builder = WebApplication.CreateBuilder(args);

// 添加JWT认证配置
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.Authority = "你的Keycloak服务根地址/realms/你的领域名称";
        options.Audience = "API端用的bearer-only客户端ID";
        // 开发环境如果Keycloak未配置HTTPS可以临时关闭，生产环境必须开启
        options.RequireHttpsMetadata = false;
        options.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidIssuer = "你的Keycloak服务根地址/realms/你的领域名称",
            ValidateAudience = true,
            ValidAudience = "API端用的bearer-only客户端ID",
            ValidateLifetime = true,
            // 允许的服务器时间偏移，避免不同服务器时间差导致令牌校验失败
            ClockSkew = TimeSpan.FromSeconds(10)
        };
    });

builder.Services.AddControllers();

var app = builder.Build();

// 注意顺序：先认证，再授权，最后路由
app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();

3. 保护接口
   在需要鉴权的Controller或者Action上添加[Authorize]特性即可，框架会自动校验请求头中的Bearer令牌是否合法，校验通过后你可以通过HttpContext.User直接获取令牌中携带的用户ID、角色、权限等信息。

补充说明 #

除了前端携带令牌请求API的方式之外没有更简单的标准实现，JWT是自包含令牌，后端不需要额外调用Keycloak接口就可以本地完成签名、有效期、签发方等校验，性能更高。
如果遇到令牌过期问题，可以在前端添加定时任务调用keycloak.updateToken()自动刷新access_token，不需要用户重新登录。

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