Auth0 menyederhanakan proses pembuatan identitas pengguna di aplikasi web Anda. Ini menyediakan fitur otentikasi dan otorisasi yang aman dan dapat disesuaikan melalui API-nya. Gunakan itu, dan Anda tidak perlu khawatir membangun sistem autentikasi Anda sendiri dari awal.
Mengintegrasikan dengan Auth0 memudahkan untuk menyertakan autentikasi yang andal dalam aplikasi React Anda dan menjamin akses yang aman ke aplikasi Anda.
Langkah-langkah berikut menjelaskan apa yang diperlukan untuk mengintegrasikan Auth0 ke dalam aplikasi React.
Apa itu Auth0?
Auth0 adalah layanan web yang menyediakan API aman untuk ditangani otentikasi dan otorisasi pengguna di aplikasi Anda.
Ini menyediakan sistem autentikasi yang dapat disesuaikan yang dapat Anda integrasikan dengan mudah ke dalam aplikasi React Anda. Setelah Anda menghubungkan Auth0 ke aplikasi Anda, aplikasi tersebut akan menangani sisa beban kerja autentikasi.
Bagaimana Cara Kerja Auth0?
Auth0 menyediakan fitur Universal Login yang mengimplementasikan aliran autentikasi. Setiap kali pengguna ingin masuk, API mengarahkan mereka ke halaman masuk Auth0, mereka mendapatkan autentikasi, dan data payload autentikasi yang berhasil dikirim ke aplikasi Anda.
Anda dapat menyesuaikan alur kerja autentikasi untuk aplikasi Anda dengan menentukan metode masuk yang berbeda. Login Universal menyediakan nama pengguna dan kata sandi sebagai autentikasi utama, tetapi Anda bisa tambahkan juga opsi lain seperti login sosial, melalui penyedia seperti Google, dan multi-faktor autentikasi.
Keuntungan menggunakan jenis autentikasi ini adalah Anda tidak perlu mengenal identitas protokol seperti OAuth 2.0 atau OpenID Connect, yang biasanya digunakan untuk membuat autentikasi yang aman sistem.
Buat Proyek Baru di Konsol Pengembang Auth0
Untuk memulai, Anda harus terlebih dahulu mendaftar untuk sebuah Auth0 akun. Setelah mendaftar, navigasikan ke dasbor Anda dan klik Buat Aplikasi untuk mengonfigurasi pengaturan proyek autentikasi.
Auth0 menyediakan konfigurasi autentikasi yang berbeda tergantung pada jenis aplikasi yang Anda bangun. Untuk tutorial ini, isi nama aplikasi Anda, pilih Aplikasi Web Satu Halaman, lalu klik Menyimpan.
Selanjutnya, pilih Reaksi dari daftar teknologi yang didukung oleh Auth0.
Konfigurasikan URI Aplikasi
Setelah membuat aplikasi Anda dan mengonfigurasi pengaturan yang diperlukan, di dasbor aplikasi Anda, klik pada Pengaturan tab untuk menyiapkan properti URI yang diperlukan.
Tetapkan properti berikut:
- URL panggilan balik yang diizinkan. URL yang akan dipanggil oleh server Auth0 setelah pengguna mengautentikasi.
- URL logout yang diizinkan. URL tempat Auth0 akan mengalihkan pengguna saat mereka keluar.
- Asal web yang diizinkan. URL yang diizinkan dari mana permintaan otorisasi berasal.
Untuk pengembangan lokal, Anda dapat menggunakan http://localhost: 3000 URL. Namun, setelah Anda mendorong kode Anda ke produksi, Anda harus memberikan URL domain Anda.
Setelah selesai mengisi URL, lanjutkan dan klik Simpan perubahan di bagian bawah halaman pengaturan.
Tetapkan Penyedia Login Sosial Pilihan Anda
Pada panel menu kiri dasbor aplikasi Auth0, klik Autentikasi, lalu pilih Sosial. Selanjutnya, klik pada Buat Koneksi tombol di halaman pengaturan koneksi sosial.
Terakhir, pilih dan tambahkan penyedia login sosial pilihan Anda.
Konfigurasikan Auth0 ke dalam Aplikasi React Anda
Integrasikan layanan autentikasi Auth0 ke dalam aplikasi React Anda dengan membuat komponen login dan sukses.
1. Buat Aplikasi Bereaksi dan Siapkan File ENV
Buat aplikasi Bereaksi, lalu buka folder proyek di editor kode Anda. Selanjutnya, di direktori root folder proyek Anda, buat file ENV untuk menyimpan variabel lingkungan Anda: nama domain dan ID klien Anda. Masuk ke akun Auth0 Anda, di dasbor aplikasi, salin nama domain dan ID klien dan simpan di file ENV Anda sebagai berikut:
REACT_APP_AUTH0_DOMAIN= nama domain Anda
REACT_APP_AUTH0_CLIENT_ID= ID klien Anda2. Instal Paket yang Diperlukan
Jalankan perintah ini di terminal Anda untuk menginstal dependensi yang diperlukan:
npm instal @auth0/auth0-react3. Bungkus Komponen Aplikasi Anda Dengan Penyedia Auth0
Penyedia Auth0 menggunakan React Context. Ini memungkinkan Anda untuk mengakses semua propertinya dari dalam komponen Aplikasi. Penyedia Auth0 mengambil tiga parameter: domain klien, ID klien, dan URI pengalihan.
Buka file index.js, hapus kode React template, dan tambahkan kode di bawah ini:
impor Reaksi dari'reaksi';
impor ReactDOM dari'reaksi-dom/klien';
impor Aplikasi dari'./Aplikasi';
impor{Auth0Provider} dari'@auth0/auth0-react';const root = ReactDOM.createRoot(dokumen.getElementById('akar'));
root.render(
domain = {proses.env. REACT_APP_AUTH0_DOMAIN}
clientId = {proses.env. REACT_APP_AUTH0_CLIENT_ID}
redirectUri = {jendela.lokasi.asal}
>
</Auth0Provider>, document.getElementById('root')
);
4. Buat Komponen Halaman Login
Buat folder baru di direktori /src aplikasi React Anda, dan beri nama halaman. Di dalam folder ini, buat dua file: Login.js dan Success.js.
Buka file login.js dan tambahkan kode di bawah ini. Komponen halaman login akan merender tombol login.
impor Reaksi dari'reaksi'
impor { useAuth0 } dari'@auth0/auth0-react';const Masuk = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();kembali (Diautentikasi || (
eksporbawaan Gabung
Secara default, Auth0 menyediakan email dan kata sandi sebagai metode autentikasi. Selain itu, tergantung pada penyedia login sosial yang Anda pilih, Auth0 juga akan menampilkan opsi masuk penyedia.
5. Buat Komponen Halaman Sukses
Komponen ini akan merender dua fitur utama: profil pengguna yang diautentikasi dan tombol keluar.
Di file Success.js, tambahkan kode di bawah ini:
impor Reaksi dari'reaksi'
impor { useAuth0 } dari'@auth0/auth0-react'const Sukses = () => {
const { pengguna, logout, isAuthenticated } = useAuth0();kembali ( telah Diautentikasi && (
Profil Pengguna</h1>
{user.name}</h2>
{pengguna.email}</p>
eksporbawaan Kesuksesan
Setelah Anda masuk dan diautentikasi oleh Auth0, Auth0 mengarahkan Anda kembali ke aplikasi Anda dan mengirimkan data payload ke aplikasi Anda yang berisi detail pengguna. Anda dapat menggunakan data ini dalam aplikasi Anda untuk membangun profil pengguna khusus dan mengelola sesi pengguna. Properti User dari hook UseAuth memungkinkan Anda untuk mengakses data pengguna tertentu.
Kait UseAuth0 juga menyediakan properti yang disebut isAuthenticated, yang memungkinkan Anda merender komponen secara kondisional. Jika pengguna diautentikasi, kode akan merender detail profilnya dan menampilkan komponen tombol logout.
Sebaliknya, jika tidak, Anda akan merender komponen tombol login. Ini berarti Anda tidak perlu menentukan rute berdasarkan status autentikasi pengguna karena properti ini secara otomatis mengelola proses ini. Auth0 mendefinisikan logika login dan logout, sehingga memudahkan Anda untuk mengimplementasikan fungsi autentikasi.
Apakah Layanan Otentikasi Auth0 Layak Dicoba?
Auth0 menyediakan solusi siap pakai yang menangani persyaratan autentikasi aplikasi Anda. Selain itu, layanan Auth0 menawarkan dukungan untuk platform pengembangan web, seluler, dan asli yang memungkinkan Anda dengan mudah mengintegrasikan sistem autentikasi dengan kumpulan teknologi pilihan Anda.