Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Auth0 upraszcza proces ustalania tożsamości użytkownika w aplikacji internetowej. Zapewnia bezpieczne i konfigurowalne funkcje uwierzytelniania i autoryzacji za pośrednictwem interfejsu API. Użyj go, a nie będziesz musiał martwić się budowaniem od podstaw własnego systemu uwierzytelniania.

Integracja z Auth0 ułatwia włączenie niezawodnego uwierzytelniania do aplikacji React i gwarantuje bezpieczny dostęp do aplikacji.

Poniższe kroki wyjaśniają, co jest konieczne do zintegrowania Auth0 z aplikacją React.

Co to jest Auth0?

Auth0 to usługa internetowa, która zapewnia bezpieczny interfejs API do obsługi uwierzytelnianie i autoryzacja użytkownika w Twoich aplikacjach.

Zapewnia konfigurowalny system uwierzytelniania, który można łatwo zintegrować z aplikacją React. Po połączeniu Auth0 z aplikacją obsługuje ona resztę obciążenia związanego z uwierzytelnianiem.

instagram viewer

Jak działa Auth0?

Auth0 udostępnia funkcję logowania uniwersalnego, która implementuje przepływ uwierzytelniania. Za każdym razem, gdy użytkownik chce się zalogować, interfejs API przekierowuje go na stronę logowania Auth0, zostaje uwierzytelniony, a następnie dane pomyślnego uwierzytelnienia są wysyłane do Twojej aplikacji.

Możesz dostosować przepływ pracy uwierzytelniania dla swojej aplikacji, definiując różne metody logowania. Logowanie uniwersalne zapewnia nazwę użytkownika i hasło jako podstawowe uwierzytelnienie, ale można to zrobić dodaj także inne opcje, takie jak logowanie społecznościowe, za pośrednictwem dostawcy takiego jak Google i wieloczynnikowe uwierzytelnianie.

Zaletą korzystania z tego typu uwierzytelniania jest to, że nie trzeba znać tożsamości protokoły takie jak OAuth 2.0 lub OpenID Connect, które są powszechnie używane do tworzenia bezpiecznego uwierzytelniania systemy.

Utwórz nowy projekt w konsoli programisty Auth0

Aby rozpocząć, musisz najpierw zarejestrować się w Autoryzacja0 konto. Po rejestracji przejdź do pulpitu nawigacyjnego i kliknij Utwórz aplikację aby skonfigurować ustawienia projektu uwierzytelniania.

Auth0 zapewnia różne konfiguracje uwierzytelniania w zależności od typu tworzonej aplikacji. W tym samouczku wpisz nazwę aplikacji, wybierz Jednostronicowe aplikacje internetowe, a następnie kliknij Ratować.

Następnie wybierz Reagować z listy technologii obsługiwanych przez Auth0.

Skonfiguruj identyfikatory URI aplikacji

Po utworzeniu aplikacji i skonfigurowaniu wymaganych ustawień, na pulpicie nawigacyjnym aplikacji kliknij przycisk Ustawienia kartę, aby skonfigurować wymagane właściwości identyfikatora URI.

Ustaw następujące właściwości:

  • Dozwolone adresy URL wywołania zwrotnego. Adres URL, który serwer Auth0 wywoła po uwierzytelnieniu użytkownika.
  • Dozwolone adresy URL wylogowania. Adres URL, do którego Auth0 przekieruje użytkownika po wylogowaniu.
  • Dozwolone źródła internetowe. Dozwolony adres URL, z którego może pochodzić żądanie autoryzacji.

Do rozwoju lokalnego możesz użyć http://localhost: 3000 adresów URL. Jednak po przekazaniu kodu do produkcji będziesz musiał podać adresy URL swojej domeny.

Gdy skończysz wypełniać adresy URL, śmiało kliknij Zapisz zmiany na dole strony ustawień.

Ustaw preferowanych dostawców logowania społecznościowego

W lewym okienku menu pulpitu nawigacyjnego aplikacji Auth0 kliknij Uwierzytelnianie, a następnie wybierz Społeczności. Następnie kliknij na Utwórz połączenie na stronie ustawień połączeń społecznościowych.

Na koniec wybierz i dodaj preferowanego dostawcę logowania społecznościowego.

Skonfiguruj Auth0 w swojej aplikacji React

Zintegruj usługę uwierzytelniania Auth0 ze swoją aplikacją React, budując komponenty logowania i sukcesu.

1. Utwórz aplikację React i skonfiguruj plik ENV

Utwórz aplikację React, a następnie otwórz folder projektu w edytorze kodu. Następnie w katalogu głównym folderu projektu utwórz plik ENV do przechowywania zmiennych środowiskowych: nazwy domeny i identyfikatora klienta. Zaloguj się na swoje konto Auth0, w panelu aplikacji skopiuj nazwę domeny i identyfikator klienta i zapisz je w pliku ENV w następujący sposób:

REACT_APP_AUTH0_DOMAIN= Twoja nazwa domeny 
REACT_APP_AUTH0_CLIENT_ID= Twój identyfikator klienta

2. Zainstaluj wymagane pakiety

Uruchom to polecenie na swoim terminalu, aby zainstalować wymagane zależności:

npm zainstaluj @auth0/auth0-react

3. Opakuj swój komponent aplikacji w dostawcę Auth0

Dostawca Auth0 używa kontekstu reagowania. Umożliwia to dostęp do wszystkich jego właściwości z poziomu komponentu aplikacji. Dostawca Auth0 przyjmuje trzy parametry: domenę klienta, identyfikator klienta i identyfikator URI przekierowania.

Otwórz plik index.js, usuń kod szablonu React i dodaj poniższy kod:

import Reagować z'reagować';
import ReactDOM z„reaguj/klient”;
import Aplikacja z„./Aplikacja”;
import{Auth0Provider} z'@auth0/auth0-reaguj';
konst root = ReactDOM.createRoot(dokument.getElementById('źródło'));
root.render(
 domena = {proces.env. REACT_APP_AUTH0_DOMAIN}
 ClientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 przekierowanie Uri = {okno.lokalizacja.pochodzenie}
 >

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

4. Utwórz komponent strony logowania

Utwórz nowy folder w katalogu /src aplikacji React i nazwij go strony. W tym folderze utwórz dwa pliki: Login.js i Success.js.

Otwórz plik login.js i dodaj poniższy kod. Komponent strony logowania wyrenderuje przycisk logowania.

import Reagować z'reagować'
import { useAuth0 } z'@auth0/auth0-reaguj';
konst zaloguj się = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();


powrót (jestuwierzytelniony || (
eksportdomyślny Zaloguj sie

Domyślnie Auth0 zapewnia adres e-mail i hasło jako metodę uwierzytelniania. Dodatkowo, w zależności od wybranych dostawców logowania społecznościowego, Auth0 wyświetli również opcję logowania dostawcy.

5. Utwórz komponent strony sukcesu

Ten komponent będzie renderował dwie główne funkcje: profil uwierzytelnionego użytkownika i przycisk wylogowania.

W pliku Success.js dodaj poniższy kod:

import Reagować z'reagować'
import { useAuth0 } z'@auth0/auth0-reaguj'
konst Sukces = () => {
konst { użytkownik, wyloguj się, jest uwierzytelniony } = useAuth0(); 


powrót ( jest uwierzytelniony && ( 




Profil użytkownika</h1> 
{nazwa użytkownika}
{user.name}</h2> 





{user.email}</p> 


eksportdomyślny Powodzenie

Po zalogowaniu się i uwierzytelnieniu przez Auth0, Auth0 przekieruje Cię z powrotem do Twojej aplikacji i wyśle ​​do Twojej aplikacji dane ładunku zawierające dane użytkownika. Możesz użyć tych danych w swojej aplikacji do tworzenia niestandardowych profili użytkowników i zarządzania sesjami użytkowników. Właściwość User z haka UseAuth umożliwia dostęp do określonych danych użytkownika.

Hak UseAuth0 zapewnia również właściwość o nazwie isAuthenticated, która umożliwia warunkowe renderowanie komponentów. Jeśli użytkownik zostanie uwierzytelniony, kod wyrenderuje szczegóły jego profilu i wyświetli komponent przycisku wylogowania.

I odwrotnie, jeśli tak nie jest, wyrenderujesz komponent przycisku logowania. Oznacza to, że nie trzeba określać tras na podstawie stanu uwierzytelnienia użytkownika, ponieważ ta właściwość automatycznie zarządza tym procesem. Auth0 definiuje zarówno logikę logowania, jak i wylogowania, ułatwiając wdrożenie funkcji uwierzytelniania.

Czy warto wypróbować usługę uwierzytelniania Auth0?

Auth0 zapewnia gotowe rozwiązania, które obsługują wymagania dotyczące uwierzytelniania Twojej aplikacji. Ponadto usługa Auth0 oferuje wsparcie dla internetowych, mobilnych i natywnych platform programistycznych, umożliwiając łatwą integrację systemu uwierzytelniania z preferowanym stosem technologii.