קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

בניית מערכת אימות מותאמת אישית יכולה להיות משימה לא פשוטה. זה דורש הבנה מעמיקה של פרוטוקולי אימות, ותהליכי אימות והרשאה של משתמשים. עם זאת, על ידי שילוב של כלי כמו Supabase, אתה יכול להתמקד יותר בבניית ההיגיון המרכזי של היישום שלך.

Supabase היא אלטרנטיבה של Firebase בקוד פתוח המספקת פלטפורמת פיתוח מבוססת ענן. הוא מציע מגוון שירותי קצה כמו מסד נתונים מלא של Postgres, שירות אימות ופונקציונליות ללא שרת.

זה נועד להיות נגיש יותר, ומאפשר לך להקים פרויקטים במהירות. עקוב אחר כך כדי ללמוד כיצד לשלב את שירות האימות ביישומי React.js שלך.

צור פרויקט חדש ב-Supabase Developer Console

כדי ליצור פרויקט חדש ב-Supabase Developer Console, בצע את השלבים הבאים:

  1. הירשם עבור א Supabase חשבון מפתח. נווט ללוח המחוונים וצור פרויקט חדש.
  2. מלא את שם הפרויקט וסיסמה (זה אופציונלי עבור הדרכה זו אך מומלץ בעת הגדרת מסד נתונים), בחר את האזור ולבסוף לחץ על צור פרויקט חדש.
  3. תחת הגדרות API, העתק את הפרויקט כתובת אתר וה אנון ציבורי מַפְתֵחַ.
instagram viewer

הגדר ספק אישור

ספק אימות מספק דרך מאובטחת למשתמשים לבצע אימות באמצעות כניסות חברתיות שונות. Supabase כברירת מחדל מספקת ספק דוא"ל. בנוסף, אתה יכול להוסיף ספקים אחרים כגון Google, GitHub או Discord בהתאם להעדפות שלך.

מדריך זה ידגים כיצד להגדיר ספק Google. לשם כך, בצע את השלבים הבאים:

  1. בחלונית השמאלית, בחר את אימות לשונית.
  2. בדף הגדרות אימות, בחר את ספקים אפשרות, ולבסוף, בחר את ספק Google מרשימת הספקים. שים לב שספק הדוא"ל כבר מוגדר כברירת מחדל. אתה לא צריך לעשות שום הגדרות.
  3. אפשר את ספק לחצן החלפת מצב.
  4. ספק Google דורש שני כניסות: מזהה לקוח ו-ClientSecret. תקבל את שני הערכים האלה לאחר יצירת אפליקציה ב-Google Developer Console. לעת עתה, העתק את כתובת אתר להפניה מחדש. אתה תשתמש בו כדי להגדיר אפליקציה ב-Google Developer Console כדי לקבל את ה-ClientID ואת ClientSecret.

הגדר את הפרויקט שלך ב-Google Developer Console (GDC)

כדי לבצע אימות עם Google, תצטרך לרשום את האפליקציה שלך ב-Google Developer Console (GDC) ולקבל מזהה לקוח ו-ClientSecret. בצע את השלבים הבאים כדי להגדיר פרויקט ב-GDC:

  1. לך ל מסוף המפתחים של גוגל והיכנס עם חשבון Google שלך ​​כדי לגשת למסוף.
  2. לאחר הכניסה, נווט אל ממשקי API ושירותים הכרטיסייה, בחר את צור אישורים אפשרות ולאחר מכן בחר מזהה לקוח OAuth.
  3. ציין את סוג היישום מתוך האפשרויות המסופקות ולאחר מכן מלא את שם היישום שלך.
  4. לאחר מכן, ציין את כתובת האתר של מסלול הבית של האפליקציה שלך (http//:localhost: 3000), ולבסוף, ציין את כתובת האתר להפניה חוזרת. הדבק את כתובת האתר להפניה מחדש שהעתקת מדף ההגדרות של ספק Google של Supabase. לחץ על להציל להשלמת התהליך.
  5. העתק את מזהה לקוח ו ClientSecret וחזור למרכז השליטה של ​​פרויקט Supabase והדבק אותם בשדות הקלט ClientID ו- ClientSecret בדף ההגדרות של ספק Google. נְקִישָׁה להציל כדי להפעיל את הספק.

הגדר את שירות האימות של Supabase ביישום React.js

צור אפליקציית React.js, ולאחר מכן פתח את תיקיית הפרויקט בעורך הקוד המועדף עליך. לאחר מכן, בספריית השורש של תיקיית הפרויקט שלך, צור קובץ ENV שיכיל את משתני הסביבה שלך: כתובת האתר של הפרויקט שלך ומפתח האנון הציבורי שלך. עבור אל דף ההגדרות של Supabase, פתח את קטע ה-API והעתק את כתובת האתר של הפרויקט ואת מפתח האנון הציבורי.

REACT_APP_SUPABASE_URL= כתובת האתר של הפרויקט
REACT_APP_SUPABASE_API_KEY = פּוּמְבֵּי מפתח אנון

1. התקן את החבילות הנדרשות

הפעל את הפקודה הזו בטרמינל שלך כדי להתקין את התלות הנדרשת:

npm להתקין @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. צור את דף הכניסה ורכיבי דף ההצלחה

צור תיקיה חדשה בספריית ‎/src של יישום React.js שלך, ושמות לה דפים. בתוך תיקיה זו, צור שני קבצים: Login.js ו- Success.js.

3. רכיב דף הכניסה

רכיב זה יציג תכונת הרשמה וכניסה, תוך שימוש בממשק המשתמש לאימות React.js שסופק על ידי Supabase. ייבאת את ממשק המשתמש של האימות כתלות (@supabase/auth-UI-react), מה שהופך אותו לפשוט יותר ליישם את פונקציונליות האימות.

בקובץ login.js, הוסף את הקוד שלהלן:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא {createClient} מ'@supabase/supabase-js';
יְבוּא {Auth, ThemeSupa} מ'@supabase/auth-ui-react';
יְבוּא {useNavigate} מ'react-router-dom';
const supabase = createClient(
תהליך.env.REACT_APP_SUPABASE_URL,
תהליך.env.REACT_APP_SUPABASE_API_KEY
); 
פוּנקצִיָההתחברות() {
const navigate = useNavigate(); 
 supabase.auth.onAuthStateChange(אסינכרון (אירוע) =>{
אם (אירוע !== "יצא") {
 לנווט('/הַצלָחָה');
 }אַחֵר{
 לנווט('/');
 }
 })
לַחֲזוֹר (
<divclassName="אפליקציה">
<כּוֹתֶרֶתclassName="כותרת אפליקציה">
 supabaseClient={supabase}
 appearance={{theme: ThemeSupa}}
 נושא ="אפל"
 ספקים={['גוגל']}
 /> 
כּוֹתֶרֶת>
div>
 );
}
יְצוּאבְּרִירַת מֶחדָל התחברות;

בוא נפרק את זה:

  • אתחל לקוח Supabase עם משתני הסביבה -- כתובת ה-URL של הפרויקט שלך ומפתח האנון הציבורי שלך בקובץ ENV.
  • הגדר מאזין אירועים לעקוב אחר שינויים במצב האימות באמצעות שיטת supabase.auth.onAuthStateChange() כלומר אם מצב האימות אינו "SIGNED_OUT" ואז המשתמש מנווט לדף '/success', אחרת, המשתמש מנווט אל ה-'/' עמוד (בית/כניסה).
  • אתה תשתמש בשיטת הניווט מה-useNavigate Hook כדי לנהל תהליך זה.
  • לבסוף, החזר div המכיל את רכיב ממשק המשתמש של React Auth מספריית Supabase עם מראה של themeSupa (מסופק על ידי Supabase), ערכת נושא כהה וספק Google מוגדרים כמאפיינים.

4. רכיב דף הצלחה

רכיב זה יציג דף הצלחה עם פרטי המשתמש לאחר שמשתמש יאומת בהצלחה וכפתור יציאה.

בקובץ Success.js, הוסף את הקוד שלהלן:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא {createClient} מ'@supabase/supabase-js';
יְבוּא {useNavigate} מ'react-router-dom';
יְבוּא {useEffect, useState} מ'לְהָגִיב';
const supabase = createClient(
תהליך.env.REACT_APP_SUPABASE_URL,
תהליך.env.REACT_APP_SUPABASE_API_KEY
); 
פוּנקצִיָההַצלָחָה() {
const [משתמש, setUser] = useState([]); 
const navigate = useNavigate(); 
 useEffect (() => {
אסינכרוןפוּנקצִיָהgetUserData(){
לְהַמתִין supabase.auth.getUser().then((ערך) => {
אם(ערך.נתונים?.מִשׁתַמֵשׁ) {
setUser(ערך.נתונים.מִשׁתַמֵשׁ)} 
 }) }
 getUserData();
 },[]);
const avatar = user?.user_metadata?.avatar_url; 
const userName = user?.user_metadata?.full_Name; 
אסינכרוןפוּנקצִיָהsignOutUser(){
לְהַמתִיןsupabase.auth.התנתק();
 לנווט('/');
 };
לַחֲזוֹר (
<divclassName="אפליקציה">
<כּוֹתֶרֶתclassName="כותרת אפליקציה">
<h1>התחברת בהצלחהh1>
<h2>{שם משתמש}h2>
<imgsrc={גִלגוּל} />
<לַחְצָןבלחיצה={()=> signOutUser()}>יציאהלַחְצָן>
כּוֹתֶרֶת>
div>
 );
}
יְצוּאבְּרִירַת מֶחדָל הַצלָחָה;

בוא נפרק את זה:

  • אתחל לקוח Supabase עם משתני הסביבה -- כתובת ה-URL של הפרויקט שלך ומפתח האנון הציבורי שלך בקובץ ENV.
  • להשתמש ווים של React.js, useState ו-useEffect, כדי לקבל נתונים מתגובת ה-API.
  • ה-useEffect hook מיישם פונקציה אסינכרונית הקוראת לשיטת supabase.auth.getUser. שיטה זו מאחזרת את פרטי המשתמש המשויכים להפעלה של המשתמש הנוכחי.
  • לאחר מכן הפונקציה האסינכרונית בודקת אם נתוני המשתמש קיימים ומגדירה אותם למשתנה המצב אם כן.
  • הפונקציה signOutUser משתמשת בשיטת supabase.auth.signOut כדי לצאת מהמשתמש ולנווט אותו בחזרה לדף הכניסה כאשר הוא לוחץ על כפתור היציאה.
  • לבסוף, החזר div עם חלק ממידע המשתמש.

5. הגדר את נתיבי הדף

לבסוף, הגדר את המסלולים הן לדפי הכניסה והן לדפי ההצלחה.

בקובץ app.js, הוסף את הקוד למטה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { BrowserRouter כפי ש נתב, מסלולים, מסלול } מ'react-router-dom';
יְבוּא התחברות מ'./pages/Login';
יְבוּא הַצלָחָה מ'./pages/Success';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<נתב>
//הגדר את המסלולים
"/" element={} />
"/הַצלָחָה" element={} />
מסלולים>
נתב>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בוא נפרק את זה:

  • הגדירו את שני המסלולים: מסלול לדף הכניסה ומסלול לדף ההצלחה באמצעות רכיבי ה-Router מספריית ה-react-router.
  • הגדר את נתיבי המסלול ל-'/' ו-'/success' בהתאמה, והקצה את רכיבי הכניסה ו-Success למסלולים שלהם.
  • לבסוף, הפעל את הפקודה הזו בטרמינל שלך כדי לסובב את שרת הפיתוח: 
 npm הַתחָלָה
  • נווט אל http//:localhost: 3000 בדפדפן שלך כדי לראות את התוצאה. רכיב הכניסה מעבד את ה-React-auth-UI של Supabase גם עם הדוא"ל וגם עם ספקי גוגל.

אתה יכול לבצע אימות באמצעות Google או להירשם באמצעות הדוא"ל והסיסמה שלך ולהשתמש באישורים אלה כדי להיכנס. היתרון בשימוש בספקי הכניסה החברתיים של Supabase או בספק הדוא"ל הוא שאינך צריך לדאוג לגבי היגיון ההרשמה.

ברגע שמשתמש נרשם עם ספק חברתי או עם דוא"ל וסיסמה, הנתונים יאוחסנו במסד הנתונים של משתמשי Auth של Supabase עבור הפרויקט שלך. כאשר הם נכנסים באמצעות האישורים שלהם, Supabase תאמת את הפרטים מול האישורים ששימשו לרישום.

Supabase הופך את האימות ב-React לקל

Supabase מציעה חבילה מקיפה של תכונות מעבר לאימות, כגון אירוח מסדי נתונים, גישה ל-API והזרמת נתונים בזמן אמת. הוא גם מציע תכונות כמו בונה שאילתות והדמיית נתונים כדי לעזור למפתחים לבנות ולנהל את היישומים שלהם בצורה יעילה יותר.

עם לוח המחוונים האינטואיטיבי וה-API החזק שלו, Supabase הוא כלי רב עוצמה לבניית יישומים ניתנים להרחבה ומאובטחים.