Keycloak-Angular 开源项目教程

72 0 0

Keycloak-Angular 开源项目教程

keycloak-angularEasy Keycloak setup for Angular applications.项目地址:https://gitcode.com/gh_mirrors/ke/keycloak-angular

项目介绍

Keycloak-Angular 是一个开源项目，旨在简化在 Angular 应用中集成 Keycloak 身份验证和授权的过程。Keycloak 是一个开源的身份和访问管理解决方案，提供了用户认证、用户管理、权限控制等功能。Keycloak-Angular 通过提供一组 Angular 服务和指令，使得在 Angular 应用中使用 Keycloak 变得更加容易和直观。

项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 Angular CLI。然后，通过以下命令安装 Keycloak-Angular 和 Keycloak JS：

npm install keycloak-angular keycloak-js

配置 Keycloak

在 Angular 项目的 src/app 目录下创建一个 keycloak.config.ts 文件，内容如下：


import { KeycloakConfig } from 'keycloak-js';
 
const keycloakConfig: KeycloakConfig = {
  url: 'https://your-keycloak-server/auth',
  realm: 'your-realm',
  clientId: 'your-client-id'
};
 
export default keycloakConfig;

初始化 Keycloak

在 app.module.ts 中初始化 Keycloak：


import { NgModule, APP_INITIALIZER } from '@angular/core';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import keycloakConfig from './keycloak.config';
 
function initializeKeycloak(keycloakService: KeycloakService) {
  return () =>
    keycloakService.init({
      config: keycloakConfig,
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/assets/silent-check-sso.html'
      }
    });
}
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, KeycloakAngularModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

保护路由

在 app-routing.module.ts 中使用 Keycloak 保护路由：


import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { KeycloakGuard } from 'keycloak-angular';
import { HomeComponent } from './home/home.component';
import { ProtectedComponent } from './protected/protected.component';
 
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'protected', component: ProtectedComponent, canActivate: [KeycloakGuard] }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}