如何在Angular中不依赖第三方JS库，通过Keycloak URL生成Token

实现思路 #

基于Keycloak的client_credentials授权模式，使用Angular原生HttpClient发送POST请求到指定令牌接口，提交认证所需参数，直接获取访问令牌，全程无需依赖第三方JS库。

步骤与代码实现 #

1. 创建认证服务

生成auth.service.ts封装令牌获取逻辑：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private tokenUrl = 'https://auth.mydomain.com/auth/realms/RealmName/protocol/openid-connect/token';
  
  constructor(private http: HttpClient) { }

  /**
   * 获取Client Credentials模式令牌
   * @param clientId 客户端ID
   * @param clientSecret 客户端密钥
   * @param scope 可选权限范围
   */
  getClientToken(clientId: string, clientSecret: string, scope?: string): Observable<any> {
    // 构造x-www-form-urlencoded格式的请求参数
    const body = new URLSearchParams();
    body.set('grant_type', 'client_credentials');
    body.set('client_id', clientId);
    body.set('client_secret', clientSecret);
    if (scope) body.set('scope', scope);

    const headers = new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded'
    });

    return this.http.post(this.tokenUrl, body.toString(), { headers });
  }
}

2. 在业务代码中调用服务

在组件或其他服务中注入AuthService，实现令牌获取与使用：

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  private clientId = 'your-real-client-id';
  private clientSecret = 'your-real-client-secret';

  constructor(private authService: AuthService) {
    this.getToken();
  }

  getToken(): void {
    this.authService.getClientToken(this.clientId, this.clientSecret)
      .subscribe({
        next: (res) => {
          const accessToken = res.access_token;
          const expires = res.expires_in;
          // 可将token存入localStorage或内存，用于后续API请求的Authorization头
          console.log('获取令牌成功:', accessToken);
        },
        error: (err) => {
          console.error('令牌获取失败:', err);
        }
      });
  }
}

3. 必要配置

确保项目已导入HttpClientModule，在app.module.ts中添加：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他模块
    HttpClientModule
  ]
})
export class AppModule { }

关键注意事项 #

• client_secret属于敏感信息，禁止硬编码，建议通过environment.ts等环境变量配置，生产环境需做好变量安全管控。
• 令牌有效期expires_in以秒为单位，可基于此实现自动刷新逻辑。
• 必须使用application/x-www-form-urlencoded格式提交参数，否则Keycloak接口会返回错误。

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