İçeriğe geç

Vue.js ve Django Rest Framework ile JWT Authentication

Okuma süresi 11 dakika

Herkese merhabalar. Bu yazıda ön tarafta Vuex ve Vue-Router ile birlikte Vue.js, arkada ise Django Rest Framework ile geliştirilmekte olan bir projede JWT(Json Web Tokens) ile nasıl kullanıcı doğrulaması yapabileceğimizden bahsedeceğim.

Talk is cheap show me code

Yapacaklarımızı sıralamak gerekirse:

  • Genel yapı hakkında konuşacağız.
  • Backend uygulamasını ayağa kaldıracak ve bağımlılıkları konfigüre edeceğiz.
  • Gerekli API endpointlerini oluşturacağız.
  • Frontend uygulamasını ayağa kaldıracağız.
  • State ve routing ayarlamalarını yapacağız.
  • Bootstrap dahil ederek projeyi biraz daha güzel hale getireceğiz.

Genel yapı.

Web uygulamalarının ayrılmaz parçalarından biri kullanıcı doğrulamasıdır. Kullanıcı doğrulaması ile istekte bulunan kullancıyı kontrol ederek davetsiz misafirlere karşı ilk korumayı sağlamış oluruz.

Django veya benzer full stack bir web framework ile çalışırken bu işlem genellikle framework tarafından yürütülür. Fakat birden fazla istemciye(web,mobil,desktop) hizmet verecek yapılarda ortak bir taban kullanarak doğrulama gerekmektedir.  HTTP protokolü kendi içinde bir doğrulama mekanizmasına sahiptir. Bu mekanizma gelen isteğe ilk olarak doğrulama şemasını döndürür. Daha sonra istemci şemanın gerektirdiği şekilde isteğini düzenler ve tekrar gönderir. En çok kullanılan yöntem ise token bazlı doğrulamadır. Client yani istemci sadece kullancısına ait olan ve içinde diğer kullanıcılardan ayırt edilebilmesini sağlayacak bir takım bilgiler içeren bir tokene sahiptir. Bu token istemci tarafında tutulur. İsteklerde backend uygulamasına gönderilip, kontrol edilir. Geçerli bir token ise doğrulama sağlanmış olur. Geçerli değil ise istek reddedilir ve yeni bir token elde edebilmesi adına kullanıcı yönlendirilir.

JWT ise yine bu adımları uygularken kullanılabilecek bir yaklaşımdır. Daha detaylı ve teknik bilgiye erişmek isterseniz.


Genel proje dosya yapısı.

 

Demo görüntüleri ve uygulanacaklar.

Demo uygulamamız 3 ayrı sayfadan oluşacak. Sırası ile ile kullanıcı kayıt sayfası, giriş sayfası, ve birtakım kullanıcı bilgisinin gösterildiği profil sayfası.

Kayıt sayfası.

demo app register page


Kullanıcı giriş sayfası.demo app login page


Kullanıcı profil sayfası.demo app user profile page


Django uygulamasının ayağa kaldırılması.

Bir sanal ortam oluşturduktan sonra gerekli bağımlılıkları yükleyelim ve kayıt altına alalım.

Uygulamamız hazır. Fakat DRF ve CORS uygulamalarını kayıt etmemiz ve ufak konfigürasyonlarını yapmamız gerekmekte.

Django cors headers esasen bir middleware. Tarayıcıların kullancısını korumak üzere kullandığı sınırlamaları backend ve frontend uygulamalarımızda esnetmek için bulunmakta. Daha detaylı CORS bilgisi için

Cors middlewarei projenizin gerekliliklerine göre değişmekle birlikte, CommonMiddleware gibi yanıt oluşturabilen middleware lerden önce ve olabildiğince ilk sıralarda olmalı.

Bunun yanında hangi originlerden gelen istekleri kabul edeceğimizi de belirtmemiz gerekmekte. Şu an oluşturmadık fakat standart bir Vue.js uygulaması 8080 portundan yayın yapmakta. Bu istekleri kabul edeceğimizi belirtelim.

Tamam gözüküyor. Hızlıca proje dizininde bir api klasörü oluşturalım. (Demo bir uygulama olduğu için herhangi bir django app oluşturmayacağız.)

serializers.py

views.py

Yukarıda yaptıklarımızı kısaca özetleyecek olursak User modelini baz alan bir model serializer oluşturduk. User modelinde bulunmayan bir kaç alanı da serializere ekledikten sonra create metodu çağrılmadan önce bir validasyona tabi tuttuk. Ayrıca bize fake bir data sağlaması adına serializer method field ile random bir grup ismi geri döndük.

views.py da ise 2 adet endpoint tanımladık. İlki kullanıcı kaydı için kullanılacak.

UserDetail ise JWT ile korunan kullanıcının birtakım bilgilerini serverdan talep ederken kullanacağı endpoint. Gelen doğrulanmış kullancıyı UserSerializer’e göre serialize edip geri dönmekte.

Not1: Model serializerler varsayılan olarak save metodları çağrıldığı zaman, create metodunu yürütürler. create metodu ise Meta classta tanımlanmış olan modelin default managerinde bulunan create  metodunu validasyondan geçirilen parametreler ile tetikleme eğilimindedirler.

Not2: Eğer model serializer de modelde direkt olarak bulunmayan fakat başka işlemler için bulunan alanlar var ise araya girip validated_data dan çıkartmanız gerekmekte. Aksi halde Django gelen verinin model tarafında karşılığı olmadığından dolayı hata fırlatacaktır.

Not3: Not1 de belirtildiği üzere User modelinin create metodu size kayıt edilmiş fakat hashlenmemiş bir parolaya sahip kullanıcı geri döndürür. Bundan dolayı direkt olarak model managerde tanımlı create_user metodunu çağırmamız gerekmektedir.


Son olarak ana proje dosyasındaki root urls.py dosyasına endpointlerimizi kaydetmemiz gerekmekte.

Son 2 endpoint bize simple-jwt paketi tarafından sağlanmakta. İlki sistemden bir token isteği yapmak için kullanılmakta. İstemci kullanıcı adı ve parolasından oluşan bir payload ile sistemden token elde edebilir. Bunun sonucunda access ve refresh olmak üzere 2 token dönülmekte. Son endpointte bununla ilgili. Eğer izin vermiş isek kullanıcı servere refresh tokenını gönderip yeni bir token talep edebilir. Django Rest Framework ve JWT authentication ile daha fazla bilgi almak isterseniz.


Vue.js uygulamasının ayağa kaldırılması.

Node.js, npm, vue-cli yüklü olduğu varsayılmıştır.

Proje dizininde vue cli yardımı ile varsayılan özelliklere sahip bir proje oluşturalım.

HelloWorld ve diğer componentleri temizleyelim.


Planlama.

Çalışmaya başlamadan önce genel hatlar ile düşünecek olursak kullanıcının backend ile etkileşime geçeceği 3 adet endpoint bulunmakta. Bu yüzden bir HTTP client oluşturmamız gerekmekte. Bu clienti kullanan bir servis yazmak uygulamamızı daha yönetilebilir hale getirecektir.

Daha sonra uygulama genelinde kullanılacak olan işlemleri veya veriyi tutması için bir central state management oluşturmamız gerekmekte. Böylece componentler arası iletişimlerde veya veri doğruluğu problemleri yaşamayıp tek bir yerden tüm uygulama datasını ve asenkron işlemleri yöneteceğiz. Teşekkürler Vuex 🙂

Birden fazla sayfası olan bir uygulama geliştirdiğimiz için bize bir ader router lazım olacak. Bu router gelen isteğin urline göre doğru componenti yükleyecek. Bunun yanında routelara guardlar ekleyerek erişimi kısıtlı hale getireceğiz.

Daha sonrasında componentlerimizi yazmamız ve uygulamamızı test etmemiz gerekmekte.

Genel hatlar ile yapılacak işlemler bunlar fakat adımlar içerisinde konuşacağımız ufak trickler yine olacak.

Öneri: Import error gibi hatalar almak istemiyorsanız en başta paylaşılan yapıyı dizininizde oluşturmanız yararınıza olacaktır.


Client ve servislerin oluşturulması.

.env.local

client.js

Sırası ile axios instance’ı yaratıyoruz. .env dosyasından backend root api okuyor base url ayarlıyoruz. Daha sonrasında kullanılacak olan content typeı geçiyoruz.

Token ile doğrulama yöntemlerinde tokenın istemci tarafında tutulduğundan bahsetmiştik. Web uygulamalarında bu görevi tarayıcıların localStorage’ı üstlenmekte. Buradan elde edilen token isteğin Authorization headerına eklenmekte ve istek o şekilde gönderilmekte.

Bu yönetimi sağlama adına axios ta interceptorlar bulunmakta. Global olarak o axios istemcisi üzerinden yapılan istekleri modifikasyona uğratabiliyoruz.

Aynı şekilde dönen cevapların sonuçlarına göre de bir takım işlemler yapabiliyoruz.

Eğer 401 yani kullanıcı doğrulama başarısız olmuş ise kullanıcıyı yeni bir token elde etmesi adına giriş sayfasına yönlendiriyoruz.

login sayfasında da bu hatayı alabileceğinden ötürü ufak bir kontrol yaparak, kullanıcının tekrar aynı sayfaya yönlendirilmesinin önüne geçiyoruz.

Not: Uygulama genelinde farklı doğrulama yöntemleri kullanacak iseniz interceptor’u parametrik hale getirebilirsiniz.

services/user-service.js

Servis payload ları alıp isteği yaptıktan sonra promise olarak bize geri döndürüyor.


Vuex yapısının oluşturulması.

Modern web uygulamalarında state yönetimi fazlası ile önemlidir. En basit tabir ile uygulamanızın merkezinde bulunan store, uygulamanızın herhangi bir yerindeki bir component veya herhangi bir dış servis ile iletişime geçebilir. Tamami ile reaktiftir. Değişen datayı kullanılan her yerde değiştirmek zorunda kalmazsınız. Ayrıca gelecek olan datanın doğruluğundan kesin olarak emin olursunuz.

Kendi içinde bir tarihe sahip olduğu için değişimleri izleyebilir ve bağlı olan değişimleri de çağırabilirsiniz.

Kısaca 5 unsurdan oluşur.

  • State (Veriyi saklar)
  • Mutations(Veriyi değiştirirken kullanılır. Senkron çalışır. State’i doğrudan değiştirir.)
  • Actions(Genellikle dış servisler ile çalışırken kullanılır. Asenkron çalışır. Gelen cevaba göre state’i güncellemek üzere bir mutation commit eder.)
  • Getters(Uygulamada hali hazırda bulunan state verisinin bir kısmını veya tamamını geri döndürebilir.)
  • Modules (Büyük uygulamalarda yönetimi kolaylaştırm adına kullanılır.)

Kısaca özetleyecek olursak genellikle componentler store da bulunan bir aksiyonu dispatch eder, aksiyonun işlemi yaptıktan sonra başarı durumuna göre bir mutation commitler. Mutation state içinde bulunan datayı değiştirir. Component içinde state datasını kullanan her kısım genellikle getters lar ile çağrılır. State değiştiği anda reaktif olarak gettersların döndürdüğü değerler değişir ve uygulama güncellenmiş olur. Daha fazla ve teknik bilgi için Vuex.

State i hesaplar iken bir fonksiyon kullanabiliriz. Tokenlerı istemcide tuttuğumuzdan bahsetmiştik. Burada bir token bulur ise kullancıyı giriş yapmış sayıyoruz. Böylece token geçerlilik süresini yitirene kadar sistem dışına çıkarılmamış olacak. Aksi durumda token değiştirilmiş ve geçerlilik süresi dolmuş ise 401 hatasını yöneten interceptor bir mutation çağıracak localStorage’ı temizleyecek ve bizi tekrar bir token isteği yapabilmemiz için giriş sayfasına yönlendirecektir.

İsteğin başarılı veya başarısız olma durumuna göre ilgili componentte hata yönetimi veya yönlendirme yapmak isteyebiliriz. Bunun için yine geriye reddedilmiş veya çözülmüş bir promise döndürüyoruz.


Router konfirügasyonu.

router/index.js

Router bizim için gelecek isteğe göre ilgili komponenti yükleyecek. routes adlı array içinde route objelerini barındırmakta. Tahmin edeceğiniz üzere path gelen istek urlini, component yüklenecek olan viewı, name ise yönlendirme sırasında kullanmak üzere named route oluşturmak için kullanılıyor.

Daha sonra bir router nesnesi oluşturuyor ve yukarıdaki arrayi routes olarak içeri geçiyoruz.

beforeEach metodu yardımı ile mevcut route değişirken bir takım işlemler yapabiliriz. Kullanıcı yetki kontrolü, giriş yapıp yapmadığı vs. Bu arada 3 ana parametre zorunlu.

to gideceğimiz route u temsil ediyor.

from ayrıldığımız route.

next ise isteğin devam etmesi veya yönlendirilmesi için kullanılmakta.

Bu örnekte meta özelliğinde requiresAuth tanımlanan her route için kullanıcı doğrulaması yapılacak yapılamadığı durumlarda yönlendirme sağlanacak. Fakat burada next i çağırır iken yapıyı iyi kurgulamamız gerekmekte aksi halde recursion error almanız olası. Kurguya göre değişmekle birlikte, sistemin çalışmaya devam etmesi için next çağırılmalı.


Store ve router ayarlamlarımızı yaptığımıza göre componetlerimizi ve viewlarımızı oluşturabiliriz.

Öncesinde ana Vue nesnemize bir store ve router kullanacağımızı belirtelim. Biraz güzel gözükmesi adına Bootstrap’i de içeriye aktaralım.

Not: Kullanacağımız herhangi bir plugin var ise bunu ana Vue nesnemize dahil etmemiz gerekmekte.


Componentler ve viewlar.

router-view VueRouter tarafından sağlanan özel bir keyword.

Ana App.vue dosyamıza burada render edilecek olan viewların router tarafından yönetileceğini belirtiyoruz.


components/Navigation.vue

İlk componentimiz Navigation.vue. Burada yine router tarafından sağlanan router-link ile dinamik olarak route u değiştiriyoruz. to parametresi tıklanıldığında gidilecek olan route named route views kullanarak çağırmakta. Vuex helperları mapGetters,mapActions yardımı ile Vuex store umuzun yeteneklerini componente kazandırıyoruz. Ve sanki o componentin bir metodu veya datasıymış gibi kullanmamıza olanak veriyor.

State kullanıcı durumuna göre gösterilecek olan linkleri dinamik olarak kontrol ediyor, logout metodu yardımı ile bir action dispatch edip sonucuna göre yönlendirme yapıyoruz.


views/Register.vue


views/Login.vue



Uygulamamızı componentler ile küçük parçalara böldükten sonra render edilecek kısımlarda birleştirerek kompleks yapılar oluşturabiliriz. Navigation componenti bütün viewlarımızın bir parçası ve hepsinde içeriye aktarılmış ve kayıt edilmiş durumda. Direkt olarak native bir HTML elementiymiş gibi kullanılabilir.

Yine benzer bir şekilde Vuex helperları ile componente bir takım yetenekler kazandırıyoruz. Bir action dispatch ediyor ve sonucuna göre hata gösterimi veya yönlendirme yapıyoruz. Ayrıca computed propertyler ile dinamik olarak bir hesaplama yapıyor, sonucua göre attribute binding işlemini gerçekleştiriyoruz.


Fazlası ile uzun bir yazı oldu. Ama bir kaç işlem daha var 🙂 Uygulamayı görmek!

Backend ve frontendi ayağa kaldırdıktan sonra uygulamanızı localhost:8080 portundan görebilirsiniz. Django’ya erişmek isterseniz gitmeniz gereken yeri biliyorsunuz 🙂 8000


Son sözler.

Öncelikle tebrikler! Bugün hatırı sayılır miktarda bilgi öğrendik. Umuyorum ki modern bir web uygulaması geliştirir iken kabaca hangi adımları izlemeniz gerektiğini ve 2 frameworkünde genel çalışma mantığını anladınız.

Vue ve Django ile uygulama geliştirmek fazlası ile kolay ve keyifli. Biraz ara verip en sevdiğiniz kahveyi demleyip bir fincan koyup demo uygulamayı tekrar kodlamak size fazlası ile fayda sağlayacaktır.

Eğer bir yerlerde takılır iseniz uygulamanın kodları şurada yaşıyor.

Bu yazıyı yararlı buldu iseniz paylaşabilir ve daha fazla insana ulaştırabilirsiniz. Bir sonraki yazı da görüşmek üzere!

 

 

 

Tarih:Blog

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Göster
Gizle