Menambahkan Otentikasi Pengguna ke Aplikasi React Anda
Ketika membangun aplikasi web, autentikasi pengguna adalah fitur yang penting untuk ditambahkan ke aplikasi Anda. Autentikasi pengguna memungkinkan pengguna yang terverifikasi untuk mengakses fitur-fitur yang tersedia bagi mereka di aplikasi Anda dan menolak akses pengguna yang tidak terverifikasi.
Mengintegrasikan otentikasi pengguna di aplikasi React bukanlah tugas yang mudah dan memakan waktu karena melibatkan beberapa proses yang rumit, seperti hashing password, membuat dan mengelola token otentikasi, dan masih banyak lagi.
Namun, dengan platform seperti Back4App, mengintegrasikan autentikasi pengguna dengan aplikasi React Anda menjadi sangat sederhana dan mudah. Pada artikel ini, Anda akan mempelajari cara menambahkan autentikasi pengguna ke aplikasi React menggunakan Back4App.
Contents
Memahami Otentikasi Pengguna
Otentikasi pengguna adalah proses menentukan identitas seseorang yang mencoba mendapatkan akses ke aplikasi Anda.
Hal ini mengharuskan orang yang mencoba untuk mendapatkan akses ke aplikasi Anda memberikan kredensial yang dapat diverifikasi, yang dapat berupa nama pengguna dan kata sandi, data biometrik, kunci akses/token, dll.
Jika mekanisme autentikasi Anda menganggap kredensial valid, maka mekanisme ini akan memberikan akses kepada pengguna ke aplikasi Anda, jika tidak maka mekanisme ini akan menolak permintaan autentikasi dengan pesan kesalahan yang sesuai.
Metode Autentikasi Umum
Beberapa metode autentikasi yang umum termasuk yang berikut ini:
- Nama Pengguna dan Kata Sandi: Metode autentikasi ini mengharuskan pengguna memberikan nama pengguna dan kata sandi yang valid untuk mengautentikasi identitas mereka. Setelah pengguna memberikan nama pengguna dan kata sandi, mekanisme autentikasi ini membandingkannya dengan data yang tersimpan di database dan hanya menyetujui permintaan autentikasi jika cocok.
- Autentikasi Multi-Faktor (MFA): MFA mengacu pada kombinasi beberapa mekanisme autentikasi untuk mengautentikasi pengguna. Dalam sistem autentikasi yang menggunakan MFA, pengguna diharuskan memvalidasi identitas mereka lebih dari sekali. Sebagai contoh, pengguna mungkin diminta untuk memasukkan kode autentikasi setelah mengautentikasi identitas mereka menggunakan nama pengguna dan kata sandi.
- Autentikasi Biometrik: Autentikasi biometrik mengacu pada mekanisme autentikasi yang bergantung pada fitur biologis seperti wajah, pola iris mata, sidik jari, atau pengenalan suara untuk mengautentikasi pengguna.
- OAuth: OAuth adalah protokol autentikasi yang memungkinkan pengguna Anda untuk mengautentikasi identitas mereka dengan memberikan akses aplikasi Anda ke penyedia OAuth yang mereka sukai, seperti Facebook atau X (sebelumnya Twitter). Ketika pengguna mencoba mengautentikasi menggunakan OAuth, mereka akan diarahkan ke layar login penyedia OAuth untuk mengautentikasi identitas mereka.
- Token Web JSON (JWT): JWT adalah format token ringkas yang portabel dan aman untuk URI yang biasanya digunakan untuk mengirimkan detail autentikasi dan otorisasi dengan aman di antara berbagai pihak. Otentikasi dengan JWT melibatkan pengguna yang mengirimkan token akses JWT dalam permintaan mereka untuk memvalidasi identitas mereka.
Menambahkan Otentikasi Pengguna ke Aplikasi Anda dengan Back4app
Back4app merupakan platform cloud yang menawarkan berbagai macam layanan, termasuk fitur Backend-as-a-service (BaaS ). Opsi BaaS Back4app menawarkan berbagai fitur, termasuk otentikasi pengguna.
Menerapkan otentikasi pengguna dengan Back4app melibatkan beberapa langkah. Dalam tutorial ini, Anda akan membuat aplikasi manajemen bank sederhana menggunakan React.
Aplikasi ini akan mengintegrasikan fitur autentikasi Back4app, memungkinkan Anda untuk membuat akun, masuk ke akun Anda, mengakses informasi login Anda saat ini, dan keluar.
Membuat Aplikasi React
Untuk membuat aplikasi React baru, mulailah dengan membuat perancah aplikasi React baru menggunakan Vite. Vite adalah alat bantu pengembangan web yang menyediakan pengalaman pengembangan yang lebih cepat dan efisien.
Jalankan perintah berikut ini di terminal Anda untuk membuat aplikasi React yang baru:
npm init vite
Setelah menjalankan perintah di atas, serangkaian petunjuk akan muncul di layar Anda, meminta Anda untuk menentukan nama aplikasi, kerangka kerja pilihan, dan varian bahasa yang akan digunakan.
Sepertinya begitu:
Pada gambar di atas, nama aplikasi adalah react-authentication-app, framework yang dipilih adalah React, dan varian bahasanya adalah JavaScript.
Selanjutnya, ubah direktori Anda saat ini ke direktori aplikasi dan instal dependensi yang diperlukan dengan menjalankan perintah di bawah ini:
cd react-authentication-app && npm install
Selanjutnya, instal React Router di aplikasi Anda dengan menjalankan perintah di bawah ini:
npm install react-router-dom
Selanjutnya, buka aplikasi React Anda pada sebuah IDE (Integrated Development Environment) dan modifikasi file main.jsx dengan mengganti isinya dengan blok kode di bawah ini.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
)
Blok kode ini mengimpor komponen BrowserRouter dari paket react-router-dom dan membungkus komponen App.
Hal ini memungkinkan perutean di seluruh aplikasi. Di komponen Aplikasi Anda, tentukan rute yang berbeda dalam aplikasi.
Sepertinya begitu:
import { Route, Routes } from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";
function App() {
return (
<>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="" element={<Signup />}/>
<Route path="/login" element={<Login />}/>
</Routes>
</>
)
}
export default App
Blok kode di atas mendefinisikan tiga rute terpisah, yang memungkinkan pengguna untuk menavigasi antara halaman pendaftaran, login, dan beranda berdasarkan jalur URL.
Sekarang, buatlah folder komponen di direktori src aplikasi. Di dalam folder ini, buatlah file Authnavbar.jsx. Komponen ini akan berisi bilah navigasi yang akan ditampilkan pada halaman pendaftaran dan login.
Pada komponen Authnavbar, tulis kode ini:
import React from "react";
import { Link } from "react-router-dom";
function Authnavbar(props) {
return (
<nav>
<h3>Banka</h3>
{props.type === "signup" ? (
<div>
If you already have an account{""}
<Link to="/login" className="link">
Log in
</Link>
</div>
) : props.type === "login"? (
<div>
If you don't have an account{""}
<Link to="/" className="link">
Sign Up
</Link>
</div>
) : null}
</nav>
);
}
export default Authnavbar;
Blok kode di atas membuat bilah navigasi dengan rendering bersyarat berdasarkan nilai prop tipe, yang memungkinkan pengguna untuk menavigasi antara halaman pendaftaran dan login di dalam aplikasi.
Selanjutnya, buatlah folder halaman di direktori src aplikasi. Di dalam folder ini, buat tiga komponen: Home.jsx, Sign-up.jsx, dan Login.jsx. File-file ini akan berfungsi sebagai halaman beranda, pendaftaran, dan login.
Halaman pendaftaran akan berisi formulir di mana pengguna dapat memasukkan detail mereka, seperti nama pengguna, email, dan kata sandi.
Sebagai contoh:
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Signup() {
const [formData, setFormData] = React.useState({
username: "",
email: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "sign-up"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "email"
name= "email"
placeholder= "Email..."
onChange={handleChange}
value={formData.email}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Sign Up</button>
</div>
</form>
</>
);
}
export default Sign-up;
Blok kode ini mewakili halaman pendaftaran. Halaman ini berisi formulir dengan kolom input, termasuk nama pengguna, email, dan kata sandi pengguna.
Ada juga status formData yang menyimpan nilai dari kolom input nama pengguna, email, dan kata sandi. Fungsi handleChange memperbarui status formData setiap kali pengguna mengetik di kolom input.
Pada komponen Login, tuliskan baris kode berikut ini:
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Login() {
const [formData, setFormData] = React.useState({
username: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "login"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Log In</button>
</div>
</form>
</>
);
}
export default Login;
Halaman login sangat mirip dengan halaman pendaftaran, kecuali tidak ada kolom input email di formulir login, dan status objek formData tidak memiliki properti email.
Sekarang, beri gaya pada aplikasi Anda dengan mengganti kode di file index.css dengan baris kode berikut:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
color: #333333;
background-color: #E8F7F5;
inline-size: 50%;
margin: auto;
font-family: "Montserrat", sans-serif;
}
input{
padding: 0.7rem 1rem;
border-radius: 10px;
border: none;
outline: none;
color: #333333;
background-color: #FFFFFF;
font-family: "Montserrat", sans-serif;
inline-size: 100%;
}
input::placeholder{
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
button{
padding: 0.7rem 1rem;
background-color: #00C3A5;
color: #FFFFFF;
font-family: "Montserrat", sans-serif;
font-size: 14px;
border-radius: 7px;
border: none;
}
form{
margin-block-start: 25%;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.link{
text-decoration: none;
color: #00C3A5;
}
Setelah menata aplikasi Anda, jalankan perintah di bawah ini untuk memulai aplikasi Anda:
npm run dev
Menjalankan perintah di atas akan memberi Anda tautan http://localhost:5173/. Navigasikan ke tautan ini di browser web Anda untuk melihat aplikasi Anda.
Dengan gaya yang Anda tentukan, halaman pendaftaran akan terlihat seperti halaman di bawah ini:
Halaman login Anda akan terlihat seperti gambar di bawah ini:
Sekarang setelah Anda membuat aplikasi React, Anda perlu membuat aplikasi Back4app baru untuk menangani autentikasi Anda.
Membuat Aplikasi Back4App Baru
Untuk menggunakan Back4app, Anda harus memiliki akun. Anda bisa mendaftar secara gratis jika Anda belum memilikinya.
Untuk tutorial ini, Anda akan membuat aplikasi Back4app baru menggunakan agen AI Back4app. Agen AI Back4app adalah pembantu AI yang membantu Anda menjalankan tugas di Back4app menggunakan petunjuk.
Masuk ke akun Back4app Anda dan cari serta klik tombol “Agen AI” di navbar dasbor Anda (Lihat gambar di bawah).
Untuk menggunakan Agen AI Back4app untuk membuat aplikasi, masukkan perintah di bawah ini:
create a new application named react-authenticationAnda akan mendapatkan respons yang serupa dengan yang ditunjukkan pada gambar di bawah ini:
Seperti yang ditunjukkan pada gambar di atas, Agen AI Back4app membuat aplikasi bernama react-authentication. Anda dapat menemukan aplikasi ini di halaman web “Aplikasi Saya”.
Atau, Anda dapat membuat aplikasi Back4app baru menggunakan UI (Antarmuka Pengguna) Back4app yang intuitif.
Dalam aplikasi react-authentication di Back4app, buatlah kelas dompet. Kelas dompet ini akan menyimpan informasi berharga tentang dompet pengguna.
Anda dapat membuat kelas dengan Agen AI menggunakan prompt di bawah ini:
Create a Wallet class and add the following fields: balance, owner(relation to the User class indicating which user owns the wallet), createdAt, and updatedAt in the react-authentication appAgen AI akan memulai proses pembuatan kelas dompet dan menambahkan yang ditentukan, seperti yang ditunjukkan pada gambar di bawah ini.
Menghubungkan Aplikasi React Anda ke Back4app
Setelah membuat aplikasi Back4app, Anda perlu menghubungkan aplikasi Back4app ke aplikasi React menggunakan Parse SDK.
Instal Parse di aplikasi Anda dengan menjalankan perintah di bawah ini:
npm install parse
Selanjutnya, inisialisasi di aplikasi Anda dengan mengimpor objek Parse di komponen aplikasi Anda dan mengkonfigurasinya dengan kunci aplikasi Back4app Anda.
Sepertinya begitu:
import Parse from 'parse';
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';
Ganti 'YOUR_APP_ID' dan 'YOUR_JAVASCRIPT_KEY' dengan kunci yang disediakan oleh Back4App. Anda akan menemukan kunci aplikasi Anda di layar setelah membuat aplikasi Anda dengan Agen AI Back4app.
Perhatikan bahwa Anda harus selalu mengamankan kunci dengan benar dalam aplikasi Anda, sebaiknya menggunakan variabel env.
Menerapkan Otentikasi Pengguna menggunakan Parse SDK
Dengan Parse yang telah diinisialisasi, Anda sekarang dapat mengimplementasikan autentikasi pengguna di aplikasi React Anda.
Back4App secara otomatis menyediakan kelas Pengguna untuk otentikasi pengguna. Kelas ini memiliki bidang default seperti nama pengguna, kata sandi, email, dll.
Tambahkan baris kode berikut ini ke komponen Sign-up untuk mengimplementasikan pendaftaran pengguna di aplikasi React Anda.
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const signUpUser = async () => {
try {
const newUser = new Parse.User();
newUser.set("username", formData.username);
newUser.set("email", formData.email);
newUser.set("password", formData.password);
const user = await newUser.signUp();
let Wallet = Parse.Object.extend("Wallet");
let wallet = new Wallet();
let userPointer = {
__type: "Pointer",
className: "_User",
objectId: user.id,
};
wallet.set("owner", userPointer);
wallet.set("balance", 100);
wallet.save();
console.log(`${user} have successfully signed up`);
navigate("/login");
} catch (error) {
console.log("you encountered an error signing up");
}
};
Blok kode di atas menggunakan hook useNavigate dari react-router-dom untuk menavigasi secara terprogram ke rute yang berbeda. Pengait useNavigate mengembalikan fungsi navigasi yang ditetapkan ke variabel navigate.
Fungsi signUpUser bertanggung jawab untuk mendaftarkan pengguna baru. Fungsi ini membuat objek pengguna Parse baru, newUser, menggunakan metode Parse.User dan menetapkan nilai properti nama pengguna, email, dan kata sandi ke nilai properti yang sesuai dengan status objek formData. Kemudian memanggil metode signUp secara asinkron pada objek newUser.
Setelah kode membuat pengguna baru, kode tersebut mendefinisikan kelas Parse bernama “Wallet” dengan metode Parse.Object.extend.
Kemudian, kode tersebut membuat objek userPointer, yang merepresentasikan sebuah penunjuk kepada pengguna dengan nama kelas _User dan ID objek pengguna yang baru mendaftar. Dengan menggunakan metode set, kode tersebut menetapkan pemilik dompet ke objek userPointer dan menetapkan saldo awal dompet ke 100.
Pada pendaftaran yang berhasil, fungsi ini mencatat pesan sukses dan mengarahkan ke rute masuk menggunakan fungsi navigasi. Jika terjadi kesalahan selama pendaftaran, fungsi ini akan menangkapnya dan mencatat pesan kesalahan.
Selanjutnya, buat fungsi handleSubmit yang memanggil fungsi signUpUser. Ikat fungsi ini ke formulir pendaftaran menggunakan penangan peristiwa onSubmit.
Hal ini memastikan bahwa ketika pengguna mengirimkan formulir pendaftaran, fungsi handleSubmit secara otomatis dipicu.
Fungsi handleSubmit akan terlihat seperti ini:
const handleSubmit = (event) => {
event.preventDefault();
signUpUser();
};
Untuk mengimplementasikan login pengguna, Anda akan membuat fungsi logInUser yang menyimpan logika untuk login pengguna.
Tambahkan blok kode di bawah ini ke komponen Login Anda:
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const logInUser = async () => {
try {
const user = await Parse.User.logIn(formData.username, formData.password);
console.log("User logged in successfully:", user);
navigate("/home");
} catch (error) {
console.log("Error logging in user:", error);
}
};
const handleSubmit = (event) => {
event.preventDefault();
logInUser();
};
Fungsi logInUser memanggil metode logIn dari kelas Parse.User secara asinkron, memberikan nilai properti nama pengguna dan kata sandi dari status objek formData.
Fungsi ini memeriksa apakah nama pengguna dan kata sandi yang dimasukkan pengguna sesuai dengan yang disimpan di kelas User Back4App. Jika cocok, pengguna akan berhasil masuk.
Ikat fungsi handleSubmit ke formulir login menggunakan event onSubmit. Fungsi handleSubmit akan memanggil fungsi logInUser dan mencoba memasukkan pengguna.
Setelah login, Parse SDK mengelola sesi pengguna. Anda dapat mengakses pengguna saat ini dengan metode Parse.User.current. Anda akan menggunakan metode ini di komponen Home.
Buka komponen Home dan tulis kode ini:
import React from "react";
import Parse from "parse";
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
const [balance, setBalance] = React.useState(0);
const user = Parse.User.current();
const fetchBalance = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
setBalance(wallet.get("balance"));
};
fetchBalance();
return (
<>
<nav>
<h1 className="title">Banka</h1>
<button>Log out</button>
</nav>
<div className="home">
<p className="top">Welcome {user.get("username")}</p>
<div className="balance-card">
<p>Total Wallet Balance</p>
<h1>{balance}</h1>
<button>Top Up</button>
</div>
<div className="features">
<div className="card">
<p>Pay Bills</p>
</div>
<div className="card">
<p>Airtime/Data</p>
</div>
<div className="card">
<p>Transfers</p>
</div>
<div className="card">
<p>Withdraw</p>
</div>
</div>
</div>
</>
);
}
export default Home;
Blok kode di atas mewakili halaman beranda aplikasi Anda. Fungsi fetchBalance mengambil saldo dompet pengguna saat ini.
Ini meng-query kelas “Wallet” dengan metode Parse.Query dan menetapkan batasan pada kueri untuk mengambil dompet di mana properti pemiliknya sama dengan pengguna saat ini menggunakan metode query.equalTo.
Metode query.first mengeksekusi kueri dan mengembalikan hasil pertama yang cocok dengan batasan kueri.
Dengan fungsi setBalance, kode mengatur saldo dompet ke status saldo. Kode ini menampilkan nama pengguna dan saldo dompet mereka.
Pada bagian JSX di blok kode, Anda akan menemukan tombol “top up” pada tag div dengan kelas balance-card.
Mengklik tombol ini akan meningkatkan saldo dompet sebesar 10. Untuk memungkinkan hal ini, Anda akan membuat fungsi topUp yang berisi logika untuk meningkatkan saldo.
Sepertinya begitu:
const topUp = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
wallet.increment("balance", 10);
const newBalance = await wallet.save();
setBalance(newBalance.get("balance"));
};
Kode ini mengambil dompet pengguna dari backend Parse, menambah saldo sebesar 10 dengan metode penambahan, menyimpan dompet yang diperbarui kembali ke backend, dan memperbarui status saldo. Ikat fungsi topUp ke tombol “top up” menggunakan penangan peristiwa klik.
Selanjutnya, pada komponen Home, tambahkan fungsi logOutUser yang bertanggung jawab untuk mengeluarkan pengguna. Fungsinya akan terlihat seperti ini:
const logOutUser = async () => {
try {
const user = await Parse.User.logOut();
console.log("User logged out successfully:", user);
navigate("/");
} catch (error) {
console.error("Error logging out user:", error);
}
};
Fungsi logOutUser memanggil metode logOut dari kelas Parse.User secara asinkron untuk mengeluarkan pengguna saat ini. Ikat fungsi logOutUser ke tombol “logout” di komponen Beranda menggunakan peristiwa klik.
Untuk memberi gaya pada komponen Home, tambahkan kelas CSS yang didefinisikan di bawah ini ke file index.css.
.home{
display: flex;
flex-direction: column;
gap: 3rem;
margin-block-start: 4rem;
}
.title{
text-align: center;
margin-block-start: 2rem;
}
.top{
font-size: 25px;
font-weight: 500;
}
.balance-card{
background-color: #FFFFFF;
inline-size: 40%;
padding: 1rem 2rem;
border-radius: 7px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.features{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.card{
background-color: #FFFFFF;
color: #00C3A5;
margin-block-end: 1rem;
padding: 1rem 2rem;
font-size: 25px;
border-radius: 10px;
}
.card:hover{
opacity: 0.6;
}
Menguji Aplikasi Anda
Setelah Anda selesai membuat aplikasi React dan mengimplementasikan otentikasi pengguna dengan Back4app.
Langkah selanjutnya adalah menguji aplikasi. Untuk melakukannya, buka tautan http://localhost:5173/ di browser web Anda, dan halaman pendaftaran akan ditampilkan di layar Anda.
Isi formulir pendaftaran dan kirimkan.
Setelah mendaftar, Anda dapat mengonfirmasi apakah pendaftaran berhasil dengan mengunjungi dasbor aplikasi Anda di Back4app. Jika pendaftaran berhasil, Back4app akan menambahkan detail pengguna ke kelas Pengguna di aplikasi Anda.
Sepertinya begitu:
Setelah mendaftar, aplikasi akan mengarahkan Anda ke halaman login, di mana Anda akan masuk menggunakan nama pengguna dan kata sandi yang Anda gunakan dalam formulir pendaftaran.
Sebagai contoh:
Setelah Anda masuk, halaman beranda akan muncul di layar Anda, dan akan terlihat seperti ini:
Sekarang klik tombol “top up” untuk menambah saldo Anda sebesar 10.
Menerapkan Aplikasi React Anda di Back4app
Untuk men-deploy aplikasi React Anda di Back4app, Anda akan menggunakan aplikasi Container as a Service (CaaS) dari Back4app.
CaaS Back4app memungkinkan Anda untuk menggunakan dan mengelola kontainer Docker di lingkungan cloud yang disediakan oleh Back4App.
Sebelum Anda dapat men-deploy aplikasi React Anda, Anda harus terlebih dahulu mendockerisasi aplikasi tersebut. Untuk melakukan ini, buatlah sebuah Dockerfile di direktori root aplikasi Anda dan tambahkan baris kode berikut:
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]
Dockerfile ini menyiapkan lingkungan Node.js, membuat direktori kerja, menginstal dependensi, menyalin kode aplikasi, mengekspos porta, dan menentukan perintah default untuk menjalankan aplikasi.
Selain itu, buat berkas .dockerignore. Di dalam berkas .dockerignore, tambahkan berkas dan direktori yang dikecualikan dari konteks saat membangun citra Docker.
Sebagai contoh:
#.dockerignore
node_modules
Karena Anda membuat aplikasi React dengan Vite, Anda harus memperbarui file konfigurasi Vite untuk mendukung Docker. Pada berkas vite.config.js Anda, ganti kode yang sudah ada dengan blok kode di bawah ini:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [react()],
server: {
host: true,
strictPort: true,
port: 5173,
},
})
Blok kode ini mengatur server untuk menggunakan hos default, biasanya localhost. Blok kode ini mengatur nomor port yang akan didengarkan oleh server pengembangan ke port 5173 dan memastikan bahwa Vite akan gagal memulai server jika port yang ditentukan tidak tersedia.
Anda sekarang dapat membangun citra docker aplikasi Anda dengan menjalankan perintah berikut ini di terminal Anda:
docker build -t quote-generator .
Pastikan Anda mendorong aplikasi Anda ke akun GitHub Anda sebelum mencoba menerapkan aplikasi di Back4app. Setelah Anda selesai mendorong aplikasi, integrasikan akun GitHub Anda dengan Back4app.
Anda dapat melakukan ini dengan aplikasi Github Back4app. Setelah mengintegrasikan GitHub Anda dengan Back4app, Anda sekarang dapat menggunakan aplikasi Anda menggunakan Agen AI Back4app.
Untuk menggunakan aplikasi, masukkan perintah di bawah ini:
Deploy my repository <<repository-url>> on Back4app containers
Pada blok kode di atas, ganti repository-url dengan URL repositori GitHub aplikasi Anda.
Seperti yang ditunjukkan pada gambar di atas, saat berkomunikasi dengan agen AI, berikan tautan repositori GitHub dari aplikasi yang ingin Anda gunakan.
Setelah Agen AI Back4app memulai penyebaran aplikasi, tunggu beberapa menit, lalu konfirmasikan status penyebaran saat ini.
Sebagai contoh:
Setelah penyebaran berhasil, Agen AI Back4app akan memperbarui status penyebaran aplikasi menjadi “disebarkan” dan memberi Anda tautan untuk mengakses aplikasi di browser Anda.
Anda bisa menemukan aplikasi yang sudah jadi di repositori GitHub ini dan aplikasi langsung di URL ini.
Kesimpulan
Artikel ini menjelaskan bagaimana cara menambahkan autentikasi ke aplikasi React menggunakan backend sebagai layanan.
Mengintegrasikan otentikasi pengguna ke dalam aplikasi React Anda menggunakan Back4App adalah proses yang sangat mudah yang secara signifikan meningkatkan keamanan dan fungsionalitas aplikasi Anda.
Dengan memanfaatkan layanan Back4App, Anda dapat fokus membangun aplikasi web Anda dengan pengalaman pengguna yang luar biasa sambil menyerahkan tugas-tugas manajemen backend dan otentikasi ke platform yang andal.
