برون سپاری احراز هویت شما نه تنها ساده تر و سریع تر است، بلکه ایمن تر نیز هست. بگذارید یک سرویس قابل اعتماد فشار را تحمل کند.
Auth0 فرآیند ایجاد هویت کاربر را در برنامه وب شما ساده می کند. این ویژگی های احراز هویت و مجوز ایمن و قابل تنظیم را از طریق API خود فراهم می کند. از آن استفاده کنید و دیگر نیازی به نگرانی در مورد ساختن سیستم احراز هویت خود از ابتدا نخواهید داشت.
ادغام با Auth0 باعث می شود تا احراز هویت قابل اعتماد را در برنامه React خود قرار دهید و دسترسی ایمن به برنامه شما را تضمین می کند.
مراحل زیر توضیح می دهد که برای ادغام Auth0 در یک برنامه React چه چیزی لازم است.
Auth0 چیست؟
Auth0 یک سرویس وب است که یک API امن برای مدیریت احراز هویت و مجوز کاربر در برنامه های شما ارائه می دهد.
این یک سیستم احراز هویت قابل تنظیم را ارائه می دهد که می توانید به راحتی آن را در برنامه React خود ادغام کنید. هنگامی که Auth0 را به برنامه خود وصل می کنید، بقیه حجم کار احراز هویت را کنترل می کند.
Auth0 چگونه کار می کند؟
Auth0 یک ویژگی ورود جهانی را فراهم می کند که جریان احراز هویت را پیاده سازی می کند. هر بار که کاربری می‌خواهد وارد شود، API او را به یک صفحه ورود به سیستم Auth0 هدایت می‌کند، آنها احراز هویت می‌شوند و داده‌های بارگذاری موفق احراز هویت به برنامه شما ارسال می‌شود.
شما می توانید با تعریف روش های مختلف ورود به سیستم، گردش کار احراز هویت را برای برنامه خود سفارشی کنید. ورود جهانی یک نام کاربری و رمز عبور را به عنوان احراز هویت اولیه ارائه می‌کند، اما می‌توانید گزینه‌های دیگری مانند ورود به سیستم اجتماعی، از طریق ارائه‌دهنده‌ای مانند Google، و احراز هویت چند عاملی را نیز اضافه کنید.
مزیت استفاده از این نوع احراز هویت این است که شما نیازی به آشنایی با پروتکل‌های هویتی مانند OAuth 2.0 یا OpenID Connect ندارید که معمولاً برای ایجاد سیستم‌های احراز هویت امن استفاده می‌شوند.
یک پروژه جدید در Auth0 Developer Console ایجاد کنید
برای شروع، ابتدا باید برای یک حساب Auth0 ثبت نام کنید. پس از ثبت نام، به داشبورد خود بروید و روی Create Application کلیک کنید تا تنظیمات پروژه احراز هویت را پیکربندی کنید.
Auth0 بسته به نوع برنامه‌ای که می‌سازید، پیکربندی‌های احراز هویت مختلفی را ارائه می‌کند. برای این آموزش، نام برنامه خود را پر کنید، Single Page Web Applications را انتخاب کنید، سپس بر روی Save کلیک کنید.
بعد، React را از لیست فناوری های پشتیبانی شده توسط Auth0 انتخاب کنید.
URI های برنامه را پیکربندی کنید
پس از ایجاد برنامه خود و پیکربندی تنظیمات مورد نیاز، در داشبورد برنامه خود، روی تب Settings کلیک کنید تا ویژگی های URI مورد نیاز را تنظیم کنید.
ویژگی های زیر را تنظیم کنید:
- نشانی‌های اینترنتی پاسخ به تماس مجاز. URL که سرور Auth0 پس از احراز هویت کاربر فراخوانی می کند.
- URL های خروج مجاز URL که Auth0 کاربر را هنگام خروج از سیستم به آن هدایت می کند.
- مبداهای مجاز وب URL مجاز که درخواست مجوز می تواند از آن باشد.
برای توسعه محلی، می توانید از http://localhost:3000 URL استفاده کنید. با این حال، هنگامی که کد خود را برای تولید فشار دادید، باید URL های دامنه خود را ارائه دهید.
پس از تکمیل URL ها، ادامه دهید و روی Save Changes در پایین صفحه تنظیمات کلیک کنید.
ارائه دهندگان ورود اجتماعی ترجیحی خود را تنظیم کنید
در صفحه منوی سمت چپ داشبورد برنامه Auth0، روی Authentication کلیک کنید، سپس Socials را انتخاب کنید. سپس روی دکمه Create Connection در صفحه تنظیمات اتصالات اجتماعی کلیک کنید.
در نهایت، ارائه دهنده ورود اجتماعی مورد نظر خود را انتخاب و اضافه کنید.
Auth0 را در برنامه React خود پیکربندی کنید
با ساخت اجزای ورود و موفقیت، سرویس احراز هویت Auth0 را در برنامه React خود ادغام کنید.
1. یک React Application بسازید و یک فایل ENV راه اندازی کنید
یک برنامه React ایجاد کنید، سپس پوشه پروژه را در ویرایشگر کد خود باز کنید. در مرحله بعد، در دایرکتوری ریشه پوشه پروژه خود، یک فایل ENV ایجاد کنید تا متغیرهای محیطی خود را نگه دارید: نام دامنه و شناسه مشتری. به حساب Auth0 خود وارد شوید، در داشبورد برنامه، نام دامنه و شناسه مشتری را کپی کنید و آنها را به صورت زیر در فایل ENV خود ذخیره کنید:
REACT_APP_AUTH0_DOMAIN= your domain name
REACT_APP_AUTH0_CLIENT_ID= your client ID
2. بسته های مورد نیاز را نصب کنید
این دستور را در ترمینال خود اجرا کنید تا وابستگی های مورد نیاز را نصب کنید:
npm install @auth0/auth0-react
3. جزء برنامه خود را با ارائه دهنده Auth0 بپیچید
ارائه دهنده Auth0 از React Context استفاده می کند. این به شما امکان می دهد از داخل مولفه App به تمام ویژگی های آن دسترسی داشته باشید. Auth0 Provider سه پارامتر دارد: دامنه مشتری، شناسه مشتری و URI تغییر مسیر.
فایل index.js را باز کنید، کد React قالب را حذف کنید و کد زیر را اضافه کنید:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import{Auth0Provider} from '@auth0/auth0-react';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Auth0Provider
domain = {process.env.REACT_APP_AUTH0_DOMAIN}
clientId = {process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri = {window.location.origin}
>
<App />
</Auth0Provider>, document.getElementById('root')
);
4. یک مؤلفه صفحه ورود ایجاد کنید
یک پوشه جدید در پوشه /src برنامه React خود ایجاد کنید و نام آن را صفحات بگذارید. در داخل این پوشه، دو فایل Login.js و Success.js ایجاد کنید.
فایل login.js را باز کنید و کد زیر را اضافه کنید. جزء صفحه ورود یک دکمه ورود را ارائه می دهد.
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react';
const Login = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
return (isAuthenticated || (
<button onClick={() => loginWithRedirect()}> Log In</button>
))
}
export default Login
به طور پیش فرض، Auth0 یک ایمیل و رمز عبور را به عنوان روش احراز هویت ارائه می دهد. علاوه بر این، بسته به ارائه دهندگان ورود به سیستم اجتماعی که انتخاب کرده اید، Auth0 گزینه ورود به سیستم ارائه دهنده را نیز نمایش می دهد.
5. یک مؤلفه صفحه موفقیت ایجاد کنید
این مؤلفه دو ویژگی اصلی را ارائه می دهد: نمایه کاربر تأیید شده و یک دکمه خروج.
در فایل Success.js کد زیر را اضافه کنید:
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react'
const Success = () => {
const { user, logout, isAuthenticated } = useAuth0();
return ( isAuthenticated && (
<div>
<h1>User Profile</h1>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
<button onClick={() => logout()}> Log Out</button>
</div>
))
}
export default Success
پس از ورود به سیستم و احراز هویت توسط Auth0، Auth0 شما را به برنامه خود هدایت می کند و داده های محموله حاوی اطلاعات کاربر را به برنامه شما ارسال می کند. می توانید از این داده ها در برنامه خود برای ایجاد نمایه های کاربر سفارشی و مدیریت جلسات کاربر استفاده کنید. ویژگی User از قلاب UseAuth به شما امکان دسترسی به داده های کاربر خاص را می دهد.
قلاب UseAuth0 همچنین خاصیتی به نام isAuthenticated را ارائه می‌کند که به شما امکان می‌دهد کامپوننت‌ها را به صورت شرطی رندر کنید. اگر یک کاربر احراز هویت شود، کد جزئیات نمایه او را نمایش می دهد و یک جزء دکمه خروج را نمایش می دهد.
برعکس، اگر آنها نباشند، مولفه دکمه ورود را رندر خواهید کرد. این بدان معنی است که شما نیازی به تعیین مسیرها بر اساس وضعیت احراز هویت کاربر ندارید زیرا این ویژگی به طور خودکار این فرآیند را مدیریت می کند. Auth0 هم منطق ورود و هم منطق خروج را تعریف می کند و اجرای عملکرد احراز هویت را برای شما آسان تر می کند.
آیا سرویس احراز هویت Auth0 ارزش امتحان کردن را دارد؟
Auth0 راه حل های خارج از جعبه را ارائه می دهد که نیازهای احراز هویت برنامه شما را برطرف می کند. علاوه بر این، سرویس Auth0 از پلتفرم‌های توسعه وب، تلفن همراه و بومی پشتیبانی می‌کند و به شما این امکان را می‌دهد تا به راحتی سیستم احراز هویت را با پشته فناوری دلخواه خود ادغام کنید.