Adı : Axios ve React ile Kullanıcı Doğrulama İşlemleri

Axios ve React ile Kullanıcı Doğrulama İşlemleri
Günümüzde, kullanıcıların doğrulanması çok önemlidir. Kullanıcı doğrulamak, kullanıcıların kimliklerine güvendiğimizi gösterir ve uygulamalarımızın güvenliğini sağlar. Bu yazıda, Axios ve React gibi teknolojiler kullanarak, basit bir kullanıcı doğrulama örneği oluşturacağız.

Axios Nedir?
Axios, REST API'lerini tarayıcılarda ve Node.js'te kullanmak için HTTP isteklerinde bulunmanıza olanak tanıyan bir JavaScript kitaplığıdır. Axios, Promise API'si üzerinde çalışarak, inanılmaz derecede hızlı ve verimlidir. Axios, en sık kullanılan istek tipleri olan GET, POST, PUT, DELETE, vb. gibi çeşitli istek türlerini desteklemektedir.

React Nedir?
React, Facebook tarafından geliştirilen bir JavaScript kitaplığıdır. React, kullanıcı arayüzlerini oluşturmak için kullanılır. Bu kitaplık, dinamik ve yüksek performanslı web uygulamaları oluşturmanızı sağlar. React, web uygulamalarında modüler bir yapı oluşturmanıza olanak tanır.

Kullanıcı Doğrulama İşlemleri
Bu örnekte, Axios frameworks'ü ile kullanıcı doğrulama işlemlerini yapacağız. Basit bir şekilde, kullanıcının adı ve şifresi doğru ise, token ile giriş yaptığından emin olacağız. Kullanıcı adı ve şifresi yanlış ise, kullanıcı doğrulanmamış olarak sayfada kalacaktır.
React uygulamamızın içinde, App.js dosyasını açın ve kodu aşağıdaki şekilde değiştirin:
import React, { useState } from 'react';
import './App.css';
import axios from 'axios';
function App() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [authenticated, setAuthenticated] = useState(false);
const handleUsernameChange = (event) => {
setUsername(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleFormSubmit = (event) => {
event.preventDefault();
axios.post('http://localhost:3001/authenticate', {
username,
password
})
.then((response) => {
setAuthenticated(true);
})
.catch((error) => {
console.log(error);
});
};
if (authenticated) {
return (

);
}
return (

);
}
export default App;

Bu kod, Axios isteği ile kullanıcı adı ve şifrenin doğruluğunu kontrol edecek. Doğru ise, kullanıcı menu tanımlı sayfaya yönlendirilecek. Yanlışsa, kullanıcı doğrulanmadı olarak kalacaktır.

Sık Sorulan Sorular
1) Axios, API istekleri yaparken kullanılan bir gereçtir. Bu makalede Axios'a nasıl bağlanacağımızı öğrendik.
2) React, web uygulamaları oluşturmak için kullanılan bir JavaScript kitaplığıdır. Bu makalede, React kullanarak bir kullanıcı doğrulama örneği oluşturduk.
3) Kullanıcı doğrulama neden önemlidir? Kullanıcı doğrulama, uygulamalarımızın güvenliğini sağlar ve kullanıcıların kimliklerine güvendiğimizi gösterir.
4) Bu makalede öğrendiğimiz kullanıcı doğrulama yöntemi, güvende mi? Bu örnekte sadece basit bir kullanıcı doğrulama yapısı gösterildi. Gerçek dünya uygulamaları, bu örneğe kıyaslarsak çok daha karmaşık bir yapıda olacaktır. Bu yüzden, uygulama özelliklerinize göre güvenlik denetimleri yapmanız ve doğru doğrulama yöntemlerini uygulamanız gerekmektedir.
5) React ile kullanıcının kaydını nasıl yaparız? Bu örnek basit bir kullanıcı doğrulama örneğidir. Eğer kullanıcının kaydını da yapmak istiyorsanız, kayıt formu oluşturmanız ve bu kaydedilen kullanıcının daha sonra doğrulanması ile birlikte, token taşımasını sağlamanız gerekmektedir.
6) Axios'un react ile kullanımı hakkında öğrenmek istediğim daha fazla şey nedir? Axios, REST API'lerinde kullanılan istekleri yapmak için kullanılan bir gereçtir. Bu konuda daha fazla bilgi edinmek isterseniz, axios'ın kendi web sitesini ziyaret edebilirsiniz.
7) Token nedir? Token, kullanıcıyı doğrulamak ve kullanıcının oturum açık olduğu süre boyunca uygulamayı kullanması için gerekli bir anahtar gibidir. Bu token, uygulama tarafından saklanır ve her hangi bir istek geldiğinde doğrulama şeklinde kullanılabilir.