Panduan Utama Otentikasi React Firebase

Otentikasi adalah salah satu langkah keamanan yang paling penting dari setiap aplikasi.

Pada artikel ini, kita akan membahas tentang autentikasi, tipe-tipe autentikasi, membandingkan autentikasi dengan otorisasi, dan mendemonstrasikan cara mengintegrasikan Autentikasi Firebase dan Autentikasi Back4app dengan aplikasi React.

Apa yang dimaksud dengan Autentikasi?

Otentikasi adalah proses memverifikasi apakah seseorang atau sesuatu adalah seperti yang diklaimnya. Hampir setiap aplikasi menggunakan beberapa bentuk autentikasi untuk mengamankan akses ke aplikasi atau datanya.

Bentuk autentikasi yang paling sederhana adalah autentikasi berbasis kata sandi. Sistem autentikasi ini dimulai dengan pengguna memasukkan nama pengguna dan kata sandi mereka. Setelah mereka memasukkan kredensial mereka, backend membandingkannya dengan catatan dalam database dan memberikan mereka akses ke sistem jika kredensial tersebut benar. Akses biasanya diberikan dalam bentuk token sesi.

Sistem autentikasi modern terlihat seperti ini:

Otentikasi vs Otorisasi

Otentikasi adalah proses memverifikasi siapa pengguna, sedangkan otorisasi adalah proses memverifikasi apa yang dapat diakses oleh pengguna.

Misalnya, saat Anda masuk ke sistem perbankan online, sistem akan mengautentikasi Anda terlebih dahulu dengan memverifikasi kredensial login Anda. Setelah Anda diautentikasi, sistem akan menentukan tindakan apa yang diizinkan untuk Anda lakukan berdasarkan hak istimewa akun Anda, seperti apakah Anda diizinkan untuk mentransfer uang atau melihat laporan rekening.

Jenis Otentikasi

Jenis autentikasi yang umum meliputi:

• Autentikasi berbasis kata sandi adalah jenis autentikasi yang paling umum. Jenis ini melibatkan pengguna yang memberikan nama pengguna dan kata sandi untuk mendapatkan akses ke sistem atau sumber daya.

• Sistem masuk tunggal (SSO ) memungkinkan pengguna untuk masuk ke beberapa situs web dan layanan menggunakan satu set kredensial. Contohnya adalah Akun Google. Dengan membuat Akun Google, Anda mendapatkan akses ke Gmail, YouTube, AdSense, Firebase, dan sebagainya.

• Otentikasi sosial adalah bentuk sistem masuk tunggal yang menggunakan informasi yang sudah ada dari layanan jejaring sosial seperti Google, Facebook, atau Twitter untuk membuat akun.

• Otentikasi berbasis token memungkinkan pengguna untuk memasukkan kredensial mereka satu kali dan menerima serangkaian karakter acak terenkripsi yang unik sebagai gantinya.

• Autentikasi biometrik bergantung pada karakteristik biologis yang unik dari seseorang. Jenis autentikasi biometrik meliputi pengenalan wajah, pemindai sidik jari, pengenalan speaker, dan pemindai iris mata.

• Otentikasi berbasis sertifikat menggunakan sertifikat digital untuk memverifikasi identitas seseorang, organisasi, atau perangkat untuk membuat koneksi yang aman untuk pertukaran informasi melalui internet.

Bagaimana Cara Mengatur Autentikasi?

Pada bagian tutorial ini, pertama-tama kita akan membuat aplikasi otentikasi React dummy dan kemudian melihat bagaimana cara mengintegrasikannya dengan Otentikasi Firebase dan Otentikasi Back4app (Parse).

Kita akan menggunakan alat bantu berikut ini:

• React v18
• React Router v6.5
• Material UI v5.11
• Firebase v9

Prasyarat:

• Pengalaman dengan JavaScript ES6
• Pemahaman yang baik tentang React (JSX, Hooks)
• Pengalaman dengan React Router dan Material UI merupakan nilai tambah

Sebelum masuk ke dalam kode, mari kita lihat perbedaan antara sistem autentikasi.

Otentikasi Firebase vs Otentikasi Back4app

Firebase dan juga Back4app keduanya menyediakan sistem autentikasi pengguna yang hebat untuk aplikasi seluler dan web. Keduanya mudah digunakan dan dilengkapi dengan banyak fungsi seperti login sosial, sistem verifikasi email, sistem pengaturan ulang kata sandi, dan lain-lain.

Perbedaan terbesar di antara keduanya adalah Back4app dibangun di atas perangkat lunak sumber terbuka sementara Firebase menggunakan perangkat lunak milik Google. Selain itu, Back4app cenderung lebih murah daripada Firebase.

Saya sarankan Anda mencoba kedua sistem autentikasi dan kemudian memutuskan mana yang lebih Anda sukai.

Jika Anda ingin menjelajahi perbedaan antara Back4app dan Firebase, lihatlah Back4app vs Firebase.

Pengaturan Proyek

Kita sudah selesai dengan teori. Saatnya untuk mulai membuat kode!

Membuat Aplikasi React

Mari kita mulai dengan membuat aplikasi React baru.

Langkah-langkah berikut ini mengharuskan Anda untuk menginstal Node.js. Jika Anda belum menginstalnya, unduh dari situs web resminya.

Cara termudah untuk membuat aplikasi React adalah melalui Create React App:

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

Ini akan membuat aplikasi React baru bernama react-firebase-auth dan mengubah direktori kerja Anda.

Selanjutnya, mulai proyek:

$ npm start

Terakhir, buka http://localhost:3000/ untuk melihat aplikasi web Anda.

Material UI

Untuk menyederhanakan proses pembuatan UI, kita akan menggunakan Material UI – sebuah pustaka komponen open-source React yang mengimplementasikan Desain Material Google. Pustaka komponen ini mencakup koleksi komponen prebuilt yang lengkap yang bekerja di luar kotak.

Jangan ragu untuk menukar Material UI dengan framework UI yang berbeda seperti React Bootstrap atau Ant Design.

Untuk menambahkan Material UI ke dalam proyek yang Anda jalankan:

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

Material UI menggunakan font Roboto secara default. Mari kita instal dengan:

$ npm install @fontsource/roboto

Selanjutnya, buka index.js dan tambahkan impor berikut ini:

// src/index.js

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

React Router

Aplikasi web kita akan memiliki titik akhir sebagai berikut:

1. /login — menampilkan formulir login yang memungkinkan pengguna untuk masuk.
2. /register — menampilkan formulir pendaftaran yang memungkinkan pengguna untuk mendaftar.
3. /user – menampilkan informasi pengguna(email, accessToken, dan lain-lain).

Karena kita sedang membangun Single Page Application (SPA), kita membutuhkan cara untuk mengimplementasikan routing dari sisi klien. Cara termudah untuk melakukannya dengan React adalah dengan menggunakan react-router-dom.

$ npm install react-router-dom

Selanjutnya, buat direktori bernama routes di dalam src untuk semua komponen tampilan Anda. Kemudian tambahkan tiga file berikut ini ke dalam direktori tersebut:

// 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>
  )
}

Buat sebuah BrowserRouter dan daftarkan di index.js seperti ini:

// 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>
);

Jangan lupa untuk menambahkan semua impor yang diperlukan di bagian atas file:

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

Untuk menangani kesalahan “Not Found (404)”, buatlah komponen baru di dalam direktori src Anda bernama error-page.jsx dengan konten sebagai berikut:

// 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>
  );
}

Kemudian buka index.jsx dan tambahkan errorElement ke rute indeks seperti ini:

// src/index.js

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

Sekali lagi, pastikan untuk menambahkan impor yang diperlukan:

import ErrorPage from "./error-page";

Pada titik ini, struktur direktori Anda akan terlihat seperti ini:

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

Mari kita mulai aplikasi dan menguji apakah semuanya berfungsi. Jalankan:

$ npm start

Buka browser web favorit Anda dan buka http://localhost:3000/. Ini akan mengarahkan Anda ke layar login. Setelah itu, buka http://localhost:3000/register dan Anda akan melihat layar pendaftaran.

Formulir

Salah satu hal terakhir yang harus kita lakukan adalah mengimplementasikan formulir login dan registrasi.

Untuk melakukan itu, buka direktori rute Anda dan ubah login.jsx seperti ini:

// 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. Kami menggunakan komponen Material UI untuk membangun tata letak termasuk formulir.
2. State(email dan kata sandi) ditangani melalui hook React useState().
3. Pengiriman formulir memanggil onSubmit() yang memvalidasi data dan menampilkan kemungkinan kesalahan.

Selanjutnya, ambil kode sumber dari GitHub dan ganti konten dari dua rute lainnya:

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

Jalankan server lagi dan arahkan ke aplikasi web Anda. Tampilan Anda akan terlihat seperti ini:

Bersihkan

Hapus berkas-berkas berikut ini yang dibuat oleh Create React App dan tidak lagi diperlukan:

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

Pastikan untuk menghapus potensi impor dari file seperti index.js dan lain-lain.

Bagus, aplikasi web otentikasi dummy kita sudah selesai. Di bagian selanjutnya, kita akan meningkatkannya dengan menambahkan Otentikasi Firebase dan Otentikasi Back4app.

Ambil kode sumber untuk bagian artikel ini dari back4app-react-firebase-auth repo.

Otentikasi React Firebase

Pada bagian tutorial ini, kita akan melihat bagaimana cara mengintegrasikan autentikasi Firebase dengan proyek React. Sebagai titik awal, kita akan menggunakan aplikasi React yang telah kita buat di bagian “Pengaturan Proyek”.

Periksa pemahaman Anda dengan bekerja dengan proyek React Anda sendiri saat Anda mengikuti tutorial ini.

Membuat Proyek dan Aplikasi

Langkah-langkah berikut ini mengharuskan Anda memiliki akun Firebase. Jika Anda belum memilikinya, silakan mendaftar dengan akun Google Anda.

Untuk bekerja dengan Firebase, pertama-tama kita harus membuat sebuah proyek. Untuk membuat proyek, masuk ke Konsol Firebase Anda dan klik “Buat proyek”:

Berikan nama khusus, saya akan menamainya react-firebase-auth.

Terima semua syarat dan ketentuan dan tekan “Lanjutkan”.

Firebase akan membutuhkan waktu beberapa saat untuk mempersiapkan semua yang diperlukan untuk proyek Anda. Setelah selesai, Anda akan diarahkan ke Dasbor Proyek Firebase.

Selanjutnya, buatlah Aplikasi Firebase baru. Pilih “Web” karena kita menggunakan React sebagai frontend:

Berikan nama khusus – atau gunakan kembali nama proyek Anda. Anda tidak perlu mengaktifkan Firebase Hosting karena kami tidak akan menggunakannya.

Selanjutnya, klik “Daftarkan aplikasi”:

Kemudian pilih “npm” dan catat konfigurasi Firebase SDK Anda. Terakhir, klik tombol “Lanjutkan ke konsol”:

Aktifkan Otentikasi

Sebelum menyelami kode, kita harus mengaktifkan autentikasi.

Pada sisi kiri Konsol Firebase pilih “Build” dan kemudian “Authentication”. Setelah Anda dialihkan, klik “Mulai”:

Firebase menyediakan beberapa metode masuk. Dalam tutorial ini kami akan mendemonstrasikan cara menggunakan autentikasi email dan kata sandi sehingga hanya itu yang harus Anda aktifkan:

Firebase SDK

Untuk menggunakan Firebase dalam proyek React Anda, Anda harus menginstal Software Developer Kit (SDK) terlebih dahulu.

Instal melalui npm:

$ npm install firebase

Selanjutnya, buat berkas baru di dalam folder src bernama firebase.js dengan isi sebagai berikut:

// 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);

Pastikan untuk mengganti firebaseConfig dengan konfigurasi Anda dari langkah sebelumnya.

Firebase SDK menawarkan berbagai metode autentikasi seperti:

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

Untuk menggunakan metode ini, mari kita buat dua fungsi wrapper di bagian bawah file firebase.js:

// 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);
}

Jangan lupa untuk menambahkan impor:

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

Fungsinya cukup jelas:

1. createUser membuat pengguna Firebase (dan mengembalikan respons yang berisi informasi pengguna)
2. signInUser memasukkan pengguna Firebase yang sudah ada, dan mengembalikan respons yang berisi informasi pengguna)

Ketekunan Sesi

Firebase tidak menangani persistensi sesi pada perangkat klien seperti halnya Parse.

Oleh karena itu, kita harus memanfaatkan Window.sessionStorage. Ketika pengguna masuk, kita harus menyimpan accessToken mereka dan mengambilnya setiap kali kita ingin membuat permintaan yang diautentikasi.

Untuk mempermudah, kita akan membuat kelas pembantu.

Di dalam direktori src, buatlah berkas baru bernama session.js dengan isi sebagai berikut:

// 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;
}

Tampilan

Hal terakhir yang harus kita lakukan adalah memodifikasi tampilan kita untuk memanfaatkan fungsi yang telah kita buat dan mengatur sesi melalui fungsi pembantu di session.js.

Buka login.jsx dan ubah onSubmit() TODO seperti ini:

// 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);
  }
}

Kode ini akan memasukkan pengguna dan menavigasi ke /user atau menampilkan kesalahan.

Selanjutnya, ubah register.jsx onSubmit() TODO seperti ini:

// 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);
  }
}

Kode ini dapat membuat pengguna Firebase atau menampilkan kesalahan. Kesalahan yang mungkin terjadi antara lain:

1. Nama pengguna sudah diambil.
2. Kata sandi tidak cukup kuat.

Terakhir, modifikasi user.jsx untuk menggunakan hook useEffect() untuk mengambil data pengguna dan membuat onLogout() menghancurkan sesi:

// 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");
}

Tes

Mari kita uji aplikasi web untuk melihat apakah semuanya berfungsi.

Mulai server pengembangan dengan npm start, buka peramban web favorit Anda, dan buka http://localhost:3000/register. Masukkan email Anda, pilih kata sandi, dan klik “Daftar”:

Saat mendaftar, Anda akan diarahkan ke /user di mana Anda dapat melihat informasi akun Anda.

Untuk melihat accessToken Anda, buka konsol pengembang browser Anda:

Your access token is: 819423a698f9ea9ba3577f20993cb0da98a79ea22ce5d6550b65b69fb36fd438

Terakhir, buka dasbor proyek Firebase Anda untuk memeriksa apakah pengguna baru telah dibuat:

Ambil kode sumber akhir untuk pendekatan ini dari repo back4app-react-firebase-auth.

Otentikasi React Back4app

Pada bagian tutorial ini, kita akan melihat bagaimana cara mengintegrasikan autentikasi Back4app dengan proyek React. Sebagai titik awal, kita akan menggunakan aplikasi React yang telah kita buat di bagian “Pengaturan Proyek”.

Periksa pemahaman Anda dengan bekerja dengan proyek React Anda sendiri saat Anda mengikuti tutorial ini.

Buat Aplikasi

Langkah-langkah berikut ini mengharuskan Anda memiliki akun Back4app. Jika Anda sudah memilikinya, silakan masuk dan mendaftar untuk akun gratis.

Untuk bekerja dengan Back4app, pertama-tama kita perlu membuat aplikasi. Saat Anda masuk ke dasbor, Anda akan melihat daftar aplikasi Anda. Klik pada “Buat aplikasi baru” untuk membuat aplikasi baru.

Berikan nama khusus, pilih database Anda, lalu klik “Lanjutkan”.

Back4app akan membutuhkan waktu beberapa saat untuk mempersiapkan semua yang diperlukan untuk aplikasi Anda seperti database, lapisan aplikasi, penskalaan, pencadangan & keamanan.

Setelah aplikasi Anda siap, Anda akan diarahkan ke dasbor aplikasi Anda.

Tombol Aplikasi

Untuk menghubungkan proyek React Anda dengan Back4app, Anda harus mendapatkan App Keys. Untuk mendapatkan App Keys, pilih “App Settings” di sidebar dan kemudian “Security & Keys”.

Catat “ID Aplikasi” dan “kunci JavaScript”.

Parse SDK

Seperti yang mungkin sudah Anda ketahui, Back4app didasarkan pada Parse. Parse adalah kerangka kerja sumber terbuka untuk membangun backend aplikasi. Ini membantu pengembang untuk mempercepat pengembangan aplikasi dan mengurangi jumlah total upaya yang diperlukan untuk membangun aplikasi.

Untuk mempelajari lebih lanjut tentang Parse, lihat Apa itu Parse?

Untuk menyiapkan autentikasi Back4app, pertama-tama kita harus menginstal Parse SDK. Instal melalui npm:

$ npm install parse

Selanjutnya, buat berkas baru bernama parse.js di folder src dengan isi sebagai berikut:

// 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;

Pastikan untuk mengganti PARSE_APPLICATION_ID dan PARSE_JAVASCRIPT_KEY dengan kunci dari langkah sebelumnya.

Parse menyediakan kelas khusus bernama Parse.User yang secara otomatis menangani sebagian besar fungsionalitas yang dibutuhkan untuk manajemen akun pengguna. Parse.User adalah subkelas dari ParseObject yang menyediakan metode pembantu tambahan seperti signUp(), current(), getUsername( ), dan sebagainya.

Selain itu, Parse SDK menangani penanganan sesi penyimpanan lokal Anda. Sebagai contoh, Parse.User.logIn() menyimpan informasi pengguna di localStorage dan Parse.User.signOut() menghapus penyimpanan lokal.

Mari kita tambahkan beberapa fungsi pembungkus untuk lebih menyederhanakan kerja dengan sistem autentikasi Parse.

Tambahkan yang berikut ini ke bagian bawah parse.js:

// 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() membuat pengguna Parse (menggunakan email dan kata sandi)
2. doUserLogIn() mencoba untuk memasukkan pengguna dengan kredensial yang disediakan
3. isLoggedIn() memeriksa apakah localStorage berisi informasi sesi
4. getUser() mengembalikan pengguna yang login dari localStorage
5. logOut() menghapus localStorage sehingga mengeluarkan pengguna

Semua fungsi bersifat asinkron dan mengembalikan janji.

Tampilan

Mari kita manfaatkan fungsi yang sudah kita buat pada langkah sebelumnya.

Buka login.jsx dan ubah onSubmit() TODO seperti ini:

// 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);
  }
}

Kode ini akan memasukkan pengguna dan menavigasi ke /user atau menampilkan kesalahan.

Selanjutnya, ubah register.jsx onSubmit() TODO seperti ini:

// 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);
  }
}

Perlu diingat bahwa karena kita menggunakan formulir pendaftaran email/kata sandi, kita harus mengekstrak nama pengguna dari email. Nama pengguna adalah bagian sebelum @.

Solusi yang lebih baik adalah membuat formulir pendaftaran nama pengguna/kata sandi.

Kode ini akan membuat pengguna Parse atau menampilkan kesalahan. Kesalahan yang mungkin terjadi antara lain:

1. Nama pengguna sudah diambil.
2. Kata sandi tidak cukup kuat.

Terakhir, modifikasi user.jsx untuk menggunakan hook useEffect() untuk mengambil data pengguna dan membuat onLogout() memanggil fungsi logout:

// 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");
}

Hebat, itu dia!

Tes

Mari kita pastikan sistem autentikasi kita berfungsi seperti yang diharapkan.

Mulai server pengembangan dengan npm start, buka peramban web favorit Anda, dan buka http://localhost:3000/register. Masukkan email Anda, pilih kata sandi, dan klik “Daftar”:

Saat mendaftar, Anda akan diarahkan ke /user di mana Anda dapat melihat informasi akun Anda.

Untuk melihat sessionToken Anda, buka konsol pengembang browser Anda:

Your session token is: r:90343c307e7bb088e60c348acd8090d1

Terakhir, navigasikan ke Dasbor Aplikasi Back4app Anda dan pastikan pengguna telah dibuat:

Ambil kode sumber akhir untuk pendekatan ini dari repo back4app-react-firebase-auth.

Kesimpulan

Otentikasi dan otorisasi adalah langkah keamanan yang paling penting dari aplikasi modern. Otentikasi adalah proses memverifikasi siapa pengguna, sedangkan otorisasi adalah proses memverifikasi apa yang dapat diakses oleh pengguna.

Firebase dan juga Back4app keduanya menawarkan sistem autentikasi pengguna yang hebat. Masing-masing hadir dengan pro dan kontra mereka sendiri yang harus dipertimbangkan ketika memulai sebuah proyek.

Bacaan lebih lanjut

• Parse Keamanan Pengguna
• Otentikasi Sosial melalui layanan pihak ketiga
  • Masuk Google
  • Masuk Facebook
• Verifikasi Email
• Reset Kata Sandi

PERTANYAAN YANG SERING DIAJUKAN