Jak zintegrować usługę uwierzytelniania Auth0 z aplikacją React

2023/01/31

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 niezbędne do zintegrowania Auth0 z aplikacją React.

Co to jest Auth0?

Auth0 to usługa internetowa, która zapewnia bezpieczny interfejs API do obsługi uwierzytelniania i autoryzacji użytkowników 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.

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 uwierzytelnianie, ale można również dodać inne opcje, takie jak logowanie społecznościowe za pośrednictwem dostawcy takiego jak Google i uwierzytelnianie wieloskładnikowe.

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

Utwórz nowy projekt w konsoli programisty Auth0

Aby rozpocząć, musisz najpierw założyć konto Auth0 . Po rejestracji przejdź do pulpitu nawigacyjnego i kliknij opcję Utwórz aplikację , aby skonfigurować ustawienia projektu uwierzytelniania.

Auth0 zapewnia różne konfiguracje uwierzytelniania w zależności od typu tworzonej aplikacji. Na potrzeby tego samouczka wpisz nazwę aplikacji, wybierz pozycję Aplikacje sieci Web na jednej stronie , a następnie kliknij przycisk Zapisz .

Auth0 Wyskakujące okno ustawień nowej aplikacji,

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

Lista technologii tworzenia stron internetowych obsługiwanych przez Auth0

Skonfiguruj identyfikatory URI aplikacji

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

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

Dozwolone adresy URL wywołań zwrotnych . 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.

Po zakończeniu wypełniania adresów URL kliknij przycisk Zapisz zmiany u dołu strony ustawień.

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

Auth0 nowa strona ustawień dostawców logowania społecznościowego.

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

Lista obsługiwanych dostawców logowania społecznościowego Auth0

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 swoim 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= your domain name REACT_APP_AUTH0_CLIENT_ID= your client ID

2. Zainstaluj wymagane pakiety

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

npm install @auth0/auth0-react

3. Połącz swój komponent aplikacji z 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 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') );

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 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

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 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

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.