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:
|
1 2 3 4 |
cd H:\sourcedev-test ng new ang9-auth-jwt-lumen7 |
|
1 2 3 4 |
? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS |
Services
auth
Masuk ke direktori project selanjutnya buat service baru dengan nama auth.
Dari commmand prompt ketikkan perintah berikut:
|
1 2 3 4 |
cd ang9-auth-jwt-lumen7 ng g s _services/auth |
|
1 2 3 4 |
CREATE src/app/_services/auth.service.spec.ts (347 bytes) CREATE src/app/_services/auth.service.ts (133 bytes) |
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:
|
1 2 3 |
ng g s _services/token-storage |
|
1 2 3 4 |
CREATE src/app/_services/token-storage.service.spec.ts (388 bytes) CREATE src/app/_services/token-storage.service.ts (141 bytes) |
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:
|
1 2 3 |
ng g s _services/user |
|
1 2 3 4 |
CREATE src/app/_services/user.service.spec.ts (347 bytes) CREATE src/app/_services/user.service.ts (133 bytes) |
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:
|
1 2 3 |
ng g c register |
|
1 2 3 4 5 6 7 |
CREATE src/app/register/register.component.html (23 bytes) CREATE src/app/register/register.component.spec.ts (642 bytes) CREATE src/app/register/register.component.ts (283 bytes) CREATE src/app/register/register.component.css (0 bytes) UPDATE src/app/app.module.ts (483 bytes) |
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:
|
1 2 3 |
ng g c login |
|
1 2 3 4 5 6 7 |
CREATE src/app/login/login.component.html (20 bytes) CREATE src/app/login/login.component.spec.ts (621 bytes) CREATE src/app/login/login.component.ts (271 bytes) CREATE src/app/login/login.component.css (0 bytes) UPDATE src/app/app.module.ts (561 bytes) |
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:
|
1 2 3 |
ng g c profile |
|
1 2 3 4 5 6 7 |
CREATE src/app/profile/profile.component.html (22 bytes) CREATE src/app/profile/profile.component.spec.ts (635 bytes) CREATE src/app/profile/profile.component.ts (279 bytes) CREATE src/app/profile/profile.component.css (0 bytes) UPDATE src/app/app.module.ts (647 bytes) |
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:
|
1 2 3 |
ng g c home |
|
1 2 3 4 5 6 7 |
CREATE src/app/home/home.component.html (19 bytes) CREATE src/app/home/home.component.spec.ts (614 bytes) CREATE src/app/home/home.component.ts (267 bytes) CREATE src/app/home/home.component.css (0 bytes) UPDATE src/app/app.module.ts (721 bytes) |
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:
|
1 2 3 |
ng serve |
Jika anda ingin menjalankan Angular 9 pada port tertentu misalnya 8080, gunakan perintah berikut:
|
1 2 3 |
ng serve --port 8080 |
Selanjutnya buka browser dan ketikkan URL http://localhost:4200
Note: Jangan lupa untuk menjalankan Back End Server.
Registrasi
Pilih menu Register kemudian coba inputkan data user baru seperti berikut:
Login
Pilih menu Login kemudian coba login menggunakan user yang sudah di register pada langkah sebelumnya seperti berikut:
Jika berhasil Login maka akan tampil menu Profile seperti berikut:
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:
