Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Η δημιουργία ενός προσαρμοσμένου συστήματος ελέγχου ταυτότητας μπορεί να είναι μια τρομακτική εργασία. Απαιτεί βαθιά κατανόηση των πρωτοκόλλων ελέγχου ταυτότητας και των διαδικασιών ελέγχου ταυτότητας και εξουσιοδότησης χρήστη. Ωστόσο, ενσωματώνοντας ένα εργαλείο όπως το Supabase, μπορείτε να εστιάσετε περισσότερο στη δημιουργία της βασικής λογικής της εφαρμογής σας.

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

Έχει σχεδιαστεί για να είναι πιο προσιτό, επιτρέποντάς σας να ρυθμίζετε έργα γρήγορα. Ακολουθήστε για να μάθετε πώς να ενσωματώνετε την υπηρεσία ελέγχου ταυτότητας στις εφαρμογές σας React.js.

instagram viewer

Δημιουργήστε ένα νέο έργο στην Κονσόλα προγραμματιστή του Supabase

Για να δημιουργήσετε ένα νέο έργο στο Supabase Developer Console, ακολουθήστε τα εξής βήματα:

  1. Εγγραφείτε για ένα Supabase λογαριασμό προγραμματιστή. Πλοηγηθείτε στον πίνακα ελέγχου και δημιουργήστε ένα νέο έργο.
  2. Συμπληρώστε το Όνομα του Έργου και έναν κωδικό πρόσβασης (αυτό είναι προαιρετικό για αυτό το σεμινάριο, αλλά συνιστάται κατά τη δημιουργία μιας βάσης δεδομένων), επιλέξτε την περιοχή και, τέλος, κάντε κλικ Δημιουργία νέου έργου.
  3. Στις Ρυθμίσεις API, αντιγράψτε το έργο URL και το δημόσιος ανων κλειδί.

Ρυθμίστε έναν πάροχο ελέγχου ταυτότητας

Ένας πάροχος ταυτότητας παρέχει έναν ασφαλή τρόπο ελέγχου ταυτότητας των χρηστών χρησιμοποιώντας διάφορες συνδέσεις κοινωνικής δικτύωσης. Το Supabase παρέχει από προεπιλογή έναν πάροχο email. Επιπλέον, μπορείτε να προσθέσετε άλλους παρόχους όπως Google, GitHub ή Discord ανάλογα με τις προτιμήσεις σας.

Αυτό το σεμινάριο θα δείξει πώς να ρυθμίσετε έναν πάροχο Google. Για να το κάνετε αυτό, ακολουθήστε τα εξής βήματα:

  1. Στο αριστερό παράθυρο, επιλέξτε το Αυθεντικοποίηση αυτί.
  2. Στη σελίδα ρυθμίσεων ελέγχου ταυτότητας, επιλέξτε το Παρόχους επιλογή και, τέλος, επιλέξτε το Πάροχος Google από τη λίστα των παρόχων. Σημειώστε ότι ο πάροχος email έχει ήδη ρυθμιστεί από προεπιλογή. Δεν χρειάζεται να κάνετε καμία διαμόρφωση.
  3. Ενεργοποιήστε το Προμηθευτής κουμπί εναλλαγής.
  4. Ο πάροχος Google απαιτεί δύο εισόδους: ένα ClientID και ένα ClientSecret. Θα λάβετε αυτές τις δύο τιμές αφού δημιουργήσετε μια εφαρμογή στο Google Developer Console. Προς το παρόν, αντιγράψτε το URL ανακατεύθυνσης. Θα το χρησιμοποιήσετε για να ρυθμίσετε μια εφαρμογή στο Google Developer Console για να αποκτήσετε το ClientID και το ClientSecret.

Ρύθμιση του έργου σας στο Google Developer Console (GDC)

Για έλεγχο ταυτότητας με την Google, θα πρέπει να εγγράψετε την εφαρμογή σας στην Κονσόλα προγραμματιστή Google (GDC) και να αποκτήσετε ένα ClientID και ClientSecret. Ακολουθήστε αυτά τα βήματα για να ρυθμίσετε ένα έργο στο GDC:

  1. Παω σε Google Developer Console και συνδεθείτε με τον λογαριασμό σας Google για πρόσβαση στην κονσόλα.
  2. Μόλις συνδεθείτε, μεταβείτε στο API και υπηρεσίες καρτέλα, επιλέξτε το Δημιουργία διαπιστευτηρίων επιλογή και, στη συνέχεια, επιλέξτε Αναγνωριστικό πελάτη OAuth.
  3. Καθορίστε τον τύπο της εφαρμογής από τις επιλογές που παρέχονται και, στη συνέχεια, συμπληρώστε το όνομα της αίτησής σας.
  4. Στη συνέχεια, καθορίστε τη διεύθυνση URL αρχικής διαδρομής της εφαρμογής σας (http//:localhost: 3000), και τέλος, καθορίστε τη διεύθυνση URL ανακατεύθυνσης επανάκλησης. Επικολλήστε τη διεύθυνση URL ανακατεύθυνσης που αντιγράψατε από τη σελίδα ρυθμίσεων του Παρόχου Google του Supabase. Κάντε κλικ στο Αποθηκεύσετε για να ολοκληρωθεί η διαδικασία.
  5. Αντιγράψτε το Ταυτότητα πελάτη και ClientSecret και επιστρέψτε στον πίνακα ελέγχου του Supabase Project και επικολλήστε τα στα πεδία εισαγωγής ClientID και ClientSecret στη σελίδα ρυθμίσεων του Google Provider. Κάντε κλικ Αποθηκεύσετε για να ενεργοποιήσετε τον Πάροχο.

Διαμορφώστε την υπηρεσία ελέγχου ταυτότητας Supabase σε μια εφαρμογή React.js

Δημιουργήστε μια εφαρμογή React.jsκαι, στη συνέχεια, ανοίξτε το φάκελο του έργου στον αγαπημένο σας επεξεργαστή κώδικα. Στη συνέχεια, στον ριζικό κατάλογο του φακέλου του έργου σας, δημιουργήστε ένα αρχείο ENV για να κρατήσετε τις μεταβλητές του περιβάλλοντος: τη διεύθυνση URL του έργου και το δημόσιο κλειδί anon. Μεταβείτε στη σελίδα ρυθμίσεων του Supabase, ανοίξτε την ενότητα API και αντιγράψτε τη διεύθυνση URL του έργου και το δημόσιο κλειδί anon.

REACT_APP_SUPABASE_URL= URL έργου
REACT_APP_SUPABASE_API_KEY = δημόσιο κλειδί anon

1. Εγκαταστήστε τα απαιτούμενα πακέτα

Εκτελέστε αυτήν την εντολή στο τερματικό σας για να εγκαταστήσετε τις απαιτούμενες εξαρτήσεις:

npm εγκατάσταση @supabase/auth-ui-react @supabase/supbase-js react react-router-dom

2. Δημιουργήστε τα στοιχεία Σελίδας σύνδεσης και Επιτυχίας

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

3. Στοιχείο σελίδας σύνδεσης

Αυτό το στοιχείο θα αποδώσει μια δυνατότητα εγγραφής και σύνδεσης, χρησιμοποιώντας τη διεπαφή χρήστη ελέγχου ταυτότητας React.js που παρέχεται από το Supabase. Εισαγάγατε τη διεπαφή χρήστη auth ως εξάρτηση (@supabase/auth-UI-react), καθιστώντας πιο εύκολη την εφαρμογή της λειτουργίας ελέγχου ταυτότητας.

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

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {createClient} από'@supbase/supbase-js';
εισαγωγή {Auth, ThemeSupa} από'@supabase/auth-ui-react';
εισαγωγή {use Navigate} από'react-router-dom';
συνθ supabase = createClient(
επεξεργάζομαι, διαδικασία.env.REACT_APP_SUPABASE_URL,
επεξεργάζομαι, διαδικασία.env.REACT_APP_SUPABASE_API_KEY
); 
λειτουργίαΣύνδεση() {
συνθ navigate = useNavigate(); 
 supabase.auth.onAuthStateChange(ασυγχρονισμός (γεγονός) =>{
αν (γεγονός !== "ΑΠΟΣΥΝΔΕΘΗΚΕ") {
 διαπλέω('/επιτυχία');
 }αλλού{
 διαπλέω('/');
 }
 })
ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="Εφαρμογή">
<επί κεφαλήςόνομα τάξης="Επικεφαλίδα εφαρμογής">
 supabaseClient={supabase}
 εμφάνιση={{θέμα: ThemeSupa}}
 θέμα="σκοτάδι"
 πάροχοι={['google']}
 /> 
επί κεφαλής>
div>
 );
}
εξαγωγήΠροκαθορισμένο Σύνδεση;

Ας το αναλύσουμε:

  • Αρχικοποιήστε έναν πελάτη Supabase με τις μεταβλητές περιβάλλοντος -- τη διεύθυνση URL του έργου και το δημόσιο κλειδί anon στο αρχείο ENV.
  • Ρυθμίστε ένα πρόγραμμα ακρόασης συμβάντων για να παρακολουθείτε τις αλλαγές στην κατάσταση ελέγχου ταυτότητας χρησιμοποιώντας τη μέθοδο supabase.auth.onAuthStateChange(), π.χ. Η κατάσταση ελέγχου ταυτότητας δεν είναι "SIGNED_OUT" και στη συνέχεια ο χρήστης πλοηγείται στη σελίδα '/επιτυχία', διαφορετικά, ο χρήστης μεταβαίνει στο '/' (αρχική/σύνδεση) σελίδα.
  • Θα χρησιμοποιήσετε τη μέθοδο πλοήγησης από το άγκιστρο useNavigate για να διαχειριστείτε αυτήν τη διαδικασία.
  • Τέλος, επιστρέψτε ένα div που περιέχει το στοιχείο διεπαφής χρήστη React Auth από τη βιβλιοθήκη Supabase με την εμφάνιση του themeSupa (παρέχεται από το Supabase), του σκούρου θέματος και του παρόχου Google που έχουν οριστεί ως ιδιότητες.

4. Στοιχείο σελίδας επιτυχίας

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

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

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {createClient} από'@supbase/supbase-js';
εισαγωγή {use Navigate} από'react-router-dom';
εισαγωγή {useEffect, useState} από'αντιδρώ';
συνθ supabase = createClient(
επεξεργάζομαι, διαδικασία.env.REACT_APP_SUPABASE_URL,
επεξεργάζομαι, διαδικασία.env.REACT_APP_SUPABASE_API_KEY
); 
λειτουργίαΕπιτυχία() {
συνθ [χρήστης, setUser] = useState([]); 
συνθ navigate = useNavigate(); 
 χρήση εφέ (() => {
ασυγχρονισμόςλειτουργίαgetUserData(){
αναμένω supabase.auth.getUser().then((αξία) => {
αν(αξία.δεδομένα?.χρήστης) {
setUser(αξία.δεδομένα.χρήστης)} 
 }) }
 getUserData();
 },[]);
συνθ avatar = χρήστης?.user_metadata?.avatar_url; 
συνθ userName = user?.user_metadata?.full_Name; 
ασυγχρονισμόςλειτουργίαsignOutUser(){
αναμένωυποβάση.auth.αποσύνδεση();
 διαπλέω('/');
 };
ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="Εφαρμογή">
<επί κεφαλήςόνομα τάξης="Επικεφαλίδα εφαρμογής">
<h1>Επιτυχής σύνδεσηh1>
<h2>{username}h2>
<imgsrc={avatar} />
<κουμπίστο κλικ={()=> signOutUser()}>Αποσύνδεσηκουμπί>
επί κεφαλής>
div>
 );
}
εξαγωγήΠροκαθορισμένο Επιτυχία;

Ας το αναλύσουμε:

  • Αρχικοποιήστε έναν πελάτη Supabase με τις μεταβλητές περιβάλλοντος -- τη διεύθυνση URL του έργου και το δημόσιο κλειδί anon στο αρχείο ENV.
  • Χρήση Το React.js αγκίστρια, useState και useEffect, για λήψη δεδομένων από την απόκριση API.
  • Το άγκιστρο useEffect υλοποιεί μια ασύγχρονη συνάρτηση που καλεί τη μέθοδο supabase.auth.getUser. Αυτή η μέθοδος ανακτά τις πληροφορίες χρήστη που σχετίζονται με την τρέχουσα περίοδο λειτουργίας του χρήστη.
  • Στη συνέχεια, η ασύγχρονη συνάρτηση ελέγχει εάν υπάρχουν τα δεδομένα χρήστη και τα ορίζει στη μεταβλητή κατάστασης, εάν υπάρχουν.
  • Η συνάρτηση signOutUser χρησιμοποιεί τη μέθοδο supabase.auth.signOut για να αποσυνδέσει τον χρήστη και να τον πλοηγήσει πίσω στη σελίδα σύνδεσης όταν κάνει κλικ στο κουμπί αποσύνδεσης.
  • Τέλος, επιστρέψτε ένα div με ορισμένες από τις πληροφορίες χρήστη.

5. Διαμορφώστε τις Διαδρομές Σελίδας

Τέλος, διαμορφώστε τις διαδρομές τόσο για τη σελίδα σύνδεσης όσο και για τη σελίδα επιτυχίας.

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

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { BrowserRouter όπως και Router, Routes, Route } από'react-router-dom';
εισαγωγή Σύνδεση από'./pages/Login';
εισαγωγή Επιτυχία από'./pages/Success';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<Δρομολογητής>
//Ορίστε τις διαδρομές
"/" στοιχείο ={} />
"/επιτυχία" στοιχείο ={} />
Διαδρομές>
Δρομολογητής>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ας το αναλύσουμε:

  • Καθορίστε τις δύο διαδρομές: μια διαδρομή για τη σελίδα σύνδεσης και μια διαδρομή για τη σελίδα επιτυχίας χρησιμοποιώντας τα στοιχεία του δρομολογητή από τη βιβλιοθήκη του δρομολογητή react.
  • Ορίστε τις διαδρομές διαδρομής σε '/' και '/success' αντίστοιχα και αντιστοιχίστε τα στοιχεία Login και Success στις αντίστοιχες διαδρομές τους.
  • Τέλος, εκτελέστε αυτήν την εντολή στο τερματικό σας για να ανοίξετε τον διακομιστή ανάπτυξης: 
 npm αρχή
  • Πλοηγηθείτε στο http//:localhost: 3000 στο πρόγραμμα περιήγησής σας για να δείτε το αποτέλεσμα. Το στοιχείο σύνδεσης αποδίδει το React-auth-UI της Supabase τόσο με το ηλεκτρονικό ταχυδρομείο όσο και με τους παρόχους Google.

Μπορείτε είτε να κάνετε έλεγχο ταυτότητας χρησιμοποιώντας το Google είτε να εγγραφείτε με το email και τον κωδικό πρόσβασής σας και να χρησιμοποιήσετε αυτά τα διαπιστευτήρια για να συνδεθείτε. Το πλεονέκτημα της χρήσης των παρόχων κοινωνικής σύνδεσης του Supabase ή του παρόχου email είναι ότι δεν χρειάζεται να ανησυχείτε για τη λογική εγγραφής.

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

Το Supabase κάνει τον έλεγχο ταυτότητας στο React Easy

Το Supabase προσφέρει μια ολοκληρωμένη σειρά λειτουργιών πέρα ​​από τον έλεγχο ταυτότητας, όπως φιλοξενία βάσης δεδομένων, πρόσβαση API και ροή δεδομένων σε πραγματικό χρόνο. Προσφέρει επίσης λειτουργίες όπως το πρόγραμμα δημιουργίας ερωτημάτων και την οπτικοποίηση δεδομένων για να βοηθήσει τους προγραμματιστές να δημιουργήσουν και να διαχειριστούν τις εφαρμογές τους πιο αποτελεσματικά.

Με τον διαισθητικό πίνακα ελέγχου και το ισχυρό API του, το Supabase είναι ένα ισχυρό εργαλείο για τη δημιουργία επεκτάσιμων και ασφαλών εφαρμογών.