如何在 Angular 6 中实现 Keycloak？

Posted 2023-02-19

【中文标题】如何在 Angular 6 中实现 Keycloak？

【英文标题】：How to implement Keycloak in Angular 6?

【发布时间】：2019-05-10 18:35:14

【问题描述】：

谁能帮助我将 Keycloak 集成到 Angular 6 中？ 我不知道我必须如何开始以及如何初始化 javascript Adapter

【问题讨论】：

你好，马克斯。欢迎来到 ***。请在此处添加有关您要实现的目标的更多信息。另外，请添加一些示例代码来使用。如果您能提供Minimal, Complete, and Verifiable example，那就太好了。您可以使用StackBlitz 创建一个。顺便说一句，有一个 Keycloak 的 Angular 实现。你可以在这里找到它：keycloak-angular

最大启动，可以查看快速启动教程github.com/keycloak/keycloak-quickstarts/tree/latest/…

【参考方案1】：

我用过这个： https://github.com/mauriciovigolo/keycloak-angular

其中描述的每个步骤，以及如何集成的示例也包括在内。

【参考方案2】：

如果您使用 Angular 8+ 和 Keycloak OpenId Connect 来启用 REST 登录、注销、检查会话，那么您可以使用这个角度依赖：

Angular Keycloak Dependency for version 2+ tested for Angular version 8+

安装

npm i ng-keycloak

API

import  NgKeycloakModule  from 'ng-keycloak';

#用法

在您的应用模块中注册 NgKeycloakModule。

import  NgKeycloakModule  from 'ng-keycloak';

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  AppComponent  from './app.component';

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgKeycloakModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

在您的组件中使用 import NgKeycloakService。

import  Component, OnInit  from '@angular/core';
import  NgKeycloakService  from 'ng-keycloak';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent implements OnInit 

  username = 'YOUR_KEYCLOAK_USERNAME_TO_LOGIN';
  password = 'YOUR_KEYCLOAK_PASSWORD_TO_LOGIN';

  // The BASE_URL is empty in case the proxy-config is used from Angular to resolve the CORS error
  // If the CORS error is not present use the BASE URL as the keycloak url with the port number
  // Example BASE_URL = 'http://13.43.53.42:30224'
  keycloakConfig = 
    BASE_URL: '',
    realm: 'YOUR_REALM_NAME',
    clientId: 'YOUR_CLIENT_ID',
    credentials: 
        secret: 'YOUR_CLIENT_SECRET'
    
  ;

  constructor(private ngKeycloakService: NgKeycloakService)  

  ngOnInit(): void 

    // You need to set the Keycloak Configuration using _setkeycloakConfig(config) method before you
    // can use the Library
    this.ngKeycloakService._setkeycloakConfig(keycloakConfig);

    this.ngKeycloakService.logout().pipe().subscribe(logoutSuccessResponse => 
      console.log('Logout Success Response', logoutSuccessResponse);
    , (logoutErrorResponse) => 
      console.log('Logout Error', logoutErrorResponse);
    );

    this.ngKeycloakService.login(this.username, this.password).pipe().subscribe(loginSuccessResponse => 
      console.log('Login Success', loginSuccessResponse);
    , (loginErrorResponse) => 
      console.log('Login Error Response', loginErrorResponse);
    );

    this.ngKeycloakService.isLoggedIn().pipe().subscribe(loginStatusResponse => 
      console.log('Login Check Status', loginStatusResponse);
    , (loginStatusErrorResponse) => 
      console.log('Login Check Status Error', loginStatusErrorResponse);
    );