Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του 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 παρέχει διαφορετικές διαμορφώσεις ελέγχου ταυτότητας ανάλογα με τον τύπο της εφαρμογής που δημιουργείτε. Για αυτό το σεμινάριο, συμπληρώστε το όνομα της αίτησής σας, επιλέξτε Εφαρμογές Web μιας σελίδας, μετά κάντε κλικ στο Αποθηκεύσετε.

Στη συνέχεια, επιλέξτε Αντιδρώ από τη λίστα των τεχνολογιών που υποστηρίζονται από το 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 code και προσθέστε τον παρακάτω κώδικα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή ReactDOM από'react-dom/client';
εισαγωγή App από'./Εφαρμογή';
εισαγωγή{Auth0Provider} από'@auth0/auth0-react';
συνθ root = ReactDOM.createRoot(έγγραφο.getElementById('ρίζα'));
root.render(
 τομέας = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 ανακατεύθυνσηUri = {παράθυρο.location.origin}
 >

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

4. Δημιουργήστε ένα στοιχείο σελίδας σύνδεσης

Δημιουργήστε έναν νέο φάκελο στον κατάλογο /src της εφαρμογής React και ονομάστε τον σελίδες. Μέσα σε αυτόν τον φάκελο, δημιουργήστε δύο αρχεία: Login.js και Success.js.

Ανοίξτε το αρχείο login.js και προσθέστε τον παρακάτω κώδικα. Το στοιχείο σελίδας σύνδεσης θα αποδώσει ένα κουμπί σύνδεσης.

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή { useAuth0 } από'@auth0/auth0-react';
συνθ Είσοδος = () => {
συνθ { loginWithRedirect, isAuthenticated } = useAuth0();


ΕΠΙΣΤΡΟΦΗ (είναι πιστοποιημένο || (
εξαγωγήΠροκαθορισμένο Σύνδεση

Από προεπιλογή, το Auth0 παρέχει ένα email και έναν κωδικό πρόσβασης ως μέθοδο ελέγχου ταυτότητας. Επιπλέον, ανάλογα με τους παρόχους κοινωνικής σύνδεσης που επιλέξατε, το Auth0 θα εμφανίσει επίσης την επιλογή σύνδεσης του παρόχου.

5. Δημιουργήστε ένα στοιχείο επιτυχίας σελίδας

Αυτό το στοιχείο θα αποδώσει δύο βασικά χαρακτηριστικά: ένα πιστοποιημένο προφίλ χρήστη και ένα κουμπί αποσύνδεσης.

Στο αρχείο Success.js, προσθέστε τον παρακάτω κώδικα:

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή { useAuth0 } από'@auth0/auth0-react'
συνθ Επιτυχία = () => {
συνθ { user, logout, isAuthenticated } = useAuth0(); 


ΕΠΙΣΤΡΟΦΗ (είναι Πιστοποιημένο && ( 




Προφίλ χρήστη</h1> 
{user.name}
{user.name}</h2> 





{user.email}</p> 


εξαγωγήΠροκαθορισμένο Επιτυχία

Μόλις συνδεθείτε και λάβετε έλεγχο ταυτότητας από το Auth0, το Auth0 σας ανακατευθύνει πίσω στην εφαρμογή σας και στέλνει δεδομένα ωφέλιμου φορτίου στην εφαρμογή σας που περιέχουν τα στοιχεία χρήστη. Μπορείτε να χρησιμοποιήσετε αυτά τα δεδομένα στην εφαρμογή σας για να δημιουργήσετε προσαρμοσμένα προφίλ χρηστών και να διαχειριστείτε τις περιόδους σύνδεσης χρηστών. Η ιδιότητα User από το άγκιστρο UseAuth σάς επιτρέπει να έχετε πρόσβαση σε συγκεκριμένα δεδομένα χρήστη.

Το άγκιστρο UseAuth0 παρέχει επίσης μια ιδιότητα που ονομάζεται isAuthenticated, η οποία σας επιτρέπει να αποδώσετε τα στοιχεία υπό όρους. Εάν ένας χρήστης έχει πιστοποιηθεί, ο κωδικός θα αποδώσει τα στοιχεία του προφίλ του και θα εμφανίσει ένα στοιχείο κουμπιού αποσύνδεσης.

Αντίθετα, εάν δεν είναι, θα αποδώσετε το στοιχείο του κουμπιού σύνδεσης. Αυτό σημαίνει ότι δεν χρειάζεται να καθορίσετε τις διαδρομές με βάση την κατάσταση ελέγχου ταυτότητας ενός χρήστη, καθώς αυτή η ιδιότητα διαχειρίζεται αυτόματα αυτήν τη διαδικασία. Το Auth0 ορίζει τόσο τη λογική σύνδεσης όσο και τη λογική αποσύνδεσης, διευκολύνοντάς σας να εφαρμόσετε τη λειτουργία ελέγχου ταυτότητας.

Αξίζει να δοκιμάσετε την υπηρεσία ελέγχου ταυτότητας Auth0;

Το Auth0 παρέχει ολοκληρωμένες λύσεις που χειρίζονται τις απαιτήσεις ελέγχου ταυτότητας της εφαρμογής σας. Επιπλέον, η υπηρεσία Auth0 προσφέρει υποστήριξη για πλατφόρμες ανάπτυξης ιστού, κινητών και εγγενών προγραμμάτων, επιτρέποντάς σας να ενσωματώσετε εύκολα το σύστημα ελέγχου ταυτότητας με μια στοίβα τεχνολογίας της προτίμησής σας.