Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Auth0 опростява процеса на установяване на потребителска идентичност във вашето уеб приложение. Той предоставя сигурни и адаптивни функции за удостоверяване и оторизация чрез своя API. Използвайте го и няма да се притеснявате за изграждането на собствена система за удостоверяване от нулата.

Интегрирането с Auth0 улеснява включването на надеждно удостоверяване във вашето приложение React и гарантира сигурен достъп до вашето приложение.

Следващите стъпки обясняват какво е необходимо за интегриране на Auth0 в приложение на React.

Какво е Auth0?

Auth0 е уеб услуга, която предоставя защитен API за обработка удостоверяване и оторизация на потребителя във вашите приложения.

Той предоставя адаптивна система за удостоверяване, която можете лесно да интегрирате във вашето приложение React. След като свържете Auth0 към вашето приложение, то се справя с останалата част от работното натоварване за удостоверяване.

instagram viewer

Как работи Auth0?

Auth0 предоставя функция за универсално влизане, която реализира потока на удостоверяване. Всеки път, когато потребител иска да влезе, API го пренасочва към страница за вход Auth0, той се удостоверява и данните за успешното удостоверяване след това се изпращат към вашето приложение.

Можете да персонализирате работния поток за удостоверяване за вашето приложение, като дефинирате различни методи за влизане. Универсалното влизане предоставя потребителско име и парола като основно удостоверяване, но вие можете добавете и други опции като социално влизане чрез доставчик като Google и многофакторно удостоверяване.

Предимството на използването на този тип удостоверяване е, че не е необходимо да сте запознати със самоличността протоколи като OAuth 2.0 или OpenID Connect, които обикновено се използват за създаване на защитено удостоверяване системи.

Създайте нов проект в Auth0 Developer Console

За да започнете, ще трябва първо да се регистрирате за Auth0 сметка. След като се регистрирате, отворете таблото си за управление и щракнете Създаване на приложение за конфигуриране на настройките на проекта за удостоверяване.

Auth0 предоставя различни конфигурации за удостоверяване в зависимост от типа приложение, което създавате. За този урок попълнете името на вашето приложение, изберете Уеб приложения с една страница, след което щракнете върху Запазване.

След това изберете Реагирайте от списъка с технологии, поддържани от Auth0.

Конфигурирайте URI адресите на приложението

След като създадете приложението си и конфигурирате необходимите настройки, на таблото за управление на приложението щракнете върху Настройки раздела, за да настроите необходимите URI свойства.

Задайте следните свойства:

  • Позволени URL адреси за обратно извикване. URL адресът, който сървърът Auth0 ще извика, след като потребителят се удостовери.
  • Позволени URL адреси за излизане. URL адресът, към който Auth0 ще пренасочи потребителя, когато излезе.
  • Разрешен уеб произход. Разрешеният URL адрес, от който може да дойде заявка за оторизация.

За местно развитие можете да използвате http://localhost: 3000 URL. Въпреки това, след като изпратите кода си до производство, ще трябва да предоставите URL адресите на вашия домейн.

След като приключите с попълването на URL адресите, продължете и щракнете Запазите промените в долната част на страницата с настройки.

Задайте предпочитаните от вас доставчици за социално влизане

В левия панел на менюто на таблото за управление на приложението 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/клиент';
импортиране Приложение от„./Приложение“;
импортиране{Auth0Provider} от„@auth0/auth0-react“;
конст корен = ReactDOM.createRoot(документ.getElementById("корен"));
root.render(
 домейн = {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“;
конст Вход = () => {
конст {loginWithRedirect, isAuthenticated} = useAuth0();


връщане (isAuthenticated || (
износпо подразбиране Влизам

По подразбиране Auth0 предоставя имейл и парола като метод за удостоверяване. Освен това, в зависимост от доставчиците на социално влизане, които сте избрали, Auth0 ще покаже и опцията за влизане на доставчика.

5. Създайте компонент на успешна страница

Този компонент ще изобрази две основни функции: удостоверен потребителски профил и бутон за излизане.

Във файла Success.js добавете кода по-долу:

импортиране Реагирайте от"реагира"
импортиране {useAuth0} от„@auth0/auth0-react“
конст Успех = () => {
конст {потребител, изход, isAuthenticated} = useAuth0(); 


връщане ( isAuthenticated && ( 




Потребителски профил</h1> 
{user.name}
{потребителско.име}</h2> 





{user.email}</p> 


износпо подразбиране Успех

След като влезете и се удостоверите от Auth0, Auth0 ви пренасочва обратно към вашето приложение и изпраща данни за полезен товар към вашето приложение, съдържащи потребителските данни. Можете да използвате тези данни в приложението си, за да създадете персонализирани потребителски профили и да управлявате потребителски сесии. Свойството User от куката UseAuth ви позволява да получите достъп до конкретни потребителски данни.

Куката UseAuth0 също предоставя свойство, наречено isAuthenticated, което ви позволява да визуализирате компонентите условно. Ако потребителят е удостоверен, кодът ще визуализира подробностите за неговия профил и ще покаже компонент на бутон за излизане.

Обратно, ако не са, ще изобразите компонента на бутона за влизане. Това означава, че не е необходимо да указвате маршрутите въз основа на състоянието на удостоверяване на потребителя, тъй като това свойство автоматично управлява този процес. Auth0 дефинира логиката както за влизане, така и за излизане, което ви улеснява при внедряването на функционалността за удостоверяване.

Струва ли си да опитате услугата за удостоверяване Auth0?

Auth0 предоставя готови решения, които се справят с изискванията за удостоверяване на вашето приложение. Освен това услугата Auth0 предлага поддръжка за уеб, мобилни и собствени платформи за разработка, което ви позволява лесно да интегрирате системата за удостоверяване с технологичен стек по ваше предпочитание.