如何使用 keycloak 服務 angular 登錄？

Question

我正在做一個項目，前面是 Angular，后面是 JavaSpring Boot。 我使用 keycloak 來保護連接。

我已經配置好后面了。 我還配置了帶有 2 個客戶端的 keycloak 服務器（api 和 web，因為它在Paramétrage d'un domaine Keycloak中有描述）。 我正在嘗試使用keycloak Angular配置前面

所以我按照本教程進行操作，一切都很好。 但我不明白如何將組件中公式的憑據與登錄方法聯系起來……你知道如何使用 keycloak 服務嗎？

現在，除了配置之外，我還有這段代碼，我想使用 keycloak 服務實現連接方法：

<form [formGroup]="loginForm" (ngSubmit)="login()">

  <div class="form-section">
    <label>{{ 'login.username' | translate}}</label>
    <input type="text" formControlName="username"/>
  </div>

  <div class="form-section">
    <label>{{ 'login.password' | translate}}</label>
    <input type="password" formControlName="password"/>
  </div>

  <button>Submit</button>

</form>

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router} from '@angular/router';
import {TranslateService} from '@ngx-translate/core';
import {isArray} from 'rxjs/internal-compatibility';
import {KeycloakService} from 'keycloak-angular';

@Component({
  selector: 'uts-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  authenticationError = null;

  constructor(private keycloakService: KeycloakService,
              private router: Router,
              private translateService: TranslateService,
              private formBuilder: FormBuilder) {
  }

  ngOnInit() {

    this.loginForm = this.formBuilder.group({
      username: ['', [Validators.required]],
      password: ['', [Validators.required]]
    });
  }

  login() {
    ...
  }
}

Answer 1

對我來說，我誤解了 OpendId Connect 的原理。

我以為我必須創建登錄表單。 但是我需要聯系 keycloak 服務器，它將向我返回一個表單頁面。