与Keyloak的角度12集成，构建问题 [英] Angular 12 integration with Keycloak, build problems

问题描述

我正在尝试执行以下教程，以将角度12应用程序与Keycloak集成：Keycloak Integration with Angular Frontend(我查看了其他类似的教程，说明相同)。

如本文所述，我在srcenvironmentsenvironment.ts中插入了以下行：

import { KeycloakConfig } from 'keycloak-angular';

// Add here your keycloak setup infos
let keycloakConfig: KeycloakConfig = {
  url: 'http://<my-keycloak-ip:8088>/auth',
  realm: '<my-realm-name>',
  clientId: '<my-client-id>',
  "credentials": {
    "secret": "<my-client-secret>"
  }  
};

export const environment = {
...
  keycloak: keycloakConfig,
...
};

当我使用ng serve启动应用程序时，我收到以下生成错误：

Error: src/environments/environment.ts:14:7 - error TS2322: Type '{ url: string; realm: string; clientId: string; credentials: { secret: string; }; }' is not 
assignable to type 'KeycloakConfig'.
Object literal may only specify known properties, and '"credentials"' does not exist in type 'KeycloakConfig'.

14       "credentials": {
~~~~~~~~~~~~~~~~
15         "secret": "<my-client-secret>"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
17       }
~~~~~~~

我使用的是ANGLE V12和KEYCOAK-ANGLE 8.2.0+KEYCOAK-js 13.0.1，无论如何，下面都是完整的ng version输出和package.json内容。

ng version：

ng version

     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ?  | '_  / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.0.4
Node: 12.18.0
Package Manager: npm 6.14.4
OS: win32 x64

Angular: 12.0.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.4
@angular-devkit/build-angular   12.0.4
@angular-devkit/core            12.0.4
@angular-devkit/schematics      12.0.4
@schematics/angular             12.0.4
rxjs                            6.5.5
typescript                      4.2.4

package.json：

{
  "name": "<my-angular-app>",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.4",
    "@angular/cdk": "^12.0.4",
    "@angular/common": "~12.0.4",
    "@angular/compiler": "~12.0.4",
    "@angular/core": "~12.0.4",
    "@angular/forms": "~12.0.4",
    "@angular/material": "^12.0.4",
    "@angular/platform-browser": "~12.0.4",
    "@angular/platform-browser-dynamic": "~12.0.4",
    "@angular/router": "~12.0.4",
    "admin-lte": "^3.0.5",
    "keycloak-angular": "^8.2.0",
    "keycloak-js": "^13.0.1",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.4",
    "@angular/cli": "~12.0.4",
    "@angular/compiler-cli": "~12.0.4",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.2.4"
  }
}

推荐答案

我不会遵循随机教程。特别是如果他们在角度应用程序中暴露了客户端秘密=任何人都可以在浏览器中读取该秘密。所以秘密将不再是秘密。

当最终用户可能查看和修改代码时，客户端应用程序被认为是公共的。这包括单页应用程序(SPA)或任何移动或本地应用程序。在这两种情况下，应用程序都无法向恶意用户保密。

Public client(无密码客户端)必须在SPA应用程序和OIDC流中使用，而OIDC流不使用密码-Authorization Code Flow with PKCE。使用成熟的OIDC认证库，例如https://github.com/damienbod/angular-auth-oidc-client或正确配置keycloak-js库(例如checkLoginIframe: false, pkceMethod: 'S256'-检查文档)。

这篇关于与Keyloak的角度12集成，构建问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！