如何在Angular 14单页应用中通过Okta识别用户首次登录

oktaAuth.getUser()只能拿到用户的基础属性（比如邮箱、用户名），登录相关的元数据（首次登录标记、上次登录时间）不在这个接口的返回里，得用下面两种方法获取：

方法1：调用Okta Management API（数据最准确） #

这种方式需要先在Okta后台配置API权限，然后通过接口拉取用户的完整登录信息：

步骤1：配置Okta API权限 #

1. 登录Okta控制台，进入API > Tokens，创建一个API Token，必须勾选okta.users.read权限
2. 注意：这个Token是敏感信息，绝对不能直接写在前端代码里，生产环境一定要通过后端代理请求

步骤2：在Angular中实现代码 #

import { OktaAuthService } from '@okta/okta-angular';
import { HttpClient } from '@angular/common/http';

constructor(
  private oktaAuth: OktaAuthService,
  private http: HttpClient
) {}

async checkFirstLoginStatus() {
  // 获取当前用户ID
  const currentUser = await this.oktaAuth.getUser();
  const userId = currentUser.id;

  // 构造Okta Management API请求地址
  const oktaApiEndpoint = `https://你的Okta域名.com/api/v1/users/${userId}?expand=lastLogin`;
  // 生产环境请从后端获取API Token，不要硬编码
  const apiToken = '你的Okta API Token';

  try {
    const userFullInfo = await this.http.get(oktaApiEndpoint, {
      headers: {
        'Authorization': `SSWS ${apiToken}`,
        'Accept': 'application/json'
      }
    }).toPromise();

    // 判断是否首次登录：lastLogin为空就是第一次登录
    const isFirstLogin = !userFullInfo['lastLogin'];
    // 上次登录时间（首次登录则为null）
    const lastLoginDateTime = userFullInfo['lastLogin'];

    console.log('是否首次登录:', isFirstLogin);
    console.log('上次登录时间:', lastLoginDateTime);
    // 这里可以根据isFirstLogin做后续逻辑处理
  } catch (error) {
    console.error('获取用户登录信息失败:', error);
  }
}

方法2：通过ID Token自定义声明获取（无需额外API调用） #

如果不想调用外部API，可以在Okta后台配置自定义声明，把登录元数据注入到ID Token里，前端直接解析就能拿到：

步骤1：在Okta控制台配置自定义声明 #

1. 进入Security > API > Authorization Servers，选择你在用的授权服务器
2. 切换到Claims标签，点击Add Claim添加两个声明：
   • 第一个声明：
     • Name: isFirstLogin
     • Include in token type: ID Token (Always)
     • Value type: Expression
     • Value: user.lastLogin == null
   • 第二个声明：
     • Name: lastLogin
     • Include in token type: ID Token (Always)
     • Value type: Expression
     • Value: user.lastLogin

步骤2：在Angular中解析ID Token #

import { OktaAuthService } from '@okta/okta-angular';

constructor(private oktaAuth: OktaAuthService) {}

async getLoginMetadata() {
  const idToken = await this.oktaAuth.getIdToken();
  const tokenPayload = idToken.claims;

  // 从自定义声明中取数据
  const isFirstLogin = tokenPayload.isFirstLogin;
  const lastLoginTime = tokenPayload.lastLogin;

  console.log('是否首次登录:', isFirstLogin);
  console.log('上次登录时间:', lastLoginTime);
}

注意点 #

• 方法1的API Token必须通过后端转发，前端暴露会导致安全风险
• 用户首次登录后，Okta会自动更新lastLogin字段，后续登录就能正常获取到上次登录时间

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