szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

====== Angular - Laravel API azonosítás ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Laravel =====

Az alábbi leírásban feltételezzük, hogy a Laravel oldalon az API számára Sanctum azonosítás
lett beállítva. Ebben az esetben, az azonosításhoz egy POST kérésre van szükségünk, az 
azonosító adatok a "body"-ban utaznak.


===== Angular szerviz =====

Ebben a leírásban fetch() függvény helyett az Angular saját kliensét, a **HttpClient**-t használjuk.
Az auth szolgáltatást egy shared nevű könyvtárban hozzuk létre. Nem kötelező ilyen könyvtár 
létrehozása, de ezzel elválaszthatjuk az alkalmazás többi részétől. 


A projekt könyvtárában:
  mkdir src/app/shared
  ng generate service shared/auth



Az **auth.service.ts** fájlban importáljuk a HttpClient modult:
<code javascript>
import { HttpClient } from '@angular/common/http';
</code>

Injektáljuk a HttpClient osztályt a konstruktor paramétereként:
<code javascript>
constructor(private http: HttpClient) { }
</code>


Létrehozunk egy **authUser()** vagy egy **login()** metódust az azonosításhoz. 
<code javascript>
  authUser(name: string, password: string) {
    let url = 'http://localhost:8000/api/login';

    let authData = {
      "name": name,
      "password": password
    }

    return this.http.post<any>(url, authData);
  }
</code>

===== Login felület =====

A **login.component.html** sablonban és a **login.component.ts** fájlban csoportosított
reaktív űrlapot használunk. 

<code html>
<form [formGroup]="loginForm">
    <label>Felhasználónév</label>
    <input formControlName="name">
    <br>
    
    <label>Jelszó</label>
    <input type="password" formControlName="password">
    <br>
    
    <button (click)="onLogin()">Belépés</button>
</form>
</code>

===== Login TypeScript =====

Importáljuk a **FormGroup**, **FormBuilder** és az általunk készített **AuthService** osztályokat.

<code javascript>
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from '../auth.service';
</code>

Készítünk egy FormGroup példányt loginForm néven:
  loginForm !: FormGroup;

Injektáljuk az AuthService, és FormBuilder osztályokat:
<code javascript>
  constructor(
    private authService: AuthService,
    private formBuilder: FormBuilder
    ) { }
</code>

A loginForm objektumot előkészítjük az ngOnInit() metódusban:

<code javascript>
    this.loginForm = this.formBuilder.group({
      name: [''],
      password: ['']
    })
</code>

Az onLogin() metódusban elkérjük az auth szervíztől az azonosítás adatait.

<code javascript>
  onLogin() {
    let user = this.loginForm.value.name;
    let pass = this.loginForm.value.password;

    this.authService.authUser(user, pass).subscribe({

      next: data => {
        localStorage.setItem('token', data.token);
        localStorage.setItem('username', data.name);
      },
      error: err => {
        console.log('Hiba! Az azonosítás sikertelen');
      }
    });
  }
</code>

===== Logout =====

Készíthetünk egy api/logout nevű végpontot Laravellel. 
Elküldjük a felhasználói tokent POST metódussal. 

Az API oldalon, a token törlődik. 


===== Guard =====

Az egyes útvonalak védelméről a guard nevű eszközzel tudunk gondoskodni.

A shared nevű könyvtárban fogom létrehozni (nem kötelező itt létrehozni):
  ng g guard shared/auth

Létrehozáskor rákérdez milyen típusokat szeretnénk:

<code>
>(*) CanActivate
 ( ) CanActivateChild
 ( ) CanDeactivate
 ( ) CanLoad
</code>

A szóközzel jelölhetek ki, a le és fel billentyűvel választhatok, az Enter billentyűre továbblép.

<code javascript auth.service.ts>
  isLoggedIn() {
    if (localStorage.getItem('currentUser') === null) {
      return false;
    }    
    let data:any = localStorage.getItem('currentUser');
    let currentUser = JSON.parse(data);
    let token = currentUser.token;
    return token;
  }
</code>


<code javascript auth.guard.ts>
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';
import { Router, RouterStateSnapshot, UrlTree } from '@angular/router';

import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private auth: AuthService,
    private router: Router
    ) {}
  canActivate(){
    if( this.auth.isLoggedIn() ) {
      return true;
    }
    this.router.navigate(['login']);
    return false;
  }
  
}

</code>


<code javascript app-routing.module.ts>
const routes: Routes = [
  {
    path: 'students', 
    component: StudentComponent,
    canActivate: [AuthGuard]
  },
  {path: '**', component: NopageComponent}
];
</code>

===== Függelék =====

<code javascript login/login.component.ts>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../shared/auth.service';

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

  loginForm !: FormGroup

  constructor(
    private auth: AuthService,
    private formBuilder: FormBuilder,
    private router: Router
    ) { }

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      user: [''],
      pass: ['']
    });
  }

  login() {
    let user = this.loginForm.value.user;
    let pass = this.loginForm.value.pass;
    this.auth.login(user, pass).subscribe({
      next: res => {
        if (res.success) {
          let data = JSON.stringify({
            token: res.data.token, 
            name: res.data.name
          });
          localStorage.setItem('currentUser', data);
          this.router.navigate(['groups']);
        }
      },
      error: err => {
        alert('Hiba! Az azonosítás sikertelen!')
      }
    });
  }
}

</code>


Laravel AuthController login függvény:

<code php>
    public function login( Request $request ) {

        if( Auth::attempt([ "name" => $request->name, "password" => $request->password ])) {

            $authUser = Auth::user();
            $success[ "token" ] = $authUser->createToken( "myapptoken" )->plainTextToken;
            $success[ "name" ] = $authUser->name;

            return $this->sendResponse( $success, "User signed in" );

        }else {
            return $this->sendError( "Sikertelen bejelentkezés", [ "error" => "Hibás adatok" ], 401);
        }
    }
</code>


Cookie használata:
<code javascript>
document.cookie = (`currentUser = ${data}`)
</code>