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

שילוב עם Auth0 מקל על הכללת אימות אמין באפליקציית React שלך ומבטיח גישה מאובטחת לאפליקציה שלך.

השלבים הבאים מסבירים מה נחוץ כדי לשלב Auth0 ביישום React.

מה זה Auth0?

Auth0 הוא שירות אינטרנט המספק API מאובטח לטיפול אימות והרשאה של משתמשים באפליקציות שלך.

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

איך Auth0 עובד?

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

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

היתרון בשימוש בסוג זה של אימות הוא שאינך צריך להכיר את הזהות פרוטוקולים כמו OAuth 2.0 או OpenID Connect, המשמשים בדרך כלל ליצירת אימות מאובטח מערכות.

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

כדי להתחיל, תצטרך תחילה להירשם ל- Auth0 חֶשְׁבּוֹן. לאחר ההרשמה, נווט ללוח המחוונים שלך ולחץ צור אפליקציה כדי להגדיר את הגדרות פרויקט האימות.

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

לאחר מכן, בחר לְהָגִיב מרשימת הטכנולוגיות הנתמכות על ידי Auth0.

הגדר את ה-URI של האפליקציה

לאחר יצירת היישום שלך והגדרת ההגדרות הנדרשות, בלוח המחוונים של היישום שלך, לחץ על הגדרות לשונית כדי להגדיר את מאפייני ה-URI הנדרשים.

הגדר את המאפיינים הבאים:

• כתובות URL מותרות להתקשרות חוזרת. כתובת האתר ששרת Auth0 יקרא לאחר שמשתמש יאמת.
• כתובות אתרים מותרות ליציאה. כתובת האתר שאליה Auth0 תפנה את המשתמש כאשר הוא מתנתק.
• מקורות אינטרנט מותרים. כתובת האתר המותרת שממנה יכולה להגיע בקשת הרשאה.

לפיתוח מקומי, אתה יכול להשתמש http://localhost: 3000 כתובת אתר. עם זאת, ברגע שאתה דוחף את הקוד שלך לייצור, תצטרך לספק את כתובות האתרים של הדומיין שלך.

לאחר שתסיים למלא את כתובות האתרים, המשך ולחץ שמור שינויים בתחתית עמוד ההגדרות.

הגדר את ספקי ההתחברות החברתית המועדפים עליך

בחלונית התפריט השמאלית של לוח המחוונים של Auth0, לחץ על אימות, ולאחר מכן בחר חברות חברתיות. לאחר מכן, לחץ על צור חיבור לחצן בדף ההגדרות של קשרים חברתיים.

לבסוף, בחר והוסף את ספק ההתחברות החברתי המועדף עליך.

הגדר את Auth0 לתוך אפליקציית React שלך

שלב את שירות האימות Auth0 באפליקציית React שלך על ידי בניית רכיבי הכניסה וההצלחה.

1. צור אפליקציית React והגדר קובץ ENV

צור אפליקציית React, ואז פתח את תיקיית הפרויקט בעורך הקוד שלך. לאחר מכן, בספריית השורש של תיקיית הפרויקט שלך, צור קובץ ENV שיכיל את משתני הסביבה שלך: שם הדומיין ומזהה הלקוח שלך. היכנס לחשבון Auth0 שלך, בלוח המחוונים של היישום, העתק את שם הדומיין ומזהה הלקוח ושמור אותם בקובץ ה-ENV שלך באופן הבא:

REACT_APP_AUTH0_DOMAIN= שם הדומיין שלך 
REACT_APP_AUTH0_CLIENT_ID= מזהה הלקוח שלך

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

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

npm להתקין @auth0/auth0-react

3. עטוף את רכיב האפליקציה שלך עם ספק Auth0

ספק Auth0 משתמש ב-React Context. זה מאפשר לך לגשת לכל המאפיינים שלו מתוך רכיב האפליקציה. ספק Auth0 לוקח שלושה פרמטרים: דומיין הלקוח, מזהה הלקוח ו-URI ההפניה מחדש.

פתח את הקובץ index.js, מחק את קוד התבנית React והוסף את הקוד למטה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא ReactDOM מ'react-dom/client';
יְבוּא אפליקציה מ'./אפליקציה';
יְבוּא{Auth0Provider} מ'@auth0/auth0-react';
const root = ReactDOM.createRoot(מסמך.getElementById('שורש'));
root.render(
 domain = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {חַלוֹן‎.location.origin}
 >

 </Auth0Provider>, document.getElementById('root')
);

4. צור רכיב דף כניסה

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

פתח את הקובץ login.js והוסף את הקוד למטה. רכיב דף הכניסה יציג כפתור התחברות.

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא { useAuth0 } מ'@auth0/auth0-react';
const כניסה = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
לַחֲזוֹר (מאומת || (
 loginWithRedirect()}> התחבר</button>
 ))
}
יְצוּאבְּרִירַת מֶחדָל התחברות

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

5. צור רכיב דף הצלחה

רכיב זה יציג שתי תכונות עיקריות: פרופיל משתמש מאומת וכפתור יציאה.

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

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא { useAuth0 } מ'@auth0/auth0-react'
const הצלחה = () => {
const { user, logout, isAuthenticated } = useAuth0(); 
לַחֲזוֹר ( הוא מאומת && ( 



פרופיל משתמש</h1> 

{user.name}</h2> 



{user.email}</p> 
 logout()}> התנתק</button> 
 </div>
 ))
}
יְצוּאבְּרִירַת מֶחדָל הַצלָחָה

לאחר שתתחבר ותקבל אימות על ידי Auth0, Auth0 מפנה אותך בחזרה לאפליקציה שלך ושולחת נתוני מטען לאפליקציה שלך המכילים את פרטי המשתמש. אתה יכול להשתמש בנתונים האלה בתוך האפליקציה שלך כדי לבנות פרופילי משתמש מותאמים אישית ולנהל הפעלות משתמשים. מאפיין המשתמש מה-UseAuth Hook מאפשר לך לגשת לנתוני משתמש ספציפיים.

ה-UseAuth0 Hook מספק גם מאפיין בשם isAuthenticated, המאפשר לך לרנדר את הרכיבים באופן מותנה. אם משתמש מאומת, הקוד יציג את פרטי הפרופיל שלו ויציג רכיב לחצן יציאה.

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

האם כדאי לנסות את שירות האימות Auth0?

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