Redux認証：Auth0でアプリケーションを保護します-jsチュートリアル-php.cn

Redux Authentication: Secure Your Application with Auth0

コアポイント

Reduxは、特に大規模なアプリケーションの場合、データフローを予測と管理が容易にするための構造化された方法を提供します。
auth0はユーザー認証に使用され、複雑なバックエンド設定なしのソーシャルログインやマルチファクター認証などの迅速なセットアップと高度な機能を提供します。
JSON Web Tokens（JWT）は、従来のセッションベースの認証プロセスを簡素化するRestful APIに対する安全なステートレス認証に使用されます。

Reduxは、Reactコミュニティやより広い分野でも非常に人気があり、正当な理由があります。これは、Dan Abramovが作成したライブラリで、一方向データストリームを整理し、開発者がタイムトラベルやレコーディング/再生などの強力な開発機能を使用できるようにします。

いいですね。しかし、問題は次のとおりです。より多くのコードを記述する必要があります。ただし、大規模なアプリケーションの維持経験がある場合は、データ処理が制御が困難になり、管理が困難になる可能性があることがわかる場合があります。 Reduxを使用すると、アプリケーションのステータスを常に明確に理解し、データが何をしているのかを正確に知ることができます。このチュートリアルでは、ユーザーを認証し、リモートAPIを呼び出してデータを取得するReal React Reduxアプリケーションの作成を開始する方法を学びます。私たちのアプリは、ノードバックエンドからスターウォーズジェダイリストを取得して、名前と写真を表示できるようにします。認証のために、auth0を使用して、迅速に起動して実行できるようにします。また、ソーシャルログインやマルチファクター認証などの機能を簡単に取得することもできます。

reduxの基本概念には入りません。したがって、ライブラリに慣れていない場合は、次の優れた入門リソースをご覧ください。

React、Redux、およびImmutable.jsを使用してTo Doアプリケーションを構築する方法

Redux Authentication: Secure Your Application with Auth0 reduxドキュメント

今後のアプリケーションのソースコードは、こちらからダウンロードできます。

redux認証：開始

npm install

ログイン後にコピー

を登録します

Redux Authentication: Secure Your Application with Auth0

注：スターウォーズの純粋主義者は、アプリ全体で「ジェダイ」をジェダイの形式として使用していることに気付くでしょうが、これは正しい複数形ではありません。代わりに、「Jedi」のみを使用する必要があります。たぶんそれは本当かもしれませんが、私たちのアプリを簡単にするので、私はこれで大丈夫です:)

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

ログイン後にコピー

// 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');

ログイン後にコピー

しかし、このエンドポイントを実際に保護するにはどうすればよいですか？ Express-JWTを使用して、着信JSON Webトークンを探して、提供するキーに基づいてそれらを検証するミドルウェアを作成します。その後、このミドルウェアをエンドポイントのいずれかに適用できます。これを /jedis /：id endpointの2番目のパラメーターで行い、有効なトークンを含むリクエストのみが渡すことができます。

ミドルウェア自体は、Auth0キーとクライアントIDをAuthCheckに提供することにより設定されます。ここでは、アプリケーションに固有のキーを提供できます。これらのキーは、Auth0 Adminパネルの下にあります。

Redux Authentication: Secure Your Application with Auth0