/ / Cách tích hợp dịch vụ xác thực Supabase trong ứng dụng React.js

Cách tích hợp dịch vụ xác thực Supabase trong ứng dụng React.js

Xây dựng một hệ thống xác thực tùy chỉnh có thể là một nhiệm vụ khó khăn. Nó đòi hỏi sự hiểu biết sâu sắc về các giao thức xác thực cũng như các quy trình xác thực và ủy quyền của người dùng. Tuy nhiên, bằng cách tích hợp một công cụ như Supabase, bạn có thể tập trung hơn vào việc xây dựng logic cốt lõi cho ứng dụng của mình.


Supabase là giải pháp thay thế Firebase mã nguồn mở cung cấp nền tảng phát triển dựa trên đám mây. Nó cung cấp một loạt các dịch vụ phụ trợ như cơ sở dữ liệu Postgres chính thức, dịch vụ xác thực và các chức năng không có máy chủ.

Nó được thiết kế để dễ tiếp cận hơn, cho phép bạn thiết lập các dự án một cách nhanh chóng. Hãy làm theo để tìm hiểu cách tích hợp dịch vụ xác thực trong các ứng dụng React.js của bạn.


Tạo Dự án mới trên Bảng điều khiển dành cho nhà phát triển Supabase

Để tạo một dự án mới trên Bảng điều khiển dành cho nhà phát triển Supabase, hãy làm theo các bước sau:

  1. Đăng ký tài khoản nhà phát triển Supabase. Điều hướng đến bảng điều khiển và tạo một dự án mới.
    Trang cài đặt dự án mới Supabase trên nền tối

  2. Điền vào Tên dự án và mật khẩu (đây là tùy chọn cho hướng dẫn này nhưng được khuyến nghị khi thiết lập cơ sở dữ liệu), chọn khu vực và cuối cùng nhấp vào Tạo dự án mới.
  3. Trong Cài đặt API, sao chép dự án URL và công khai Chìa khóa.
    Trang Cài đặt API Supabase trên nền tối

Thiết lập nhà cung cấp xác thực

Nhà cung cấp xác thực cung cấp một cách an toàn để người dùng xác thực bằng các thông tin đăng nhập xã hội khác nhau. Supabase theo mặc định cung cấp một nhà cung cấp email. Ngoài ra, bạn có thể thêm các nhà cung cấp khác như Google, GitHub hoặc Discord tùy theo sở thích của mình.

Hướng dẫn này sẽ trình bày cách thiết lập Nhà cung cấp của Google. Để làm đươc như vậy, hãy tuân theo những bước sau:

  1. Trong ngăn bên trái, hãy chọn xác thực chuyển hướng.
    Tab Cài đặt xác thực ở ngăn bên trái của Bảng điều khiển dự án Supabase

  2. Trong trang Cài đặt xác thực, hãy chọn nhà cung cấp tùy chọn, và cuối cùng, chọn tùy chọn Nhà cung cấp của Google từ danh sách các nhà cung cấp. Lưu ý rằng nhà cung cấp email đã được định cấu hình theo mặc định. Bạn không cần phải thực hiện bất kỳ cấu hình nào.
    Danh sách Nhà cung cấp xác thực được Supabase hỗ trợ với nhà cung cấp email được bật theo mặc định

  3. Kích hoạt Các nhà cung cấp nút bật tắt.
  4. Nhà cung cấp Google yêu cầu hai thông tin đầu vào: ClientID và ClientSecret. Bạn sẽ nhận được hai giá trị này sau khi tạo ứng dụng trên Google Developer Console. Hiện tại, hãy sao chép Chuyển hướng URL. Bạn sẽ sử dụng nó để thiết lập một ứng dụng trên Google Developer Console để lấy ClientID và ClientSecret.
    Trang Cài đặt Nhà cung cấp Google của Supabase

Thiết lập dự án của bạn trên Google Developer Console (GDC)

Để xác thực với Google, bạn cần phải đăng ký ứng dụng của mình trên Google Developer Console (GDC) và lấy ClientID và ClientSecret. Thực hiện theo các bước sau để thiết lập dự án trên GDC:

  1. Truy cập Bảng điều khiển dành cho nhà phát triển của Google và đăng nhập bằng tài khoản Google của bạn để truy cập bảng điều khiển.
  2. Sau khi đăng nhập, điều hướng đến API và dịch vụ tab, chọn Tạo thông tin xác thực tùy chọn, rồi chọn Mã ứng dụng khách OAuth.
    Trang dành cho nhà phát triển Google Console với các tùy chọn Tạo thông tin xác thực và ID ứng dụng khách OAuth được làm nổi bật

  3. Chỉ định loại ứng dụng từ các tùy chọn được cung cấp và sau đó điền tên ứng dụng của bạn.
  4. Sau đó, chỉ định URL tuyến đường về nhà của ứng dụng của bạn (http//:localhost:3000) và cuối cùng, chỉ định URL chuyển hướng gọi lại. Dán URL chuyển hướng mà bạn đã sao chép từ trang cài đặt Nhà cung cấp Google Supabase. Bấm vào Tiết kiệm để hoàn thành quá trình.
    Cửa sổ bật lên cài đặt Máy khách OAuth trên Google Developer Console với clientID và ClientSecret

  5. Sao chép Mã khách hàng và bí mật khách hàng và quay lại trang tổng quan Dự án Supabase của bạn và dán chúng vào các trường nhập ClientID và ClientSecret trong trang cài đặt Nhà cung cấp của Google. Nhấp chuột Tiết kiệm để kích hoạt Nhà cung cấp.
    Trang cài đặt Nhà cung cấp Google trên bảng điều khiển cài đặt Nhà cung cấp Supabase

Định cấu hình Dịch vụ xác thực Supabase trong Ứng dụng React.js

Tạo ứng dụng React.js, sau đó mở thư mục dự án trong trình chỉnh sửa mã yêu thích của bạn. Tiếp theo, trong thư mục gốc của thư mục dự án của bạn, hãy tạo một tệp ENV để chứa các biến môi trường của bạn: URL dự án và khóa ẩn danh công khai của bạn. Truy cập trang cài đặt Supabase của bạn, mở phần API và sao chép URL dự án cũng như khóa ẩn danh công khai.

 REACT_APP_SUPABASE_URL= project URL
REACT_APP_SUPABASE_API_KEY = public anon key

1. Cài đặt các gói cần thiết

Chạy lệnh này trên thiết bị đầu cuối của bạn để cài đặt các phụ thuộc cần thiết:

 npm install @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Tạo Trang Đăng nhập và Thành phần Trang Thành công

Tạo một thư mục mới trong thư mục /src của ứng dụng React.js của bạn và đặt tên cho nó là pages. Trong thư mục này, tạo hai tệp: Login.js và Success.js.

3. Thành phần trang đăng nhập

Thành phần này sẽ hiển thị tính năng đăng ký và đăng nhập, sử dụng Giao diện người dùng xác thực React.js do Supabase cung cấp. Bạn đã nhập giao diện người dùng xác thực dưới dạng phần phụ thuộc (@supabase/auth-UI-react), giúp việc triển khai chức năng xác thực trở nên đơn giản hơn.

Trong tệp login.js, hãy thêm mã bên dưới:

 import React from 'react';
import {createClient} from '@supabase/supabase-js';
import {Auth, ThemeSupa} from '@supabase/auth-ui-react';
import {useNavigate} from 'react-router-dom';
const supabase = createClient(
    process.env.REACT_APP_SUPABASE_URL,
    process.env.REACT_APP_SUPABASE_API_KEY
); 
function Login() {
    const navigate = useNavigate(); 
    supabase.auth.onAuthStateChange(async (event) =>{
        if (event !== "SIGNED_OUT") {
            navigate('/success');
        }else{
            navigate("https://www.smartreviewaz.com/");
        }
    })
  return (
    <div className="App">
      <header className="App-header">
        <Auth
            supabaseClient={supabase}
            appearance={{theme: ThemeSupa}}
            theme="dark" 
            providers={['google']}
        /> 
      </header>
    </div>
  );
}
export default Login;

Hãy chia nhỏ nó ra:

  • Khởi tạo ứng dụng khách Supabase với các biến môi trường — URL dự án và khóa ẩn danh công khai của bạn trong tệp ENV.
  • Thiết lập trình lắng nghe sự kiện để theo dõi các thay đổi trong trạng thái xác thực bằng cách sử dụng phương thức supabase.auth.onAuthStateChange() tức là Nếu trạng thái xác thực không phải là “SIGNED_OUT” thì người dùng sẽ được điều hướng đến trang ‘/success’, nếu không, người dùng sẽ được điều hướng đến trang ‘/’ (trang chủ/đăng nhập).
  • Bạn sẽ sử dụng phương thức điều hướng từ hook useNavigate để quản lý quy trình này.
  • Cuối cùng, trả về một div chứa thành phần React Auth UI từ thư viện Supabase với giao diện của themeSupa (do Supabase cung cấp), giao diện tối và nhà cung cấp Google được đặt làm thuộc tính.

4. Thành phần Trang thành công

Thành phần này sẽ hiển thị trang thành công với thông tin chi tiết về người dùng sau khi người dùng được xác thực thành công và nút đăng xuất.

Trong tệp Success.js, hãy thêm mã bên dưới:

 import React from 'react';
import {createClient} from '@supabase/supabase-js';
import {useNavigate} from 'react-router-dom';
import {useEffect, useState} from 'react';
const supabase = createClient(
    process.env.REACT_APP_SUPABASE_URL,
    process.env.REACT_APP_SUPABASE_API_KEY
); 
function Success() {
    const [user, setUser] = useState([]); 
    const navigate = useNavigate(); 
    useEffect (() => {
        async function getUserData(){
           await supabase.auth.getUser().then((value) => {
               if(value.data?.user) {
                setUser(value.data.user)} 
            }) }
       getUserData();
    },[]);
    const avatar = user?.user_metadata?.avatar_url; 
    const userName = user?.user_metadata?.full_Name; 
    async function signOutUser(){
        await supabase.auth.signOut();
         navigate("https://www.smartreviewaz.com/");
     };
  return (
    <div className="App">
      <header className="App-header">
      <h1>Login Successful</h1>
       <h2>{userName}</h2>
       <img src={avatar} />
       <button onClick={()=> signOutUser()}>Sign Out</button> 
      </header>
    </div>
  );
}
export default Success;

Hãy chia nhỏ nó ra:

  • Khởi tạo ứng dụng khách Supabase với các biến môi trường — URL dự án và khóa ẩn danh công khai của bạn trong tệp ENV.
  • Sử dụng hook React.js, useState và useEffect, để lấy dữ liệu từ phản hồi API.
  • Móc useEffect triển khai một hàm không đồng bộ gọi phương thức supabase.auth.getUser. Phương thức này truy xuất thông tin người dùng được liên kết với phiên của người dùng hiện tại.
  • Sau đó, chức năng không đồng bộ sẽ kiểm tra xem liệu dữ liệu người dùng có tồn tại hay không và đặt dữ liệu đó thành biến trạng thái nếu có.
  • Hàm signOutUser sử dụng phương thức supabase.auth.signOut để đăng xuất người dùng và điều hướng họ trở lại trang đăng nhập khi họ nhấp vào nút đăng xuất.
  • Cuối cùng, trả về một div với một số thông tin người dùng.

5. Định cấu hình Định tuyến Trang

Cuối cùng, định cấu hình các tuyến đường cho cả trang đăng nhập và trang thành công.

Trong tệp app.js, hãy thêm mã bên dưới:

 import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Success from './pages/Success';
function App() {
  return (
    <Router>
      <Routes> 
        <Route path="https://www.smartreviewaz.com/" element={<Login />} />
        <Route path="/success" element={<Success />} />
      </Routes>
    </Router>
  );
}
export default App;

Hãy chia nhỏ nó ra:

  • Xác định hai tuyến: một tuyến cho trang đăng nhập và một tuyến cho trang thành công bằng cách sử dụng các thành phần Bộ định tuyến từ thư viện bộ định tuyến phản ứng.
  • Đặt các đường dẫn tuyến đường thành ‘/’ và ‘/success’ tương ứng, đồng thời gán các thành phần Đăng nhập và Thành công cho các tuyến đường tương ứng của chúng.
  • Cuối cùng, hãy chạy lệnh này trên thiết bị đầu cuối của bạn để khởi động máy chủ phát triển: 
      npm start
  • Hướng đến http//:localhost:3000 trên trình duyệt của bạn để xem kết quả. Thành phần đăng nhập hiển thị React-auth-UI của Supabase với cả nhà cung cấp dịch vụ email và Google.
    Ứng dụng Reactjs hiển thị Tính năng xác thực Supabase

Bạn có thể xác thực bằng Google hoặc đăng ký bằng email và mật khẩu của mình và sử dụng các thông tin đăng nhập này để đăng nhập. Ưu điểm của việc sử dụng nhà cung cấp thông tin đăng nhập xã hội của Supabase hoặc nhà cung cấp email là bạn không cần phải lo lắng về logic đăng ký.

Sau khi người dùng đăng ký với nhà cung cấp xã hội hoặc bằng email và mật khẩu, dữ liệu sẽ được lưu trữ trên cơ sở dữ liệu người dùng Auth của Supabase cho dự án của bạn. Khi họ đăng nhập bằng thông tin đăng nhập của mình, Supabase sẽ xác thực các chi tiết dựa trên thông tin đăng nhập được sử dụng để đăng ký.

Cơ sở dữ liệu người dùng xác thực Supabase trên trang cài đặt xác thực

Supabase giúp việc xác thực trong React trở nên dễ dàng

Supabase cung cấp một bộ tính năng toàn diện ngoài xác thực, chẳng hạn như lưu trữ cơ sở dữ liệu, truy cập API và truyền dữ liệu theo thời gian thực. Nó cũng cung cấp các tính năng như trình tạo truy vấn và trực quan hóa dữ liệu để giúp các nhà phát triển xây dựng và quản lý ứng dụng của họ hiệu quả hơn.

Với bảng điều khiển trực quan và API mạnh mẽ, Supabase là một công cụ mạnh mẽ để xây dựng các ứng dụng an toàn và có thể mở rộng.

Bài viết liên quan:

  1. Máy quét cho văn phòng gia đình và doanh nghiệp nhỏ
  2. PLANETIX: Cách dùng Twitter cập nhật thông tin nhanh nhất từ công ty
  3. Cách dùng đầu dũa chạy nhám, làm sạch Cuticle – Christine Lam
  4. Bao nhiêu người có thể xem Netflix cùng một lúc trên mỗi tài khoản?

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *