Question

我坚持设置授权。

我下载了keycloak-3-2-1.Final并建立了一个新的领域。

{
  "realm": "proteomics",
  "auth-server-url": "http://localhost:8080/auth",
  "ssl-required": "external",
  "resource": "account",
  "credentials": {
    "secret": "696caa69-9259-45f5-a264-0d9da083f933"
  },
  "use-resource-role-mappings": true
}

然后我开始了一个新的角度项目，其中包含了新的＆＃39;。在这个项目中，我添加了keycloak-js npm install --save keyclak-js

我现在的问题是，如何将所有这些东西连接在一起。在我的header.component.html上，我想要一个按钮来登录（验证）。任何人都可以解释我在哪里以及如何导入keycloak-js，如果还有什么遗漏，请给我一个提示来完成一个简单的登录页面？

app.compnent.ts

import { Component } from '@angular/core';
import { HeaderComponent } from './header/header.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<app-header></app-header>

header.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

header.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">ProtSkive</a>
    </div>
    <div class="navbar-collapse">
       <ul class="nav navbar-nav navbar-right">
         <button class="btn navbar-btn" id="login">Login</button> 
       </ul>    
    </div>
  </div>
</nav>

Answer 1

据我所知，Kecloak是一个独立的服务器，这意味着它独立于您的角度应用程序。如果您想在Keycloak中拥有导航栏，则必须更改登录页面主题设置。另外，您可以通过REST实现登录并构建自定义登录页面。

Angular中的Keycloak授权

1 个答案: