Authentication در react

چند وقت پیش یکی از کاربران در مورد این موضوع پرسیده بود : میخواستم ببینم برای authentication در ریکت چیکار کنم و چه راهی رو شما پیشنهاد میدید؟

خب از اونجا که ما خیلی به نظرات و پرسش ها اهمیت میدیم سعی کردیم در این مورد یک مقاله آماده کنیم و در اختیار کاربران عزیزمون قرار بدیم.

Authentication به دو صورت می تواند پیاده سازی شود :یک نوع به صورتی که کاربر با استفاده از یک username و یک password وارد پنل کاربری خود شود و بتواند به بخش های مختلف برنامه دسترسی داشته باشد و روش دیگر به صورتی که با استفاده از google و یا facebook و … شناسایی کاربر انجام شود و دسترسی به برنامه برایش فراهم شود .

اگر شما سایت یا برنامه ای دارید که منابع آن به صورت عمومی در اختیار تمام کاربران قرار گرفته و منابعی ندارید که به صورت پریمیوم در اختیار کاربر قرار می گیرد نیازی نیست که از Authentication استفاده کنید. سناریوی دیگر برای این زمانی است که برای مدیریت برنامه همانند وردپرس ، نیاز دارید تا ناحیه مدیریت برای کاربر اصلی و یا کاربران دیگر ایجاد شود تا بتوانند محتوا را مدیریت کنند.

برای احراز هویت(Authentication) باید به هر کاربر یک token اختصاص داده شود تا برنامه بتواند کاربر را شناسایی کند و سطح دسترسی به آن اختصاص دهد و یا به او این اجازه را بدهد تا در ورود های بعدی دیگر اهراز هویت را انجام ندهد .

در این مقاله ما از Auth0 برای سهولت کار استفاده می کنیم . سرویسی که موجب میشه خیلی ساده بتونیم با استفاده از API و SDK یک سیستم احراز هویت برای هر نوع پلتفرم ، بسازیم .

برای استفاده از این ابزار باید وارد سایت Auth0 بشید و بعد از ثبت نام و ایجاد یک سرویس برای احراز هویت ، چیزی که برای برنامه خودمان نیاز داریم در اختیارمان قرار می گیرد : یک domain و یک client id

بعد از ثبت نام در سایت ، وارد داشبورد می شوید:

بعد با کلیک روی NEW APPLICATION وارد محیطی می شوید که می تونید با توجه به سیستم برنامتون یکی از گزینه ها رو انتخاب کنید :

با وارد کردن نام برنامه و انتخاب یکی از گزینه ها و فشردن دکمه CREATE شما به محیطی وارد می شوید که یک راهنمایی خیلی خوب بر اساس تکنولوژی که شما در برنامه دارید، در اختیار شما قرار می گیرد و در تب settings به مواردی که در برنامه نیاز دارید دسترسی خواهید داشت:

و همچنین برای بازگشت به برنامه بعد از احراز هویت  به یک call back url نیاز داریم ، مثلا برای برنامه ی لوکال  http://localhost:3000/callback :

و بعد از اتمام این کار و ذخیره تغییرات نیاز داریم در برنامه خودمان این تکنولوژی را وارد کنیم . برای این وارد مسیر پروژمون میشیم و کد زیر را وارد می کنیم :

سعی می کنیم در آینده مقاله کامل تری در این مورد منتشر کنیم .برای در یافت راهنمایی بیشتر پیشنهاد می کنم به این مقاله مراجعه کنید و اگر تجربه ای در این زمینه دارید در بخش کامنت ها با ما به اشتراک بگذارید.