Angular Authenticaton Yapımı

ng new <project-name>

ng g c login

<!--login.component.html-->

<div fxFill fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="1.5rem" class="mat-typography">
  <div class="login-container" fxLayout="row" fxLayoutAlign="center">
    <mat-card fxFlex="90%" fxFlex.sm="66%" fxFlex.md="50%" fxFlex.gt-md="33%" class="login-box">
      <form (ngSubmit)="login()" [formGroup]="loginForm" novalidate>
        <div class="login-error" [hidden]="!error || isLoading" translate>
          Username or password incorrect.
        </div>
        <br />
        <div class="login-fields" fxLayout="column">
          <mat-form-field [hideRequiredMarker]="true">
            <input type="text" matInput formControlName="username" autocomplete="username"
              [placeholder]="Kullanıcı Adı" required />
            <mat-error *ngIf="loginForm.controls.username.invalid && loginForm.controls.username.touched">
              <span translate>Kullanıcı Adı giriniz</span>
            </mat-error>
          </mat-form-field>
          <mat-form-field [hideRequiredMarker]="true">
            <input type="password" matInput formControlName="password" autocomplete="current-password"
              [placeholder]="Şifre" required />
            <mat-error *ngIf="loginForm.controls.password.invalid && loginForm.controls.password.touched">
              <span translate>Şifre giriniz</span>
            </mat-error>
          </mat-form-field>
          <mat-slide-toggle color="primary" formControlName="remember" translate>Beni hatırla</mat-slide-toggle>
          <br />
          <button mat-raised-button color="primary" type="submit" [disabled]="loginForm.invalid || isLoading">
            <app-loader class="inline-loader" [isLoading]="isLoading"></app-loader>
            <span translate>Giriş</span>
          </button>
        </div>
      </form>
    </mat-card>
  </div>
</div>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { finalize } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';


export interface Credentials {
  // Customize received credentials here
  username: string;
  token: string;
  role: string;
  id: number;
}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, OnDestroy {
  loginForm!: FormGroup;
  isLoading = false;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private formBuilder: FormBuilder
  ) {
    this.createForm(); //html'de yazdığım inputlar için bir form oluşturuyorum.
  }

  ngOnInit() { }

  ngOnDestroy() { }

  login() {
    //form submit olunca bu fonksiyon tetikleniyor.
    this.isLoading = true;
    const login$ = this.authLogin(this.loginForm.value); //form bilgilerini authLogin fonksiyonuna atıyorum
    login$
      .pipe(
        finalize(() => {
          this.loginForm.markAsPristine();
          this.isLoading = false;
        }),
        untilDestroyed(this)
      ).subscribe(
        credentials => {
          console.log(`${credentials.username} successfully logged in`)
        },
        error => {
          console.warn(`Login error: ${error}`);
        }
      );
  }

  authLogin(context: LoginContext)Observable<Credentials> {
      //burada ise backend'ime istek atıyorum
    return this.http.post<Credentials>('http://localhost:5001/api/Login', context).pipe(tap(
      data => {
          //gelen bilgileri setCredentials fonksiyonuna atıp, bilgileri kaydedicem.
        this.setCredentials(data, context.remember);
      }
    ));
  }
 
  setCredentials(credentials?: any, remember?: boolean) {
    this._credentials = credentials || null;

    if (credentials) {
      const storage = remember ? localStorage : sessionStorage;
      storage.setItem(credentialsKey, JSON.stringify(credentials));
        //bazı kontrolleri sağladıktan sonra bu bilgileri stroge kaydedip daha sonra projemde kullanıcam
        //artık login olduk
    } else {
      sessionStorage.removeItem(credentialsKey);
      localStorage.removeItem(credentialsKey);
        //eğer bilgilerimiz doğru değil ise session kill ediyor ve giriş sağlayamıyorsunuz.
    }
  }

  private createForm() {
     //en üstte oluşturduğum formun kodları
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
      remember: true
    });
  }
}