Laravel ve Angular2 ile jwt tabanlı kimlik doğrulama

Laravel ve Angular2 ile jwt tabanlı kimlik doğrulama

Laravel ve Angular2 kullanarak jwt tabanlı kimlik doğruluma nasıl yapılır?

İlk olarak nedir bu jwt(Json Web Token) mantığı ?

Şöyle ki

  • Kullanıcı sunucuya email ve parola bilgilerini gönderir
  • Sunucu kontrol eder ve doğruysa sunucuda bulunan özel anahtarla kullanıcı bilgilerini şifreleyerek geri bir token gönderir
  • Bu token’ın içinde kullanıcıya ait bilgiler olduğu gibi bitiş tarihi ve url gibi bilgiler de yer alır, sunucudaki özel anahtarla şifrelendiğinden 3. şahıslar tarafından bilgilerin okunması mümkün değildir. Tabi anahtarı ele geçirmezlerse.
  • Client bu token bilgisini alır ve browserda local storage’a kaydeder
  • Bundan sonra sunucuyla iletişime geçeceği zaman artık her seferinde local storage’dan  token değerini okuyup gönderir. Tabi token değerini her seferinde manuel olarak göndermek büyük külfet oluşturacaktır. Bunu çözmek için http header bilgisine token değerini ekleyerek tüm isteklerde otomatik sunucuya gitmesi sağlanabilir.
  • Sunucu gelen token değerini alır ve kendinde bulunan özel anahtar ile değeri kontrol eder.

Mantık bu şekilde. Şimdi bununla ilgili ilk olarak Laravel 5.4 tarafında neler yaptığımıza bakalım.

Projemizi başlatalım

 

Genel key değerimizi oluşturalım.

 

.env dosyasında database bilgilerimizi girelim

 

İlgili Jwt paketimizi kuralım


config/app.php
de jwt-auth tanımlamasını yapalım

 

İlgili paketi register edelim

 

jwt-auth için gizli anahtarımızı hazırlamamız gerek.

artık config/jwt.php içinde secret  key oluşturuldu.

 

Şimdi de default gelen user tablosunu aktifleştirmemiz gerek.

 

Artık ön hazırlıklarımız tamam.

Controller ve route dosyalarımızı oluşturalım

app/Http/Controllers/Authentication.php

routes/api.php 

http://127.0.0.1:8000/api/register ve http://127.0.0.1:8000/api/login adreslerine post ile istekte bulunabiliriz.
Controller dosyamızda register ve login metotları şöyle olacak.

app/Http/Controllers/Authentication.php

Artık gelen form verileri ile kullanıcı açıp  login kontrolü yapabiliyoruz. Diğer sayfalarımızda sadece kimlik doğrulaması yapılmış kullanıcılara izin vereceğiz. Bunun için her sayfada jwt token değerini kontrol etmek gerekiyor. ama kendimizi tekrar etmemek adına bunu middleware ile route tanımlarında tek seferde yapacağız.

routes/api.php dosyamız şöyle olacak

Kimlik doğrulaması gereken sayfalar için bir route group oluşturduk. Burada /api/user  isteklerinde jwt.auth middleware devreye girecek.  middleware ise şöyle tanımlıyoruz.

Http/Kernel.php

Http/MiddleWare/VerifyJWTToken.php

Token değeri yoksa veya sahte / zamanı geçmiş bir token gönderilmişse hata verecek.

 

Angular.js 2 Tarafı

Projemizi oluşturalım

Angular cli ile temel componentlerimizi oluşturalım

Angular’da route oluşturma

app/Route.ts 

Route’larımızı sisteme tanıtalım app/app.module.ts

Route sisteminin çalışması için tanımlama yapmamız gerek.

app/app.component.html

Önce Route tanımlarını yaptık, app.module dosyasında bunu sisteme tanıttık ve en sonunda <router-outlet> ile componentlerin nerede gözükeceğini ayarladık.

Şimdi localhost:4200/login dediğimizde LoginComponent çağrılacak ve app/login/login/login.component.html dosyasını render edecek.

app/login/login/login.component.ts

app/login/login/login.component.html

#f ile ngForm directive tanımlıyoruz. Artık Formumuz #f değişkeninde ngSubmit ile formdaki değerleri LoginComponent’deki  login metoduna gönderiyoruz.

LoginComponent’de HttpClient ile form değerini laravel ile oluşturduğumuz api endpoint’e gönderiyoruz. Bilgiler doğru olmadığı için hata mesajı döndürecek. O zaman hemen yeni kullanıcı açalım ve doğru bilgileri gönderelim

app/login/register/register.component.ts

 

app/login/register/register.component.html


http://localhost:4200/register dediğimizde form çıkacak ve ngSubmit olayında kaydol metodu ile verileri laravel tarfındaki /register göndereceğiz. Herşey yolundaysa girilen bilgiler ile login olup local storage’a token değerinin yazılmış olması gerekiyor.

 

Login kısmında bu işi servis ile yaparsak diğer componentlerden de erişebiliriz. Şimdi bir servis yazalım ve login işlemini oradan yapalım.

app/services/auth.service.ts

Servisi app.module ile sisteme tanıtalım : app/app.module.ts

yeni app/login/login/login.component.ts  dosyamız servis ile şöyle olacak

 

Kimlik oğrulaması gereken yerlerde bu token değerini her seferinde otomatik göndereceğiz demiştik. Sözümüzü tutalım şimdi.

app/Interceptors.ts


ve Interceptor’u sisteme tanıtalım app/app.module.ts 


Local Storage’da token değeri varsa tüm istekler header’da Authorization adıyla sunucuya iletilecek.

 

Angularda kimlik doğrulama gerektiren sayfalarda her sayfada ayrı ayrı kimlik doğrulama yapmak yerine route tanımları yapılırken bu işi halledebiliriz. Aynı laravel jwt.auth middleware mantığı gibi.

Öncelikle bir servis yazıyoruz

app/services/auth-guard.service.ts

app/app.module

AuthGuard servisimizde CanActivate metodu ile AutService’den kullanıcının login olup olmadığını öğreniyoruz.
Login olmamışsa /login sayfasına gönderiyoruz.

Route dosyası  son haliyle şöyle olacak.

/dash adresine gelen istekler önce AuthGuard servisinde kontrol ediliyor ve ona göre işlem yapılıyor.

 

 

İlgili dosyaları buradan indirebilirsiniz