How to use login from keycloak service angular?

Question

I am working on a project with Angular in front, and JavaSpring Boot at the back. I use keycloak to secure connection.

I have allready configured the back. I configured also the keycloak server with 2 clients (api and web as it is described there Paramétrage d’un domaine Keycloak). I am trying to configure the front with keycloak Angular

So I followed this tutorial, everthing is fine. But I dont understand how can I link the credential from a formular in my component with the login method... Do you know how to use the keycloak service ?

For now, I have this code in addition to the configuration, and I would like to implement connection method using the keycloak service:

<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

So much for me, I misunderstood the principle of OpendId Connect.

I thought I would have to create the login form. But I need to contact the keycloak server that will return a form page to me.