Authentication JWT Angular 9 Lumen 7

Authentication JWT Angular 9 Lumen 7 – Pada artikel kali ini kita akan belajar membuat Front End authentication menggunakan JWT (JSON Web Token) menggunakan Angular 9.

Untuk Back End kita menggunakan Lumen 7. Anda bisa melihat pada artikel sebelumnya disini.

Authentication JWT Lumen 7

 

Authentication JWT Angular 9 Lumen 7

Create Project

Buat project baru dengan nama ang9-auth-jwt-lumen7.
Dari command prompt ketikkan perintah berikut:

 

Services

auth

Masuk ke direktori project selanjutnya buat service baru dengan nama auth.
Dari commmand prompt ketikkan perintah berikut:

 
auth.service.ts

Buka file auth.service.ts pada direktori src/app/_services kemudian edit menjadi seperti berikut:

Simpan file auth.service.ts

 

token-storage

Buat service baru dengan nama token-storage.
Dari commmand prompt ketikkan perintah berikut:

 
token-storage.service.ts

Buka file token-storage.service.ts pada direktori src/app/_services kemudian edit menjadi seperti berikut:

Simpan file token-storage.service.ts

 

user

Buat service baru dengan nama user.
Dari commmand prompt ketikkan perintah berikut:

 
user.service.ts

Buka file user.service.ts pada direktori src/app/_services kemudian edit menjadi seperti berikut:

Simpan file user.service.ts

 

Http Interceptor

Buat folder baru dengan nama _helpers pada direktori src/app.

auth.interceptor.ts

Selanjutnya buat file baru dengan nama auth.interceptor.ts pada direktori src/app/_helpers kemudian ketikkan script berikut:

Simpan file auth.interceptor.ts

 

Components

index.html

Buka file index.html pada direktori src kemudian edit menjadi seperti berikut:

Simpan file index.html

 

Register

Buat components baru dengan nama register.
Dari commmand prompt ketikkan perintah berikut:

 

register.component.ts

Buka file register.component.ts pada direktori src/app/register kemudian edit menjadi seperti berikut:

Simpan file register.component.ts

 

register.component.html

Buka file register.component.html pada direktori src/app/register kemudian edit menjadi seperti berikut:

Simpan file register.component.html

 

register.component.css

Buka file register.component.css pada direktori src/app/register kemudian edit menjadi seperti berikut:

Simpan file register.component.css

 

Login

Buat components baru dengan nama login.
Dari commmand prompt ketikkan perintah berikut:

 

login.component.ts

Buka file login.component.ts pada direktori src/app/login kemudian edit menjadi seperti berikut:

Simpan file login.component.ts

 

login.component.html

Buka file login.component.html pada direktori src/app/login kemudian edit menjadi seperti berikut:

Simpan file login.component.html

 

login.component.css

Buka file login.component.css pada direktori src/app/login kemudian edit menjadi seperti berikut:

Simpan file login.component.css

 

Profile

Buat components baru dengan nama profile.
Dari commmand prompt ketikkan perintah berikut:

 

profile.component.ts

Buka file profile.component.ts pada direktori src/app/profile kemudian edit menjadi seperti berikut:

Simpan file profile.component.ts

 

profile.component.html

Buka file profile.component.html pada direktori src/app/profile kemudian edit menjadi seperti berikut:

Simpan file profile.component.html

 

Home

Buat components baru dengan nama home.
Dari commmand prompt ketikkan perintah berikut:

 

home.component.ts

Buka file home.component.ts pada direktori src/app/home kemudian edit menjadi seperti berikut:

Simpan file home.component.ts

 

home.component.html

Buka file home.component.html pada direktori src/app/home kemudian edit menjadi seperti berikut:

Simpan file home.component.html

 

App Module

app.module.ts

Buka file app.module.ts pada direktori src/app kemudian edit menjadi seperti berikut:

Simpan file app.module.ts

 

App Components

app.component.ts

Buka file app.component.ts pada direktori src/app kemudian edit menjadi seperti berikut:

Simpan file app.component.ts

 

app.component.html

Buka file app.component.html pada direktori src/app kemudian edit menjadi seperti berikut:

Simpan file app.component.html

 

App Routing

app-routing.module.ts

Buka file app-routing.module.ts pada direktori src/app kemudian edit menjadi seperti berikut:

Simpan file app-routing.module.ts

 

Testing Authentication JWT Angular 9 Lumen 7

Dari command prompt jalankan Angular 9 menggunakan perintah berikut:

 

Jika anda ingin menjalankan Angular 9 pada port tertentu misalnya 8080, gunakan perintah berikut:

 

Selanjutnya buka browser dan ketikkan URL http://localhost:4200

Gbr1 Authentication JWT Angular 9 Lumen 7 – Home
Gbr1 Authentication JWT Angular 9 Lumen 7 – Home

Note: Jangan lupa untuk menjalankan Back End Server.

 

Registrasi

Pilih menu Register kemudian coba inputkan data user baru seperti berikut:

Gbr2 Authentication JWT Angular 9 Lumen 7 – Register
Gbr2 Authentication JWT Angular 9 Lumen 7 – Register

 

Login

Pilih menu Login kemudian coba login menggunakan user yang sudah di register pada langkah sebelumnya seperti berikut:

Gbr3 Authentication JWT Angular 9 Lumen 7 – Login
Gbr3 Authentication JWT Angular 9 Lumen 7 – Login

 

Jika berhasil Login maka akan tampil menu Profile seperti berikut:

Gbr4 Authentication JWT Angular 9 Lumen 7 – Profile
Gbr4 Authentication JWT Angular 9 Lumen 7 – Profile

Sampai disini kita sudah berhasil membuat authentication JSON Web Token menggunakan Angular 9 dan Lumen 7. Pada artikel selanjutnya kita akan bahas Angular 9 dan Lumen 7 lebih jauh lagi.

 

Semoga bermanfaat.

Source Code bisa anda download disini:

Dewaweb Gives Your Website Only the Best!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *