React JWT Authentication — Kimlik Doğrulama
Merhabalar,
Bu yazımda React.js de JWT ile kimlik doğrulama işlemini nasıl yapabileceğimizden bahsedeceğim. Ilk önce kısaca JWT’nın ne olduğundan ve bölümlerinden bahsetmekte fayda var.
JWT Nedir?
RFC7519 adı verilen bir sektör standardına dayanan ve taraflar arasında güvenli bir iletişim sağlanabilmesi için JSON nesnesi şeklinde oluşturulmuş bir yapıdadır.
Genellikle kimlik doğrulama(authentication) da tercih edilmektedir. Kullanıcı oturum açtıktan sonra (bunu yaparken kullanıcı adı, şifre gibi bilgileri servise iletir), sonraki her istek kullanıcı bilgilerinin doğrulanması sonucu oluşan JWT’i içerir ve bu kullanıcıların uygulamanın farklı kısımlarına(private API’lara erişim gibi) gidebilmesini, servislere ulaşabilmesini sağlar.
JSON Web Token Yapısı
JSON Web Token birbirinden ‘ . ’ ile ayrılmış üç bölümden oluşur :
- Header
- Payload
- Signature
Ve şu şekilde bir yapısı vardır => aaaaa.bbbb.ccccc
Header
Header genellikle iki bölümden oluşur. Bunlar, token tipi (JWT) ve token oluşturulurken kullanmak istediğimiz algoritma(HMAC SHA256, RSA, HS256 gibi algoritmalar mevcut).
Payload
Payload, giriş yapan kullanıcının bilgilerini ve belirtilen diğer seçenekleri(token geçerlilik süresi vs) içeririr.
Signature
Kullanıcı tarafından seçilen algoritma ve token tipi bilgilerini içeren header’in, kullanıcının giriş yaparkan girdiği bilgiler(kullanıcı adı, şifre gibi) sonucu oluşan payload’ın ve belirlenen bir secret key’in bilgilerini içermekten ve JWT’nin onaylanmasından sorumludur.
Header ve payload bilgisinin encoded edilmiş hali ve secret key kullanılarak oluşturulmuş bir JWT aşağıdaki gibidir.
JSON Web Token’in tanımını yaptığımıza göre artık React.js’te kimlik doğrulama(authentication) yaparken nasıl kullanıldığına bakabiliriz. Mock/Fake Backend kullanmak istemediğim için kendim Node.js kullanarak basit bir servis yazdım. Bu servisin end pointleri aşağıdaki gibidir.
Uygulamaya Giriş
Not: Uygulamanın kaynak kodlarına buradan ulaşabilirsiniz.
Ilk olarak projemizi create-react-app boilerplate’ i ile oluşturalım. Bunun için,
npx create-react-app react-logincd create-logincode .
komutlarını uygulayalım. En sondaki ‘code .’ komutu ile text editöründe proje klasörümüz açılır. Burada src klasöründe uygulama klasörlerimizi oluşturalım ve kullanmayacağımız dosyaları silelim. Ben aşağıdaki gibi bir klasör yapısı oluşturdum. Siz istediğiniz gibi bir yapı oluşturabilirsiniz.
Ben state yönetimini sağlamak için redux kullanıyorum. Aynı zamanda axios, antd, jwt-decode, react-redux, react-router-dom, redux-logger ve redux-thunk paketlerini de bu uygulama içinde kullanıyorum. Bu nedenle gerekli dependencies’leri kuralım.
yarn add redux axios antd jwt-decode react-redux react-router-dom redux-logger redux-thunk- Ilk olarak src/helpers klasörünün altında store.js ve setAuthorizationToken.js dosyalarını oluşturalım.
Burada store.js dosyasında uygulamamızın state’lerini tutması için merkezi bir redux store oluşturmuş olduk. Aynı zamanda private api’lara kullanıcının sadece giriş yaptıktan sonra ulaşabilmesi için Authorization header’a token’i atamamız gerekli.
- Daha sonra src klasörünün içindeki index.js dosyasını düzenleyelim. Redux ile React uygulamızı ilişkilendirmek için react-redux modülünü kullanmalıyız.
Burada token olması durumunda kullanıcının private-api’lara ulaşabilmesini sağlamak için tokeni Authorization Header’ına göndermemiz gerekiyor. Bunu da helpers klasöründe yazdığımız setAuthorizationToken methodu ile sağlıyoruz.
- Daha sonra src/services klasöründe authService.js adında bir dosya oluşturalım. Ve bu dosyada login ve logout işlemlerini yapalım.
- Daha sonra src/actions klasöründe authAction.js adında bir dosya oluşturalım.
Burada authService.js dosyasında yazmış olduğumuz login ve logout metodunu burada daha sonra kullanıcının uygulamaya giriş yapması ve daha sonra hesabından çıkması durumunda kullanmak için burada tanımlıyoruz. Bu sayede daha sonra bu metotları dispatch edip kullanabiliriz.
- Daha sonra src/reducers klasöründe authReducer.js ve rootReducer.js dosyalarını oluşturalım.
Burada ilk olarak authReducer dosyasında actions klasöründe belirttiğimiz, nesneler sonucu dönen action.type’lara göre; kontrol yapıp gerekli olan state’leri componentlerde kullanmak için dönmemiz gerekiyor.
RootReducer dosyası ile ise bizim redux store’umuz ile bağlı olan ana reducer’ı tanımlamış olduk.
- Daha sonra uygulamamızın sayfalarının görünümünü ayarlamak için src/components klasörünün altında gerekli olan dosyaları oluşturalım. Uygulamamızda login işlemini gerçekleştirmek için LoginForm.js adında bir component oluşturalım ve kullanıcı login işlemini yapmak istediğinde bu componenti kullanıcıya sunalım. Aynı zamanda uygulamamızda linkler arasında geçişi sağlamak için NavigationBar.js adında bir dosya oluşturalım ve bu dosyada Navbar oluşturalım ve bu componenti her sayfada header kısmında gösterelim. ( Component’leri oluştururken css ile uğraşmak istemediğim için Ant Design componentini kullandım ).
- Bu componentlar dışında bütün herkesin uygulamayı açtığında görebileceği bir Home componenti(‘/’ route’u ziyaret edildiğinde gösterilecek component) ve sadece giriş yapmış kullanıcıların görebileceği bir About componenti(‘/about’ route’u ziyaret edildiğinde gösterilecek component) oluşturalım.
- Bunlar dışında son olarak kullanıcının giriş yapmadan ‘/about’ route’unu ziyaret etmeye çalışması durumunda, o sayfayı göstermeyip login sayfasına yönlendirmesini sağlamak için PrivateRoute oluşturmamız gerekiyor.
- Ve son olarak App.js dosyamızda uygulamızın Route yönetimini sağlıyacağız.
Sizde kendi api’larınıza göre bu yapıyı değiştirip kullanabilirsiniz. Umarım faydalı olmuştur. Okuduğunuz için teşekkürler.
