使用 Vue 3 插件（Plugin）实现 OIDC 登录和修改密码（OIDC 系统以 Keycloak 为例）

背景

目前单位系统常用 Keycloak 作为认证系统后端，而前端之前写的也比较随意，这次用 Vue 3 插件以及 Ref 响应式来编写这个模块。另外，这个可能是全网唯一使用 keycloak 的 OIDC 原生更新密码流的介绍代码。

设计

依赖库选择

OIDC 客户端，这里选择 oidc-client-ts 来提供 OIDC 相关的服务，根据目前的调研这个算是功能比较齐全、兼容性比较好的 OIDC 客户端了。像 keycloak.js，其实也没有修改密码和自动刷新 token 的功能。另外像 Auth0 Vue SDK 则只能用于 Auth0，但他设计上还是不错的，也是通过 Vue 3 原生的插件功能实现的。

具体设计

根据 Vue 3 的官方插件文档，主要需要两部分组成，一个是需要定义一个 Plugin 并在里面使用 provide 来提供对象，另一个则是需要定义一个方法使用 inject 来接收提供的对象。

这里给原本的 oidc-client-ts 里的 UserManager 来个套娃，外层这个套一层，叫 AuthManager 。这样就可以将一些初始化时加载 LocalStorage 里的 token 等等逻辑封装在这里面，同时也可以对外暴露一些 Ref 让其他组件可以监听变化。

代码

废话不多说了，咱还是老样子，直接上代码

auth-manager.ts

import { UserManager, UserManagerSettings } from 'oidc-client-ts';
import { Plugin, inject, ref } from 'vue';

/**
 * 用于注入的 key
 */
const PROVIDE_KEY = Symbol('oidc-provider');
/**
 * 用户信息
 */
interface UserInfo {
  /**
   * 用户 id
   */
  userId: string;
  /**
   * 用户名
   */
  username: string;
  /**
   * token
   */
  token: string;
  /**
   * 姓
   */
  lastName: string;
  /**
   * 名
   */
  firstName: string;
  /**
   * 邮箱
   */
  email: string;
  /**
   * 认证时间
   */
  authTime: number;
  /**
   * 角色
   */
  roles: Array<string>;
}
/**
 * 认证管理器
 */
class AuthManager {
  /**
   * token
   */
  accessToken = ref('');
  /**
   * 用户信息
   */
  userInfo = ref<UserInfo>();
  /**
   * oidc 客户端
   */
  private oidc: UserManager;
  /**
   * 构造函数
   * @param settings oidc 客户端配置
   */
  constructor(settings: UserManagerSettings) {
    this.oidc = new UserManager(settings);
    // 当用户登录时，更新 token 和用户信息
    this.oidc.events.addUserLoaded((user) => {
      this.accessToken.value = user.access_token;
      this.userInfo.value = {
        userId: user.profile.sub,
        username: user.profile.preferred_username || '',
        token: user.access_token,
        lastName: '',
        firstName: '',
        email: user.profile.email || '',
        authTime: user.profile.auth_time || +new Date(),
        roles: (user.profile.roles as Array<string>) || [],
      };
      // 开启静默刷新，清除过期状态
      this.oidc.startSilentRenew();
      this.oidc.clearStaleState();
    });
    // 当更新 token 失败时，退出登录
    this.oidc.events.addSilentRenewError(() => {
      this.logout();
    });
    // 当 token 过期时，退出登录
    this.oidc.events.addAccessTokenExpired(() => {
      this.logout();
    });
    // 初始化时加载用户信息
    this.loadUser();
  }
  /**
   * 加载用户信息
   */
  async loadUser() {
    const user = await this.oidc.getUser();
    // 如果能加载出来则将信息放到 Ref 里
    if (user) {
      this.accessToken.value = user.access_token;
      this.userInfo.value = {
        userId: user.profile.sub,
        username: user.profile.preferred_username || '',
        token: user.access_token,
        lastName: '',
        firstName: '',
        email: user.profile.email || '',
        authTime: user.profile.auth_time || +new Date(),
        roles: (user.profile.roles as Array<string>) || [],
      };
      this.oidc.startSilentRenew();
      this.oidc.clearStaleState();
    }
  }
  /**
   * 登录
   */
  login() {
    return this.oidc.signinRedirect();
  }
  /**
   * 检查是否已登录
   * @returns 是否已登录
   */
  async checkLogin(): Promise<boolean> {
    const user = await this.oidc.getUser();
    return user != null && !user.expired;
  }
  /**
   * 退出登录
   */
  logout() {
    this.oidc.stopSilentRenew();
    this.accessToken.value = '';
    this.userInfo.value = undefined;
    return this.oidc.signoutRedirect();
  }
  /**
   * 刷新 token
   * @param force 是否强制刷新
   */
  async refresh(force?: boolean) {
    // 如果不是强制刷新，则先检查用户可用，如果用户可用则不刷新
    if (!force) {
      const user = await this.oidc.getUser();
      if (user != null && !user.expired) {
        return user;
      }
    }
    return this.oidc.signinSilent();
  }
  /**
   * 登录回调
   */
  loginCallback() {
    return this.oidc.signinCallback();
  }
  /**
   * 重置密码
   */
  resetPassword() {
    // 这里使用 keycloak 登录流中的更新密码流实现
    this.oidc.signinRedirect({
      scope: 'openid',
      extraQueryParams: {
        // 这里设置额外参数时，带上 keycloak 的更新密码流
        kc_action: 'UPDATE_PASSWORD',
      },
    });
  }
}

/**
 * 认证插件
 */
const authPlugin: Plugin<UserManagerSettings> = {
  install: (app, options) => {
    const auth = new AuthManager(options);
    app.provide(PROVIDE_KEY, auth);
  },
};

/**
 * 使用认证管理器
 * @returns 认证管理器
 */
const useAuthManager = () => {
  return inject<AuthManager>(PROVIDE_KEY);
};

export { authPlugin, useAuthManager };