React Firebase Kimlik Doğrulaması için Nihai Kılavuz

Kimlik doğrulama, her uygulamanın en önemli güvenlik önlemlerinden biridir.

Bu makalede, kimlik doğrulama, kimlik doğrulama türleri hakkında konuşacağız, kimlik doğrulamayı yetkilendirme ile karşılaştıracağız ve Firebase Auth entication ve Back4app Authentication ‘ın bir React uygulaması ile nasıl entegre edileceğini göstereceğiz.

Kimlik Doğrulama Nedir?

Kimlik doğrulama, bir kişinin veya bir şeyin iddia ettiği kişi olup olmadığını doğrulama işlemidir. Neredeyse her uygulama, bir uygulamaya veya verilerine erişimi güvence altına almak için bir tür kimlik doğrulama kullanır.

En basit kimlik doğrulama şekli parola tabanlı kimlik doğrulamadır. Bu kimlik doğrulama sistemi, kullanıcının kullanıcı adını ve şifresini girmesiyle başlar. Kullanıcı kimlik bilgilerini girdikten sonra arka uç bunları veritabanındaki kayıtlarla karşılaştırır ve kimlik bilgileri doğruysa sisteme erişim izni verir. Erişim genellikle oturum belirteçleri şeklinde verilir.

Modern bir kimlik doğrulama sistemi şuna benzer:

Kimlik Doğrulama ve Yetkilendirme

Kimlik doğrulama, bir kullanıcının kim olduğunu doğrulama sürecidir; yetkilendirme ise bir kullanıcının neye erişimi olduğunu doğrulama sürecidir.

Örneğin, bir çevrimiçi bankacılık sistemine giriş yaptığınızda, sistem ilk olarak giriş bilgilerinizi doğrulayarak kimliğinizi onaylayacaktır. Kimliğiniz doğrulandıktan sonra sistem, para transferi yapma veya hesap ekstrelerini görüntüleme izniniz olup olmadığı gibi hesap ayrıcalıklarınıza dayalı olarak hangi işlemleri yapmaya yetkili olduğunuzu belirleyecektir.

Kimlik Doğrulama Türleri

Yaygın kimlik doğrulama türleri şunlardır:

• Parola tabanlı kimlik doğrulama en yaygın kimlik doğrulama türüdür. Bir kullanıcının bir sisteme veya kaynağa erişim sağlamak için kullanıcı adını ve parolasını girmesini içerir.

• Çoklu oturum açma (SSO), bir kullanıcının tek bir kimlik bilgisi seti kullanarak birden fazla web sitesinde ve hizmette oturum açmasına olanak tanır. Buna örnek olarak Google Hesapları verilebilir. Bir Google Hesabı oluşturarak Gmail, YouTube, AdSense, Firebase ve benzerlerine erişim elde edersiniz.

• Sosyal kimlik doğrulama, bir hesap oluşturmak için Google, Facebook veya Twitter gibi bir sosyal ağ hizmetindeki mevcut bilgileri kullanan bir çoklu oturum açma biçimidir.

• Token tabanlı kimlik doğrulama, kullanıcıların kimlik bilgilerini bir kez girmelerini ve karşılığında rastgele karakterlerden oluşan benzersiz bir şifrelenmiş dize almalarını sağlar.

• Biyometrik kimlik doğrulama, bir bireyin benzersiz biyolojik özelliklerine dayanır. Biyometrik kimlik doğrulama türleri arasında yüz tanıma, parmak izi tarayıcıları, hoparlör tanıma ve iris tarayıcıları bulunur.

• Sertifika tabanlı kimlik doğrulama, internet üzerinden bilgi alışverişi için güvenli bir bağlantı kurmak amacıyla bir kişinin, kuruluşun veya cihazın kimliğini doğrulamak için dijital sertifikalar kullanır.

Kimlik Doğrulama Nasıl Kurulur?

Eğitimin bu bölümünde önce sahte bir React kimlik doğrulama uygulaması oluşturacağız ve ardından bunu Firebase Auth entication ve Back4app (Parse) Authentication ile nasıl entegre edeceğimize bakacağız.

Aşağıdaki araçları kullanacağız:

• React v18
• React Yönlendirici v6.5
• Material UI v5.11
• Firebase v9

Önkoşullar:

• JavaScript ES6 ile deneyim
• React hakkında iyi bir anlayış (JSX, Hooks)
• React Router ve Material UI ile deneyim bir artıdır

Koda geçmeden önce kimlik doğrulama sistemleri arasındaki farklara bakalım.

Firebase Kimlik Doğrulama vs Back4app Kimlik Doğrulama

Firebase ve Back4app hem mobil hem de web uygulamaları için harika kullanıcı kimlik doğrulama sistemleri sağlar. Her ikisinin de kullanımı kolaydır ve sosyal giriş, e-posta doğrulama sistemi, şifre sıfırlama sistemi vb. gibi bir dizi işlevle birlikte gelirler.

Aralarındaki en büyük fark, Back4app’in açık kaynaklı yazılım üzerine inşa edilmiş olması, Firebase’in ise Google’ın tescilli yazılımını kullanmasıdır. Ek olarak, Back4app Firebase’den daha ucuz olma eğilimindedir.

Her iki kimlik doğrulama sistemini de denemenizi ve ardından hangisini daha çok sevdiğinize karar vermenizi öneririm.

Back4app ve Firebase arasındaki farkları keşfetmek isterseniz Back4app vs Firebase sayfasına göz atın.

Proje Kurulumu

Teori ile işimiz bitti. Kodlamaya başlama zamanı!

React Uygulaması Oluşturma

Yeni bir React uygulaması oluşturarak başlayalım.

Aşağıdaki adımlar Node.js ‘nin kurulu olmasını gerektirecektir. Henüz yüklemediyseniz, resmi web sitesinden indirin.

Bir React uygulaması oluşturmanın en kolay yolu Create React App kullanmaktır:

$ npx create-react-app react-firebase-auth
$ cd react-firebase-auth

Bu, react-firebase-auth adında yeni bir React uygulaması oluşturacak ve çalışma dizininizi değiştirecektir.

Ardından, projeyi başlatın:

$ npm start

Son olarak, web uygulamanızı görmek için http://localhost:3000/ adresini açın.

Material UI

UI oluşturma sürecini basitleştirmek için Google’ın Material Design’ını uygulayan açık kaynaklı bir React bileşen kütüphanesi olan Material UI ‘yi kullanacağız. Bileşen kütüphanesi, kutudan çıktığı gibi çalışan önceden oluşturulmuş bileşenlerin kapsamlı bir koleksiyonunu içerir.

Material UI’yi React Bootstrap veya Ant Design gibi farklı bir UI çerçevesiyle değiştirmekten çekinmeyin.

Projenize Material UI eklemek için çalıştırın:

$ npm install @mui/material @emotion/react @emotion/styled

Material UI varsayılan olarak Roboto yazı tipini kullanır. İle yükleyelim:

$ npm install @fontsource/roboto

Ardından, index.js dosyasına gidin ve aşağıdaki içe aktarmaları ekleyin:

// src/index.js

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

React Yönlendirici

Web uygulamamız aşağıdaki uç noktalara sahip olacaktır:

1. /login — kullanıcının oturum açmasını sağlayan oturum açma formunu görüntüler.
2. /register — kullanıcının kaydolmasını sağlayan kayıt formunu görüntüler.
3. /user — kullanıcı bilgilerini görüntüler(e-posta, accessToken, vb.).

Bir Tek Sayfa Uygulaması (SPA) oluşturduğumuz için istemci tarafı yönlendirmeyi uygulamak için bir yola ihtiyacımız var. React ile bunu yapmanın en kolay yolu react-router-dom kullanmaktır.

$ npm install react-router-dom

Ardından, tüm görünüm bileşenleriniz için src içinde routes adlı bir dizin oluşturun. Ardından aşağıdaki üç dosyayı bu dizine ekleyin:

// src/routes/login.jsx

export default function Login() {
  return (
    <h1>Login</h1>
  )
}

// src/routes/register.jsx

export default function Register() {
  return (
    <h1>Register</h1>
  )
}

// src/routes/user.jsx

export default function User() {
  return (
    <h1>User</h1>
  )
}

Bir BrowserRouter oluşturun ve index.js dosyasına aşağıdaki gibi kaydedin:

// src/index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="login"/>,
  },
  {
    path: "/login",
    element: <Login/>,
  },
  {
    path: "/register",
    element: <Register/>,
  },
  {
    path: "/user",
    element: <User/>,
  },
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

Gerekli tüm içe aktarmaları dosyanın en üstüne eklemeyi unutmayın:

import {createBrowserRouter, Navigate, RouterProvider} from "react-router-dom";
import Login from "./routes/login";
import Register from "./routes/register";
import User from "./routes/user";

“Bulunamadı (404)” hatasıyla ilgilenmek için src dizininizde error-page.jsx adında aşağıdaki içeriğe sahip yeni bir bileşen oluşturun:

// src/error-page.jsx

import {useRouteError} from "react-router-dom";
import {Container, Typography} from "@mui/material";

export default function ErrorPage() {

  const error = useRouteError();
  console.error(error);

  return (
    <Container maxWidth="xs" sx={{mt: 2}}>
      <Typography variant="h5" component="h1" gutterBottom>
        Oops!
      </Typography>
      <Typography variant="p" component="p" gutterBottom>
        Sorry, an unexpected error has occurred.
      </Typography>
      <Typography variant="p" component="p" gutterBottom>
        <i>{error.statusText || error.message}</i>
      </Typography>
    </Container>
  );
}

Ardından index .jsx dosyasına gidin ve index rotasına aşağıdaki gibi errorElement ekleyin:

// src/index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="login"/>,
    errorElement: <ErrorPage/>,  // new
  },
  // ...
]);

Yine, gerekli içe aktarmayı eklediğinizden emin olun:

import ErrorPage from "./error-page";

Bu noktada dizin yapınız aşağıdaki gibi görünmelidir:

react-firebase-auth
├── README.md
├── package.json
├── package-lock.json
├── public
│   └── <public files>
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── error-page.jsx
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── routes
    │   ├── login.jsx
    │   ├── register.jsx
    │   └── user.jsx
    └── setupTests.js

Uygulamayı başlatalım ve her şeyin çalışıp çalışmadığını test edelim. Çalıştırın:

$ npm start

Favori web tarayıcınızı açın ve http://localhost:3000/ adresine gidin. Bu sizi giriş ekranına yönlendirecektir. Bundan sonra http://localhost:3000/register adresine gidin ve kayıt ekranını görmelisiniz.

Form

Yapmamız gereken son şeylerden biri de giriş ve kayıt formunu uygulamaktır.

Bunu yapmak için rota dizininize gidin ve login.jsx dosyasını aşağıdaki gibi değiştirin:

// src/routes/login.jsx

import {Alert, Box, Button, Container, Link, TextField, Typography} from "@mui/material";
import {useNavigate} from "react-router-dom";
import {useState} from "react";

export default function Login() {

  const navigate = useNavigate();

  const [error, setError] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = async (event) => {
    event.preventDefault();

    // validate the inputs
    if (!email || !password) {
      setError("Please enter your username and password.");
      return;
    }

    // clear the errors
    setError("");

    // TODO: send the login request
    console.log("Logging in...");
  }

  return (
    <Container maxWidth="xs" sx={{mt: 2}}>
      <Typography variant="h5" component="h1" gutterBottom textAlign="center">
        Login
      </Typography>
      {error && <Alert severity="error" sx={{my: 2}}>{error}</Alert>}
      <Box component="form" onSubmit={onSubmit}>
        <TextField
          label="Email"
          variant="outlined"
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          sx={{mt: 1}}
          fullWidth
        />
        <TextField
          label="Password"
          variant="outlined"
          type="password"
          autoComplete="new-password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          sx={{mt: 3}}
          fullWidth
        />
        <Button variant="contained" type="submit" sx={{mt: 3}} fullWidth>Login</Button>
        <Box sx={{mt: 2}}>
          Don't have an account yet? <Link href="/register">Register</Link>
        </Box>
      </Box>
    </Container>
  )
}

1. Form da dahil olmak üzere düzeni oluşturmak için Material UI’nin bileşenlerini kullandık.
2. Durum(e-posta ve şifre) React useState() kancası ile işlenir.
3. Form gönderimi, verileri doğrulayan ve olası hataları görüntüleyen onSubmit() işlevini çağırır.

Ardından, GitHub’dan kaynak kodu alın ve diğer iki rotanın içeriğini değiştirin:

• src/routes/register.jsx
• src/routes/user.jsx

Sunucuyu tekrar çalıştırın ve web uygulamanıza gidin. Görünümleriniz aşağıdaki gibi görünmelidir:

Temizleyin

Create React App tarafından oluşturulan ve artık gerekli olmayan aşağıdaki dosyaları kaldırın:

• src/App.css
• src/App.js
• src/App.test.js
• src/logo.svg

index.js vb. dosyalardan olası içe aktarmaları kaldırdığınızdan emin olun.

Harika, sahte kimlik doğrulama web uygulamamız artık tamamlandı. Sonraki bölümlerde, Firebase Authentication ve Back4app Authentication ekleyerek yükselteceğiz.

Makalenin bu bölümü için kaynak kodunu back4app-react-firebase-auth reposundan alın.

React Firebase Kimlik Doğrulama

Eğitimin bu bölümünde, Firebase kimlik doğrulamasını bir React projesi ile nasıl entegre edeceğimizi inceleyeceğiz. Başlangıç noktası olarak, “Proje Kurulumu” bölümünde oluşturduğumuz React uygulamasını kullanacağız.

Eğitimi takip ederken kendi React projenizle çalışarak anladığınızı kontrol edin.

Proje ve Uygulama Oluşturma

Aşağıdaki adımlar bir Firebase hesabınızın olmasını gerektirecektir. Henüz bir hesabınız yoksa devam edin ve Google hesabınızla kaydolun.

Firebase ile çalışmak için öncelikle bir proje oluşturmamız gerekir. Bir proje oluşturmak için Firebase Konsolunuza giriş yapın ve “Bir proje oluştur” seçeneğine tıklayın:

Özel bir ad verin, ben benimkine react-firebase-auth adını vereceğim.

Tüm hüküm ve koşulları kabul edin ve “Devam” düğmesine basın.

Firebase, projeniz için gereken her şeyi hazırlamak için birkaç dakikanızı ayıracaktır. İşlem tamamlandığında Firebase Proje Panosuna yönlendirileceksiniz.

Ardından, yeni bir Firebase Uygulaması oluşturun. Ön uç olarak React kullandığımız için “Web “i seçin:

Özel bir ad verin veya proje adınızı yeniden kullanın. Kullanmayacağımız için Firebase Hosting’i etkinleştirmeniz gerekmez.

Ardından, “Uygulamayı kaydet” seçeneğine tıklayın:

Ardından “npm “i seçin ve Firebase SDK yapılandırmanızı not edin. Son olarak, “Konsola devam et” düğmesine tıklayın:

Kimlik Doğrulamayı Etkinleştir

Koda dalmadan önce kimlik doğrulamayı etkinleştirmeliyiz.

Firebase Console’un sol tarafında “Build” ve ardından “Authentication “ı seçin. Yönlendirildikten sonra “Başla “ya tıklayın:

Firebase birden fazla oturum açma yöntemi sunar. Bu eğitimde, e-posta ve parola kimlik doğrulamasını nasıl kullanacağınızı göstereceğiz, böylece etkinleştirmeniz gereken tek yöntem bu olacak:

Firebase SDK

Firebase’i React projenizde kullanmak için öncelikle Yazılım Geliştirici Kitini (SDK) yüklemeniz gerekir.

npm aracılığıyla yükleyin:

$ npm install firebase

Ardından, src klasörü içinde firebase.js adında aşağıdaki içeriğe sahip yeni bir dosya oluşturun:

// src/firebase.js

import { initializeApp } from "firebase/app";
import {createUserWithEmailAndPassword, signInWithEmailAndPassword, getAuth} from "firebase/auth";

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyC4m7VHfM8hy_VUUAlpFCSK3AfrRX4bkQ0",
  authDomain: "react-firebase-auth-d4e6b.firebaseapp.com",
  projectId: "react-firebase-auth-d4e6b",
  storageBucket: "react-firebase-auth-d4e6b.appspot.com",
  messagingSenderId: "1084832623816",
  appId: "1:1084832623816:web:a526bb5b9beff5e26e89fd",
  measurementId: "G-1DXS0RGXPT"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

firebaseConfig ‘i bir önceki adımdaki yapılandırmanızla değiştirdiğinizden emin olun.

Firebase SDK, aşağıdaki gibi farklı auth yöntemleri sunar:

1. createUserWithEmailAndPassword(email: string, password: string)
2. signInWithEmailAndPassword(email: string, password: string)

Bu yöntemleri kullanmak için firebase.js dosyasının altında iki sarmalayıcı fonksiyon oluşturalım:

// firebase.js

// ...

export const createUser = async (email, password) => {
  return createUserWithEmailAndPassword(getAuth(app), email, password);
}

export const signInUser = async (email, password) => {
  return signInWithEmailAndPassword(getAuth(app), email, password);
}

İçe aktarmayı eklemeyi unutmayın:

import {createUserWithEmailAndPassword, signInWithEmailAndPassword, getAuth} from "firebase/auth";

İşlevler kendi kendini açıklar:

1. createUser bir Firebase kullanıcısı oluşturur (ve kullanıcı bilgilerini içeren bir yanıt döndürür)
2. signInUser mevcut bir Firebase kullanıcısında oturum açar (ve kullanıcı bilgilerini içeren bir yanıt döndürür)

Oturum Kalıcılığı

Firebase, Parse’ın yaptığı gibi istemcilerin cihazlarında oturum kalıcılığıyla ilgilenmez.

Bu nedenle Window.sessionStorage kullanmamız gerekiyor. Kullanıcı oturum açtığında accessToken ‘ını saklamamız ve kimliği doğrulanmış bir istek yapmak istediğimizde bunu geri almamız gerekir.

İşleri biraz daha kolaylaştırmak için bir yardımcı sınıf oluşturacağız.

src dizini içinde aşağıdaki içeriğe sahip session.js adında yeni bir dosya oluşturun:

// src/storage/session.js

export const startSession = (user) => {
  sessionStorage.setItem("email", user.email);
  sessionStorage.setItem("accessToken", user.accessToken);
}

export const getSession = () => {
  return {
    email: sessionStorage.getItem("email"),
    accessToken: sessionStorage.getItem("accessToken"),
  }
}

export const endSession = () => {
  sessionStorage.clear();
}

export const isLoggedIn = () => {
  return getSession().accessToken;
}

Görünümler

Yapmamız gereken son şey, görünümlerimizi oluşturduğumuz işlevleri kullanacak şekilde değiştirmek ve session .js‘deki yardımcı işlevler aracılığıyla oturumu ayarlamaktır.

login.jsx dosyasını açın ve onSubmit() TODO’sunu aşağıdaki gibi değiştirin:

// src/routes/login.jsx

import {signInUser} from "../firebase";
import {startSession} from "../session";

const onSubmit = async (event) => {

  // ...

  try {
    let loginResponse = await signInUser(email, password);
    startSession(loginResponse.user);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Bu kod ya kullanıcının oturumunu açar ve /user ‘a gider ya da bir hata görüntüler.

Ardından, register.jsx onSubmit() TODO’yu şu şekilde değiştirin:

// src/routes/register.jsx

import {createUser} from "../firebase";
import {startSession} from "../session";

const onSubmit = async (event) => {

  // ...

  try {
    let registerResponse = await createUser(email, password);
    startSession(registerResponse.user);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Bu kod ya bir Firebase kullanıcısı oluşturur ya da bir hata görüntüler. Olası hatalar şunları içerir:

1. Kullanıcı adı zaten alınmış.
2. Şifre yeterince güçlü değil.

Son olarak, user.jsx dosyasını kullanıcı verilerini almak için useEffect() kancasını kullanacak ve onLogout( ) işlevinin oturumu yok etmesini sağlayacak şekilde değiştirin:

// src/routes/user.jsx

import {endSession, getSession, isLoggedIn} from "../session";

useEffect(() => {
  if (!isLoggedIn()) {
    navigate("/login");
  }

  let session = getSession();
  setEmail(session.email);

  console.log("Your access token is: " + session.accessToken);
}, [navigate]);

const onLogout = () => {
  endSession();
  navigate("/login");
}

Test

Her şeyin çalışıp çalışmadığını görmek için web uygulamasını test edelim.

Geliştirme sunucusunu npm start ile başlatın, favori web tarayıcınızı açın ve http://localhost:3000/register adresine gidin. E-postanızı girin, bir şifre seçin ve “Kaydol “a tıklayın:

Kaydolduğunuzda, hesap bilgilerinizi görebileceğiniz /user adresine yönlendirileceksiniz.

AccessToken ‘ınızı görmek için tarayıcınızın geliştirici konsolunu açın:

Your access token is: 819423a698f9ea9ba3577f20993cb0da98a79ea22ce5d6550b65b69fb36fd438

Son olarak, yeni bir kullanıcı oluşturulup oluşturulmadığını kontrol etmek için Firebase proje panonuza gidin:

Bu yaklaşım için nihai kaynak kodunu back4app-react-firebase-auth reposundan alın.

React Back4app Kimlik Doğrulama

Eğitimin bu bölümünde, Back4app kimlik doğrulamasını bir React projesine nasıl entegre edeceğimizi inceleyeceğiz. Başlangıç noktası olarak, “Proje Kurulumu” bölümünde oluşturduğumuz React uygulamasını ele alacağız.

Eğitimi takip ederken kendi React projenizle çalışarak anladığınızı kontrol edin.

Uygulama Oluştur

Aşağıdaki adımlar bir Back4app hesabınızın olmasını gerektirecektir. Zaten hesabınız varsa giriş yapın, yoksa devam edin ve ücretsiz hesap için kaydolun.

Back4app ile çalışmak için öncelikle bir uygulama oluşturmamız gerekiyor. Kontrol panelinize giriş yaptığınızda uygulamalarınızın listesini göreceksiniz. Yeni bir uygulama oluşturmak için “Yeni bir uygulama oluştur” seçeneğine tıklayın.

Özel bir ad verin, veritabanınızı seçin ve ardından “Devam “a tıklayın.

Back4app, veritabanı, uygulama katmanı, ölçeklendirme, yedeklemeler ve güvenlik gibi uygulamanız için gereken her şeyi hazırlamak için birkaç dakikanızı ayıracaktır.

Uygulamanız hazır olduğunda, uygulamanızın kontrol paneline yönlendirileceksiniz.

Uygulama Anahtarları

React projenizi Back4app ile bağlamak için Uygulama Anahtarlarınızı edinmeniz gerekir. Uygulama Anahtarlarınızı almak için kenar çubuğundaki “Uygulama Ayarları “nı ve ardından “Güvenlik ve Anahtarlar “ı seçin.

“Uygulama Kimliği” ve “JavaScript anahtarı “na dikkat edin.

Parse SDK

Bildiğiniz gibi Back4app Parse tabanlıdır. Parse, uygulama arka uçları oluşturmak için açık kaynaklı bir çerçevedir. Geliştiricilerin uygulama geliştirmeyi hızlandırmasına yardımcı olur ve bir uygulama oluşturmak için gereken toplam çaba miktarını azaltır.

Parse hakkında daha fazla bilgi edinmek için Parse Nedir?

Back4app kimlik doğrulamasını kurmak için öncelikle Parse SDK’yı yüklememiz gerekir. Bunu npm aracılığıyla yükleyin:

$ npm install parse

Ardından, src klasöründe aşağıdaki içeriğe sahip parse.js adlı yeni bir dosya oluşturun:

// src/parse.js

import Parse from "parse/dist/parse";

// Initialize Parse
const PARSE_APPLICATION_ID = '<your_parse_application_id>';
const PARSE_HOST_URL = 'https://parseapi.back4app.com/';
const PARSE_JAVASCRIPT_KEY = '<your_parse_javascript_key>';
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_HOST_URL;

PARSE_APPLICATION_ID ve PARSE_JAVASCRIPT_KEY öğelerini bir önceki adımdaki anahtarlarla değiştirdiğinizden emin olun.

Parse, kullanıcı hesabı yönetimi için gereken işlevlerin çoğunu otomatik olarak işleyen Parse .User adlı özel bir sınıf sağlar. Parse .User, signUp(), current(), getUsername () gibi ek yardımcı yöntemler sağlayan ParseObject ‘in bir alt sınıfıdır.

Ek olarak, Parse SDK yerel depolama oturum işlemlerinizle ilgilenir. Örneğin, Parse.User.logIn() kullanıcı bilgilerini localStorage ‘da saklar ve Parse.User.signOut( ) yerel depolamayı temizler.

Parse kimlik doğrulama sistemiyle çalışmayı daha da basitleştirmek için birkaç sarmalayıcı işlev ekleyelim.

Aşağıdakileri parse.js dosyasının altına ekleyin:

// src/parse.js

// ...

export const doUserRegistration = async (username, password) => {
  return Parse.User.signUp(username, password);
};

export const doUserLogIn = async (username, password) => {
  return Parse.User.logIn(username, password);
};

export const isLoggedIn = async () => {
  return Parse.User.current() != null;
}

export const getUser = async () => {
  return Parse.User.current();
}

export const logOut = async () => {
  return Parse.User.logOut();
}

1. doUserRegistration() bir Parse kullanıcısı oluşturur (bir e-posta ve parola kullanarak)
2. doUserLogIn(), sağlanan kimlik bilgileriyle kullanıcının oturumunu açmaya çalışır
3. isLoggedIn() localStorage ‘ın oturum bilgilerini içerip içermediğini kontrol eder
4. getUser() localStorage‘dan oturum açmış kullanıcıyı döndürür
5. logOut() localStorage ‘ı temizler, böylece kullanıcının oturumunu kapatır

Tüm işlevler eşzamansızdır ve söz döndürür.

Görünümler

Bir önceki adımda oluşturduğumuz fonksiyonları kullanalım.

login.jsx dosyasını açın ve onSubmit() TODO’sunu aşağıdaki gibi değiştirin:

// src/routes/login.jsx

import {doUserLogIn} from "../parse";

const onSubmit = async (event) => {

  // ...

  try {
    let user = await doUserLogIn(email, password);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Bu kod ya kullanıcının oturumunu açar ve /user ‘a gider ya da bir hata görüntüler.

Ardından, register.jsx onSubmit() TODO’yu şu şekilde değiştirin:

// src/routes/register.jsx

import {doUserRegistration} from "../parse";

const onSubmit = async (event) => {

  // ...

  let username = email.split("@")[0];
  try {
    let user = await doUserRegistration(username, password);
    user.setEmail(email).save();
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Bir e-posta/şifre kayıt formu kullandığımız için kullanıcının kullanıcı adını e-postadan çıkarmamız gerektiğini unutmayın. Kullanıcı adı @‘den önceki kısımdır.

Daha iyi bir çözüm, bir kullanıcı adı/şifre kayıt formu oluşturmak olacaktır.

Bu kod ya bir Parse kullanıcısı oluşturur ya da bir hata görüntüler. Olası hatalar şunları içerir:

1. Kullanıcı adı zaten alınmış.
2. Şifre yeterince güçlü değil.

Son olarak, user.jsx dosyasını kullanıcı verilerini almak için useEffect() kancasını kullanacak ve onLogout( ) işlevinin logout işlevini çağırmasını sağlayacak şekilde değiştirin:

// src/routes/user.jsx

import {getUser, isLoggedIn, logOut} from "../parse";

useEffect(() => {
  (async () => {
    let loggedIn = await isLoggedIn();
    if (!loggedIn) {
      navigate("/login");
    }

    let user = await getUser();
    setEmail(user.getEmail());

    console.log("Your session token is: " + user.getSessionToken());
  })();
}, [navigate]);

const onLogout = async () => {
  await logOut();
  navigate("/login");
}

Harika, işte bu!

Test

Kimlik doğrulama sistemimizin beklendiği gibi çalıştığından emin olalım.

Geliştirme sunucusunu npm start ile başlatın, favori web tarayıcınızı açın ve http://localhost:3000/register adresine gidin. E-postanızı girin, bir şifre seçin ve “Kaydol “a tıklayın:

Kaydolduğunuzda, hesap bilgilerinizi görebileceğiniz /user adresine yönlendirileceksiniz.

SessionToken ‘ınızı görmek için tarayıcınızın geliştirici konsolunu açın:

Your session token is: r:90343c307e7bb088e60c348acd8090d1

Son olarak, Back4app Uygulama Kontrol Panelinize gidin ve bir kullanıcı oluşturulduğundan emin olun:

Bu yaklaşım için nihai kaynak kodunu back4app-react-firebase-auth reposundan alın.

Sonuç

Kimlik doğrulama ve yetkilendirme, modern uygulamaların en önemli güvenlik önlemleridir. Kimlik doğrulama, bir kullanıcının kim olduğunu doğrulama işlemidir; yetkilendirme ise bir kullanıcının neye erişimi olduğunu doğrulama işlemidir.

Firebase ve Back4app’ın her ikisi de harika kullanıcı kimlik doğrulama sistemleri sunar. Her birinin bir projeye başlarken göz önünde bulundurulması gereken kendi artıları ve eksileri vardır.

Daha fazla okuma

• Kullanıcı Güvenliğini Parse
• Üçüncü taraf hizmetleri aracılığıyla Sosyal Kimlik Doğrulama
  • Google Oturum Açma
  • Facebook Oturum Açma
• E-posta Doğrulama
• Şifre Sıfırlama

SSS