Redux -Authentifizierung: Sichern Sie Ihre Anwendung mit Auth0

Kernpunkte

• Redux bietet eine strukturierte Möglichkeit, Status in React -Anwendungen zu verwalten, wodurch Datenflüsse leicht vorherzusagen und verwaltet werden, insbesondere für große Anwendungen.
• auth0 wird für die Benutzerauthentifizierung verwendet und bietet schnelle Setup- und erweiterte Funktionen wie soziales Login und Multi-Faktor-Authentifizierung ohne komplexe Backend-Einstellungen.
• JSON Web Tokens (JWT) wird zur sicheren, staatenlosen Authentifizierung gegen erholsame APIs verwendet, wodurch der traditionelle Sitzungsauthentifizierungsprozess vereinfacht wird.
• Dieses Tutorial vereinfacht den Anmeldeprozess mithilfe von Auth0's Lock Widget und verwendet Redux Middleware, um API -Aufrufe effizient und sicher zu behandeln.
• geschütztes Routing stellt sicher, dass einige Teile der Anwendung nur für authentifizierte Benutzer zugänglich sind und so die Sicherheit verbessern.
• Anwendungsarchitektur umfasst das Einrichten von Redux -Aktionen, Reduzierern und Middleware, um den Authentifizierungsstatus zu verarbeiten und Daten aus der API abzurufen.

Vielen Dank an Peleke Sengstacke für die Peer -Review dieses Artikels. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SitePoint -Inhalte für den Besten erhalten haben!

Redux ist in der React -Community und sogar im breiteren Bereich sehr beliebt, und es gibt guten Grund. Es handelt sich um eine von Dan Abramov erstellte Bibliothek, in der die Verarbeitung von Einweg-Datenströmen organisiert wird und es Entwicklern ermöglicht, leistungsstarke Entwicklungsfunktionen wie Zeitreisen und Aufnahme/Wiedergabe zu verwenden.

klingt großartig, oder? Das Problem ist jedoch: Es erfordert, dass mehr Code geschrieben wird. Wenn Sie jedoch über Erfahrung in der Aufrechterhaltung großer Anwendungen verfügen, wissen Sie möglicherweise, dass die Datenverarbeitung schwer zu kontrollieren und schwer zu verwalten kann. Mit Redux können wir immer ein klares Verständnis des Status unserer Anwendung haben und genau wissen, was unsere Daten tun.

In diesem Tutorial lernen wir, wie Sie eine echte React -Redux -Anwendung erstellen, die Benutzer authentifiziert und die Remote -API zum Abrufen von Daten aufruft. Unsere App wird die Star Wars Jedi -Liste vom Knoten -Backend abrufen, damit wir ihre Namen und Fotos anzeigen können. Zur Authentifizierung werden wir Auth0 verwenden, damit wir schnell einrichten können, und wir können auch Funktionen wie Social Login und Multi-Factor-Authentifizierung problemlos erhalten.

wir werden uns nicht mit den grundlegenden Konzepten von Redux befassen. Wenn Sie also nicht mit der Bibliothek vertraut sind, lesen Sie einige der folgenden hervorragenden Einführungsressourcen:

• So erstellen Sie eine To-Do-Anwendung mit React, Redux und unveränderlich.
Redux -Dokumentation

Der Quellcode unserer bevorstehenden Anwendung kann hier heruntergeladen werden.

Redux -Authentifizierung: Erste Schritte

Das React -Projekt für dieses Tutorial wird in ES2015 geschrieben, sodass wir es mit Babel mit ES5 kompilieren und das Modulpaket mit Webpack verarbeiten. Anstatt es von Grund auf neu einzusetzen, beginnen wir mit dem realen Starter-Beispiel von Dan im Redux-Repository. Holen Sie sich eine Kopie und installieren Sie die Abhängigkeiten.

npm install

Register Auth0

Der beste Weg, sich für einseitige Anwendungen wie die zu erstellen, besteht darin, JSON Web Tokens (JWT) zu verwenden. JWT bietet eine Methode zur staatenlosen Authentifizierung gegen die erholsame API, die viele Vorteile gegenüber Sitzungs- und Cookie-basierten Authentifizierung hat. Der Nachteil ist, dass das Schreiben einer JWT-Authentifizierungslösung selbst schwierig und fehleranfällig sein kann, aber zum Glück können wir Auth0 verwenden, ohne sich über Server- oder Sicherheitsimplementierungsdetails zu sorgen.

Wenn Sie dies noch nicht getan haben, besuchen Sie bitte ein kostenloses Auth0 -Konto. Mit dem kostenlosen Plan haben wir 7.000 regelmäßige aktive Benutzer und zwei Anbieter von sozialen Identität zur Verfügung.

Befolgen Sie nach der Registrierung den Aufforderungen, Ihr Konto zu initialisieren. Denken Sie daran, dass Sie mehrere Anwendungen unter demselben Konto haben können. Wählen Sie daher den Domänennamen aus, der zu Ihrer Situation passt - wahrscheinlich den Namen Ihrer Organisation. Erster Schritt müssen wir unsere Localhost -URL auf die erlaubte Quelle setzen. Dies kann im Textbereich "Akzeptierte Quellen (CORs)" erfolgen.

Einrichten Sie den Webserver

Lassen Sie uns zunächst das Problem des Jedi -Webservers lösen. Dies erfordert nur eine einfache API, die unsere Jedi als JSON -Daten zurückgibt, und die Verwendung der NodeJs und Express -Frameworks ist eine Möglichkeit, dies schnell zu tun. Sie können jede serverseitige Sprache oder einen beliebigen serverseitigen Framework verwenden. Geben Sie einfach JSON-Daten zurück.

Hinweis: Star Wars Puristen werden feststellen, dass wir "Jedis" als Pluralform von Jedi in der gesamten App verwenden, aber dies ist nicht die richtige Pluralform. Stattdessen sollten wir nur "Jedi" verwenden. Vielleicht ist es wahr, aber ich bin damit einverstanden, weil es unsere App einfacher macht :)

Initialisieren Sie zuerst eine Anwendung und installieren Sie Abhängigkeiten:

mkdir server && cd server
touch server.js
npm init
npm install express express-jwt cors

Wir können alle vom Server in einer einzelnen JavaScript -Datei erforderlichen Code bereitstellen.

// server.js

const express = require('express');
const app = express();
const jwt = require('express-jwt');
const cors = require('cors');

app.use(cors());
app.use(express.static('public'));

// express-jwt 提供的身份验证中间件。
// 此中间件将检查传入请求，以获取应用于它的任何路由上的有效 JWT。
const authCheck = jwt({
  secret: 'AUTH0_SECRET',
  // 如果您的 Auth0 客户端是在 2016 年 12 月 6 日之前创建的，
  // 请取消注释下面的行并删除上面的行
  // secret: new Buffer('AUTH0_SECRET', 'base64'),
  audience: 'AUTH0_CLIENT_ID'
});

var jedis = [
  {
    id: 1,
    name: 'Luke Skywalker',
    image: 'http://localhost:7000/images/luke-skywalker.jpg'
  },
  {
    id: 2,
    name: 'Anakin Skywalker',
    image: 'http://localhost:7000/images/anakin-skywalker.png'
  },
  {
    id: 3,
    name: 'Yoda',
    image: 'http://localhost:7000/images/yoda.png'
  },
  {
    id: 4,
    name: 'Obi-Wan Kenobi',
    image: 'http://localhost:7000/images/obi-wan-kenobi.jpg'
  },
  {
    id: 5,
    name: 'Mace Windu',
    image: 'http://localhost:7000/images/mace-windu.jpg'
  }
];

app.get('/api/jedis', (req, res) => {
  const allJedis = jedis.map(jedi => { 
    return { id: jedi.id, name: jedi.name }
  });
  res.json(allJedis);
});

app.get('/api/jedis/:id', authCheck, (req, res) => {
  res.json(jedis.filter(jedi => jedi.id === parseInt(req.params.id))[0]);
});

app.listen(7000);
console.log('Listening on http://localhost:7000');

Wir haben ein Jedi -Array und zwei Endpunkte, die sie verarbeiten. Der erste Endpunkt gibt alle Jedi zurück, aber nur ihre ID- und Namenseigenschaften. Der zweite Endpunkt befindet sich bei /jedis /: id, das eine einzelne Jedi zurückgibt, aber auch die Bild -URL. Wir werden unsere Authentifizierung Middleware verwenden, um den zweiten Endpunkt zu schützen und ihn auf nur authentifizierte Benutzer zum Zugriff zu beschränken.

Aber wie schützen wir diesen Endpunkt tatsächlich? Wir verwenden Express-JWT, um eine Middleware zu erstellen, die nach eingehenden JSON-Web-Token sucht und sie basierend auf den von uns bereitgestellten Schlüssel überprüfen. Anschließend können wir diese Middleware auf einen unserer Endpunkte anwenden - wir tun dies im zweiten Parameter des /jedis /: id -Endpunkts - und nur Anfragen, die ein gültiges Token enthalten können.

Die Middleware selbst wird durch Bereitstellung unserer Auth0 -Schlüssel- und Client -ID für AuthCheck festgelegt, in der Sie einen für Ihre Anwendung spezifischen Schlüssel bereitstellen können. Diese Schlüssel finden Sie im Auth0 -Administratorfeld unter Anwendung .

Jedi -Bilder stammen aus einem öffentlichen Verzeichnis auf dem Server. Sie können das gleiche Bild aus dem Repository abrufen oder Links zu Bildern aus anderen Quellen in Ihren Daten aufnehmen, falls Sie es vorziehen.

Wenn der Server vorhanden ist, überprüfen wir, dass die API wie erwartet funktioniert. Wir können dies mit Tools wie Postman tun.

Wenn wir zur Route /api /jedis gehen, können wir wie erwartet die vollständige Liste von Jedi erhalten. Wenn wir jedoch versuchen, einen Jedi zu erhalten, dürfen wir die Ressource nicht abrufen, da wir das Token nicht an den Server senden.

Sobald wir den API -Aufruf in der Anwendung selbst implementiert haben, werden wir sehen, wie das Token mit unserer Anfrage gesendet wird, aber im Wesentlichen müssen wir sie nur mit dem Bearer -Schema in den Autorisierungsheader einbeziehen.

... (Der nachfolgende Inhalt ähnelt dem Originaltext, aber der Satz wird ersetzt und die Einstellung der Satzstruktur wird angepasst. Die Länge ist zu lang, hier weggelassen) ....

Das obige ist der detaillierte Inhalt vonRedux -Authentifizierung: Sichern Sie Ihre Anwendung mit Auth0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!