如何在Angular应用中通过Keycloak Token加载用户信息

方法一：直接调用Keycloak用户信息端点 #

Keycloak原生提供了用户信息接口，无需依赖Keycloak-Angular的内置认证机制，直接用已获取的access token请求该接口即可拿到用户数据。

步骤： #

1. 确认接口地址
   接口格式固定为：{Keycloak服务器地址}/realms/{你的Realm名称}/protocol/openid-connect/userinfo
   示例：http://localhost:8080/realms/my-app-realm/protocol/openid-connect/userinfo

2. 在Angular中发起请求
   利用Angular的HttpClient发送GET请求，将access token放在Authorization请求头中，格式为Bearer {你的access token}。

   服务层示例代码：

   import { HttpClient, HttpHeaders } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class UserInfoService {
     // 替换为你的实际Keycloak用户信息端点
     private userInfoEndpoint = 'http://localhost:8080/realms/my-app-realm/protocol/openid-connect/userinfo';
   
     constructor(private http: HttpClient) {}
   
     fetchUserInfo(accessToken: string) {
       const requestHeaders = new HttpHeaders({
         'Authorization': `Bearer ${accessToken}`
       });
   
       return this.http.get(this.userInfoEndpoint, { headers: requestHeaders });
     }
   }
   

   组件层调用示例：

   import { Component } from '@angular/core';
   import { UserInfoService } from './user-info.service';
   
   @Component({
     selector: 'app-user-profile',
     templateUrl: './user-profile.component.html'
   })
   export class UserProfileComponent {
     userDetails: any;
   
     constructor(private userInfoService: UserInfoService) {}
   
     loadUserInfo() {
       // 替换为你已获取到的access token
       const targetToken = 'your-valid-access-token';
       this.userInfoService.fetchUserInfo(targetToken).subscribe({
         next: (data) => {
           this.userDetails = data;
           console.log('用户信息:', data);
         },
         error: (err) => {
           console.error('获取用户信息失败:', err);
         }
       });
     }
   }
   

方法二：解析JWT格式的Access Token（可选） #

如果你的access token是JWT格式，其payload部分已经包含了用户基础信息（如用户名、邮箱、角色等），可以直接解析token获取这些数据，无需额外请求接口。

步骤： #

1. 安装JWT解析工具
   可以使用@auth0/angular-jwt库简化解析流程：

   npm install @auth0/angular-jwt
   

2. 解析Token获取信息
   服务层示例代码：

   import { JwtHelperService } from '@auth0/angular-jwt';
   import { Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class TokenParserService {
     constructor(private jwtHelper: JwtHelperService) {}
   
     extractUserInfoFromToken(accessToken: string) {
       if (this.jwtHelper.isTokenExpired(accessToken)) {
         console.error('Token已过期');
         return null;
       }
       // 解析后返回token中的用户数据
       return this.jwtHelper.decodeToken(accessToken);
     }
   }
   

   组件层调用示例：

   import { Component } from '@angular/core';
   import { TokenParserService } from './token-parser.service';
   
   @Component({
     selector: 'app-user-profile',
     templateUrl: './user-profile.component.html'
   })
   export class UserProfileComponent {
     tokenUserInfo: any;
   
     constructor(private tokenParser: TokenParserService) {}
   
     parseTokenData() {
       const targetToken = 'your-valid-access-token';
       this.tokenUserInfo = this.tokenParser.extractUserInfoFromToken(targetToken);
       console.log('解析出的用户信息:', this.tokenUserInfo);
     }
   }
   

注意事项： #

• 解析JWT只能拿到token中预定义的字段，若需要用户自定义属性等详细数据，仍需调用Keycloak用户信息接口。
• 确保获取access token时包含openid scope，Keycloak默认该scope具备访问用户信息接口的权限，缺少的话会导致接口请求失败。

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