Το OAuth 2.0 είναι ένα πρότυπο που επιτρέπει σε εφαρμογές τρίτων να έχουν πρόσβαση σε δεδομένα από εφαρμογές Ιστού με ασφάλεια. Μπορείτε να το χρησιμοποιήσετε για να λάβετε δεδομένα, συμπεριλαμβανομένων πληροφοριών προφίλ, χρονοδιαγραμμάτων κ.λπ. που φιλοξενείται σε άλλες εφαρμογές ιστού όπως το Facebook, το Google και το GitHub. Μια υπηρεσία μπορεί να το κάνει αυτό για λογαριασμό ενός χρήστη χωρίς να εκθέτει τα διαπιστευτήριά του στην εφαρμογή τρίτου μέρους.
Μάθετε πώς να εφαρμόζετε το OAuth σε μια εφαρμογή Express χρησιμοποιώντας το GitHub ως πάροχο OAuth σε μερικά βήματα.
Η ροή του OAuth
Σε μια τυπική ροή OAuth, ο ιστότοπός σας παρέχει μια επιλογή στους χρήστες να συνδεθούν με τον λογαριασμό τρίτου μέρους από έναν πάροχο όπως το GitHub ή το Facebook. Ένας χρήστης μπορεί να ξεκινήσει αυτή τη διαδικασία κάνοντας κλικ σε ένα σχετικό κουμπί σύνδεσης OAuth.
Αυτό τους ανακατευθύνει από την αίτησή σας στον ιστότοπο του παρόχου OAuth και τους παρουσιάζει ένα έντυπο συναίνεσης. Η φόρμα συγκατάθεσης περιέχει όλες τις πληροφορίες στις οποίες θέλετε να έχετε πρόσβαση από τον χρήστη, οι οποίες θα μπορούσαν να είναι τα email, οι φωτογραφίες, τα χρονοδιαγράμματα κ.λπ.
Εάν ο χρήστης εξουσιοδοτήσει την αίτησή σας, το τρίτο μέρος θα τον ανακατευθύνει πίσω στην εφαρμογή σας με έναν κωδικό. Η εφαρμογή σας μπορεί στη συνέχεια να ανταλλάξει τον κωδικό που έλαβε με ένα διακριτικό πρόσβασης το οποίο μπορεί στη συνέχεια να χρησιμοποιήσει για πρόσβαση στα διαθέσιμα δεδομένα χρήστη.
Η εφαρμογή αυτής της ροής σε μια εφαρμογή Express περιλαμβάνει μερικά βήματα.
Βήμα 1: Ρύθμιση περιβάλλοντος ανάπτυξης
Πρώτα, δημιουργήστε έναν κενό κατάλογο έργου και CD στον κατάλογο που δημιουργήθηκε.
Για παράδειγμα:
mkdir github-app
CD github-app
Στη συνέχεια, αρχικοποιήστε το npm στο έργο σας εκτελώντας:
npm init -y
Αυτή η εντολή δημιουργεί ένα πακέτο.json αρχείο που περιέχει λεπτομέρειες σχετικά με το έργο σας όπως το όνομα, την έκδοση κ.λπ.
Αυτό το σεμινάριο θα περιλαμβάνει τη χρήση του συστήματος μονάδων ES6. Ρυθμίστε το ανοίγοντας το πακέτο.json αρχείο και προσδιορίζοντας "type": "module" στο αντικείμενο JSON.
Βήμα 2: Εγκατάσταση εξαρτήσεων
Θα χρειαστεί να εγκαταστήσετε μερικές εξαρτήσεις για να λειτουργεί σωστά ο διακομιστής σας:
- ExpressJS: Το ExpressJS είναι ένα πλαίσιο NodeJS που παρέχει ένα ισχυρό σύνολο δυνατοτήτων για εφαρμογές ιστού και για κινητές συσκευές. Η χρήση του Express θα απλοποιήσει τη διαδικασία δημιουργίας διακομιστή σας.
- Axios: Το Axios είναι ένας πελάτης HTTP που βασίζεται σε υποσχέσεις. Θα χρειαστείτε αυτό το πακέτο για να κάνετε ένα αίτημα POST για ένα διακριτικό πρόσβασης στο GitHub.
- dotenv: το dotenv είναι ένα πακέτο που φορτώνει μεταβλητές περιβάλλοντος από ένα αρχείο .env στο αντικείμενο process.env. Θα το χρειαστείτε για να αποκρύψετε σημαντικές πληροφορίες σχετικά με την αίτησή σας.
Εγκαταστήστε τα εκτελώντας:
npm εγκαθιστώ εξπρές axios dotenv
Βήμα 3: Δημιουργία μιας εφαρμογής Express
Πρέπει να δημιουργήστε έναν βασικό διακομιστή Express για το χειρισμό και την υποβολή αιτημάτων στον πάροχο OAuth.
Πρώτα, δημιουργήστε ένα index.js αρχείο στον ριζικό κατάλογο του έργου σας που περιέχει τα εξής:
// index.js
εισαγωγή εξπρές από "εξπρές";
εισαγωγή αξιος από "αξιος"?
εισαγωγή * όπως και dotenv από "dotenv";
dotenv.config();συνθ app = express();
συνθ port = διεργασία.env. ΛΙΜΑΝΙ || 3000
app.listen (port, () => {
κονσόλα.κούτσουρο(`Η εφαρμογή εκτελείται στη θύρα ${port}`);
});
Αυτός ο κώδικας εισάγει τη βιβλιοθήκη express, δημιουργεί μια άμεση παρουσία και αρχίζει να ακούει για κίνηση στη θύρα 3000.
Βήμα 4: Δημιουργία Χειριστών Διαδρομών
Θα χρειαστεί να δημιουργήσετε δύο χειριστές διαδρομής για να χειριστείτε τη ροή OAuth. Η πρώτη ανακατευθύνει τον χρήστη στο GitHub και ζητά εξουσιοδότηση. Το δεύτερο χειρίζεται την ανακατεύθυνση πίσω στην εφαρμογή σας και κάνει το αίτημα για το διακριτικό πρόσβασης όταν ένας χρήστης εξουσιοδοτήσει την αίτησή σας.
Ο πρώτος χειριστής διαδρομής θα πρέπει να ανακατευθύνει τον χρήστη στο https://github.com/login/oauth/authorize? Παράμετροι.
Θα χρειαστεί να περάσετε ένα σύνολο απαιτούμενων παραμέτρων στη διεύθυνση URL OAuth του GitHub, οι οποίες περιλαμβάνουν:
- Αναγνωριστικό πελάτη: Αυτό αναφέρεται στο αναγνωριστικό που λαμβάνει η εφαρμογή OAuth όταν είναι εγγεγραμμένη στο GitHub.
- Πεδίο εφαρμογής: Αυτό αναφέρεται σε μια συμβολοσειρά που καθορίζει το μέγεθος πρόσβασης που έχει μια εφαρμογή OAuth στις πληροφορίες ενός χρήστη. Μπορείτε να βρείτε μια λίστα με τα διαθέσιμα πεδία στο Τεκμηρίωση OAuth του GitHub. Εδώ θα χρησιμοποιήσετε ένα "διαβάστε: χρήστης», το οποίο παρέχει πρόσβαση για την ανάγνωση των δεδομένων προφίλ ενός χρήστη.
Προσθέστε τον παρακάτω κώδικα στο δικό σας index.js αρχείο:
// index.js
app.get("/auth", (απ., res) => {
// Αποθήκευση παραμέτρων σε ένα αντικείμενο
συνθ παραμέτρους = {
πεδίο εφαρμογής: "διαβάστε: χρήστης",
ταυτότητα πελάτη: επεξεργάζομαι, διαδικασία.env.ΤΑΥΤΟΤΗΤΑ ΠΕΛΑΤΗ,
};
// Μετατροπή παραμέτρων σε συμβολοσειρά με κωδικοποίηση URL
συνθ urlEncodedParams = νέος URLSearchParams (params).toString();
res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});
Αυτός ο κώδικας υλοποιεί τον πρώτο χειριστή διαδρομής. Αποθηκεύει τις απαιτούμενες παραμέτρους σε ένα αντικείμενο, μετατρέποντάς τες σε μορφή κωδικοποιημένης διεύθυνσης URL χρησιμοποιώντας το URLSearchParams API. Στη συνέχεια, προσθέτει αυτές τις παραμέτρους στο URL OAuth του GitHub και ανακατευθύνει τον χρήστη στη σελίδα συναίνεσης του GitHub.
Προσθέστε τον παρακάτω κώδικα στο δικό σας index.js αρχείο για το δεύτερο πρόγραμμα χειρισμού διαδρομής:
// index.js
app.get("/github-callback", (απ., res) => {
συνθ { code } = req.query;συνθ σώμα = {
ταυτότητα πελάτη: επεξεργάζομαι, διαδικασία.env.ΤΑΥΤΟΤΗΤΑ ΠΕΛΑΤΗ,
client_secret: επεξεργάζομαι, διαδικασία.env.CLIENT_SECRET,
κώδικας,
};αφήνω διακριτικό πρόσβασης;
επιλογές const = { κεφαλίδες: { αποδοχή: "εφαρμογή/json" } };
αξιος
.Θέση("https://github.com/login/oauth/access_token", σώμα, επιλογές)
.then((απάντηση) => answer.data.access_token)
.then((token) => {
AccessToken = διακριτικό;
res.redirect(`/?token=${token}`);
})
.σύλληψη((err) => res.status(500).json({ err: err.message }));
});
Ο δεύτερος χειριστής διαδρομής θα εξαγάγει το κώδικας επέστρεψε από το GitHub στο απαίτηση.ερώτημα αντικείμενο. Στη συνέχεια κάνει μια ΑΝΑΡΤΗΣΗ αίτηση χρησιμοποιώντας Αξιος προς την " https://github.com/login/oauth/access_token" με τον κωδικό, ταυτότητα πελάτη, και client_secret.
ο client_secret είναι μια ιδιωτική συμβολοσειρά που θα δημιουργήσετε όταν δημιουργείτε μια εφαρμογή GitHub OAuth. Οταν ο διακριτικό πρόσβασης έχει ληφθεί με επιτυχία, αποθηκεύεται σε μια μεταβλητή για μελλοντική χρήση. Ο χρήστης ανακατευθύνεται τελικά στην εφαρμογή σας με το διακριτικό πρόσβασης.
Βήμα 5: Δημιουργία εφαρμογής GitHub
Στη συνέχεια, θα χρειαστεί να δημιουργήσετε μια εφαρμογή OAuth στο GitHub.
Πρώτα, συνδεθείτε στον λογαριασμό σας στο GitHub και μετά μεταβείτε στο Ρυθμίσεις, μετακινηθείτε προς τα κάτω στο Ρυθμίσεις προγραμματιστήκαι επιλέξτε Εφαρμογές OAuth. Τέλος, κάντε κλικ στο «Εγγραφή νέας εφαρμογής.”
Το GitHub θα σας παρέχει μια νέα φόρμα αίτησης OAuth όπως αυτή:
Συμπληρώστε τα απαιτούμενα πεδία με τα στοιχεία που επιθυμείτε. Ο "URL αρχικής σελίδας"πρέπει να είναι" http://localhost: 3000”. Τα δικα σου "Διεύθυνση URL επανάκλησης εξουσιοδότησης"πρέπει να είναι" http://localhost: 3000/github-callback”. Μπορείτε επίσης να ενεργοποιήσετε προαιρετικά τη ροή της συσκευής, επιτρέποντάς σας να εξουσιοδοτήσετε τους χρήστες για μια εφαρμογή χωρίς κεφαλή, όπως π.χ ένα εργαλείο CLI ή διαχειριστής διαπιστευτηρίων Git.
Η ροή της συσκευής βρίσκεται σε δημόσια έκδοση beta και υπόκειται σε αλλαγές.
Τέλος, χτυπήστε το Εγγραφή αίτησης κουμπί.
Το GitHub θα σας κατευθύνει σε μια σελίδα με το δικό σας ταυτότητα πελάτη και μια επιλογή για τη δημιουργία σας client_secret. Αντιγράψτε το δικό σας ταυτότητα πελάτη, δημιουργήστε το δικό σας client_secret, και αντιγράψτε το επίσης.
Δημιουργήστε ένα αρχείο .env και αποθηκεύστε το ταυτότητα πελάτη και client_secret μέσα σε αυτό. Ονομάστε αυτές τις μεταβλητές CLIENT_ID και CLIENT_SECRET αντίστοιχα.
Η ροή του OAuth έχει πλέον ολοκληρωθεί και μπορείτε πλέον να υποβάλετε αιτήματα με το διακριτικό πρόσβασης για ανάγνωση δεδομένων χρήστη (το πεδίο εφαρμογής καθορίσατε νωρίτερα).
Η σημασία του OAuth 2.0
Η χρήση του OAuth 2.0 στην εφαρμογή σας απλοποιεί σημαντικά το έργο της υλοποίησης μιας ροής ελέγχου ταυτότητας. Προστατεύει τα δεδομένα χρήστη των πελατών σας χρησιμοποιώντας το πρότυπο Secure Sockets Layer (SSL), διασφαλίζοντας ότι παραμένουν ιδιωτικά.