مخلوط نرم‌افزار React با Auth0
اکنون که یک اپ Auth0 ساخت و ساز کرده‌اید، طراحی اپلیکیشن در مشهد فراهم‌اید رایا پارس تا نرم‌افزار React خویش application را با Auth0 مخلوط فرمایید.
در او‌لین مرحله، می بایست پکیج auth0.js NPM را نصب نمائید. می توانید این شغل را با نوشتن فرمان تحت در فایل روت پروژه خویش اجرا دهید:
npm install --save auth0-js
یوزرها شما از روش کاغذ ورود هاست Auth0 احراز نام و نشان میگردند. این طریق معمولی‌ترین و امن‌ترین خط مش برای امنیت اپلیکیشن شماست. به صورت خلاصه، این خدمت یوزرها را به شیت ورود هاست به وسیله Auth0 هدایت می‌نماید که در آن روند احراز نام‌و‌نشان واقعه می افتد. بعداز آن، یوزرها با به کار گیری از توکن‌هایی که میتوانند برای کسب داده ها حساس از ASP.NET Core 2.0 API شما استعمال نمایند، مجدد به نرم‌افزار شما هدایت می گردند.
پس از نصب پکیج auth0-js، می بایست فایلی به اسم Auth0Config.js در فایل src نرم افزار React خویش ساخت نمایید. محتوای تحت را به‌این پوشه اضافه فرمایید:
export const AUTH_CONFIG = {
domain: \'YOUR_AUTH0_DOMAIN\',
clientID: \'YOUR_CLIENT_ID\',
redirectUri: \'http://localhost:3000\',
audience: \'https://onlinebookstore.mycompany.com\'
};
به عبارتی‌طور که میبینید، شما شیء‌ای را که مشمول خاصیت تنظیمات نرم افزار Auth0 در‌این فولدر میباشد را تعریف و تمجید کرده‌اید. اعتنا داشته باشید که می بایست YOUR_AUTH0_DOMAIN و YOUR_CLIENT_ID را با مقادیر مرتبط با نرم افزار Auth0 خویش جایگزین نمائید. بدین ترتیب به کاغذ اپلیکیشن‌ها در رئیس داشبورد Auth0 رجوع نمایید، نرم افزار‌ای که در نصیب گذشته ساخت کرده‌اید را گزینش نمایید، تب Settings را تعیین نمایید، و از مقادیر Client ID و Domain برای جایگزینی این متغیرها به کار گیری فرمائید.
این پوشه همینطور دربرگیرنده دو خصوصیت دیگر نیز میباشد:
1. redirectUri: این خصوصیت دربردارنده URLای میباشد که یوزرها شمارا بعداز مراحل احراز نام و نشان به آن هدایت می‌نماید. اکنون، شما ورقه مهم نرم‌افزار React خویش را تهیه کرده‌اید. با این درحال حاضر، به زودی آن را تغییر و تحول خواهید بخشید.
2. audience: این خصوصیت مشتمل بر انتخاب‌کننده (identifier) اختصاصی Auth0 API میباشد که در اولیه این نوشته‌ی‌علمی ساخت و ساز کردید.
تولید خدمت احراز نام‌و‌نشان
حال بایستی ماژول جاوااسکریپت دیگری ساخت نمایید. این ماژول را در یک فولدر تازه به اسم AuthService.js در فایل src با کد تحت تعریف‌و‌تمجید خواهید کرد:
import auth0 from \'auth0-js\';
import { AUTH_CONFIG } from \'./Auth0Config\';
export default class AuthService {
auth0 = new auth0.WebAuth({
domain: AUTH_CONFIG.domain,
clientID: AUTH_CONFIG.clientID,
redirectUri: AUTH_CONFIG.redirectUri,
audience: AUTH_CONFIG.audience,
responseType: \'token id_token\',
scope: \'openid\'
});
login() {
this.auth0.authorize();
}
}