如何在 Angular 6 中实现 Keycloak？

Question

有人可以帮助我将 Keycloak 集成到 Angular 6 吗？ 我不知道我必须如何启动以及如何初始化 Javascript 适配器

Answer 1

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

那里描述了每个步骤，还包括一个如何集成的示例。

Answer 2

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

已针对 Angular 8+ 版本测试了版本 2+ 的 Angular Keycloak 依赖项

安装

npm i ng-keycloak

应用程序接口

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);
    });
  }

}