Menggunakan Authentication Pada Project Buku Resep – 1

by

Pengenalan Authentication

Setelah memahami penggunaan http interceptors, kita akan gunakan untuk menerapkan authentication pada project Buku Resep.

Sebelumnya, mari kita pahami bagaimana authentication bekerja pada single page application. (lihat diagram dibawah).

Pertama client akan mengirimkan auth data, misalnya email dan password. Kemudian server akan melakukan token encoding yang akan dikembalikan kepada client.

Token oleh client dapat disimpan dalam local storages. Digunakan ketika suatu proses request membutuhkan authentication.

Setup Project

Kita akan tambahkan component baru untuk melakukan login. Buat folder baru dengan nama auth. Kemudian buat component auth.component.ts.

import { Component } from "@angular/core";

@Component({
    selector : 'app-auth',
    templateUrl : './auth.component.html'
})
export class AuthComponent{

}

buat file template auth.component.html

<div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
        <form>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" class="form-control">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control">
            </div>    
            <hr>        
            <div>
                <button class="btn btn-primary">Sign up</button> &nbsp; <button class="btn btn-primary">Switch to login</button>
            </div>
        </form>
    </div>
</div>

Jika Anda membuat kedua file diatas secara manual, jangan lupa untuk registrasi component di app.module.ts

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import { DropDownDirective } from './shared/dropdown.directive';
import { ShoppingListService } from './shopping-list/shopping-list.service';
import { AppRoutingModule } from './app-routing.module';
import { RecipeHomeComponent } from './recipes/recipe-home/recipe-home.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
import { RecipeService } from './recipes/recipe.service';
//tambahkan file auth.component jika IDE tidak otomatis.
import { AuthComponent } from './auth/auth.component'; 

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
    RecipeDetailComponent,
    RecipeItemComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    DropDownDirective,
    RecipeHomeComponent,
    RecipeEditComponent,
    AuthComponent //registrasi auth component
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [ShoppingListService, RecipeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Kemudian kita tambahkan route untuk component auth, buka file app-routing.module.ts,

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { AuthComponent } from "./auth/auth.component";
import { RecipeDetailComponent } from "./recipes/recipe-detail/recipe-detail.component";
import { RecipeEditComponent } from "./recipes/recipe-edit/recipe-edit.component";
import { RecipeHomeComponent } from "./recipes/recipe-home/recipe-home.component";
import { RecipesComponent } from "./recipes/recipes.component";
import { ShoppingListComponent } from "./shopping-list/shopping-list.component";
import { RecipesResolverService } from "./recipes/recipes-resolver.service";

const appRoutes: Routes = [
    {path: '', redirectTo:'/recipes', pathMatch: 'full'},
    {path: 'recipes', component: RecipesComponent, children:[  
        {path: '', component: RecipeHomeComponent},
        {path: 'new', component: RecipeEditComponent},
        {path: ':id', component: RecipeDetailComponent, resolve: [RecipesResolverService]},
        {path: ':id/edit', component: RecipeEditComponent, resolve: [RecipesResolverService]}
    ]},
    {path: 'shopping-list', component: ShoppingListComponent},
    {path: 'auth', component: AuthComponent}
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{
}

Kemudian tambahkan route pada header/header.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Buku Resep</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">          
          <li class="nav-item"><a class="nav-link" routerLinkActive="active" routerLink="/recipes">Recipes</a></li>
          <!-- tambahkan route untuk melakukan authentication -->
          <li class="nav-item"><a class="nav-link" routerLinkActive="active" routerLink="/auth" >Login</a></li>
          <li class="nav-item"><a class="nav-link" routerLinkActive="active" routerLink="/shopping-list" >Shopping List</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown" appDropDown>
            <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
            appDropdown>
              Manage
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" (click)="onSaveData()">Save Data</a></li>
              <li><a class="dropdown-item" (click)="onFetchData()">Get Data</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Berikut kurang lebih tampilan dari halaman login

Sampai disini kita sudah melakukan setup awal, pada modul berikutnya kita akan mulai tambahkan form handling dan validasi.

Sharing is caring:

Leave a Comment