Redux認証：Auth0でアプリケーションを保護します

コアポイント

• Reduxは、特に大規模なアプリケーションの場合、データフローを予測と管理が容易にするための構造化された方法を提供します。
• auth0はユーザー認証に使用され、複雑なバックエンド設定なしのソーシャルログインやマルチファクター認証などの迅速なセットアップと高度な機能を提供します。
• JSON Web Tokens（JWT）は、従来のセッションベースの認証プロセスを簡素化するRestful APIに対する安全なステートレス認証に使用されます。
このチュートリアルは、Auth0のロックウィジェットを使用してログインプロセスを簡素化し、Reduxミドルウェアを使用してAPI呼び出しを効率的かつ安全に処理します。
保護されたルーティングにより、アプリケーションの一部が認証されたユーザーのみがアクセスできるようになり、セキュリティが強化されます。
アプリケーションアーキテクチャには、認証ステータスを処理し、APIからデータを取得するためのReduxアクション、還元剤、およびミドルウェアのセットアップが含まれます。
この記事のピアレビューをしてくれたPeleke Sengstackeに感謝します。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビュアーに感謝します！

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

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

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

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

reduxドキュメント

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

redux認証：開始

このチュートリアルのReactプロジェクトはES2015で記述されるため、Babelを使用してES5にコンパイルし、Webpackを使用してモジュールバンドルを処理します。ゼロからセットアップする代わりに、ReduxリポジトリのDanの実際のスターターの例から始めましょう。コピーを入手して、依存関係をインストールします。

<code class="language-bash">npm install</code>

auth0

を登録します

私たちが構築しているような単一ページアプリケーションを認証する最良の方法は、JSON Web Tokens（JWT）を使用することです。 JWTは、Restful APIに対してステートレス認証の方法を提供します。これには、セッションとCookieベースの認証よりも多くの利点があります。欠点は、JWT認証ソリューションを自分で書くことはトリッキーでエラーが発生しやすい場合がありますが、幸いなことに、サーバーやセキュリティの実装の詳細を心配することなくAuth0を使用できます。

まだ行っていない場合は、無料のauth0アカウントにアクセスしてサインアップしてください。無料プランを使用すると、7,000人の通常のアクティブユーザーと2つのソーシャルアイデンティティプロバイダーを利用できます。

登録した後、プロンプトに従ってアカウントを初期化します。同じアカウントの下に複数のアプリケーションを使用できることを忘れないでください。そのため、状況に合ったドメイン名、おそらく組織の名前を選択してください。最初のステップでは、LocalHost URLを許可されたソースに設定する必要があります。これは、「受け入れられたソース（CORS）」テキスト領域で実行できます。

Webサーバーを設定します

最初にJedi Webサーバーの問題を解決しましょう。これには、JEDIをJSONデータとして返す単純なRESTFUL APIだけが必要であり、NodeJSとExpress Frameworksを使用するには、これをすばやく実行する1つの方法です。任意のサーバー側の言語またはフレームワークを使用して、JSONデータを返すだけです。

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

最初に、アプリケーションを初期化し、依存関係をインストールします：

<code class="language-bash">mkdir server && cd server
touch server.js
npm init
npm install express express-jwt cors</code>

サーバーが単一のJavaScriptファイルに必要なすべてのコードを提供できます。

<code class="language-javascript">// 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');
</code>

ジェダイアレイとそれらを処理する2つのエンドポイントがあります。最初のエンドポイントはすべてのジェダイを返しますが、IDと名前のプロパティのみが返されます。 2番目のエンドポイントは /jedis /：idにあり、単一のジェダイを返しますが、画像URLも含まれます。認証ミドルウェアを使用して、2番目のエンドポイントを保護し、アクセスする認証ユーザーのみに制限します。

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

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

ジェダイ画像は、サーバー上のパブリックディレクトリからのものです。リポジトリから同じ画像を取得することも、必要に応じて、データ内の他のソースからの画像へのリンクを含めることもできます。

サーバーが配置されている場合、APIが予想どおりに機能することを確認しましょう。 Postmanのようなツールを使用してこれを行うことができます。

/api /jedisルートに行くと、予想通りにジェダイの完全なリストを取得できます。ただし、ジェダイを取得しようとすると、トークンをサーバーに送信していないため、リソースを取得することは許可されていません。

アプリケーション自体にAPI呼び出しを実装したら、リクエストを使用してトークンを送信する方法を確認しますが、基本的には、承認ヘッダーにBearerスキームを使用して含める必要があります。

...（後続のコンテンツは元のテキストに似ていますが、文は置き換えられ、文の構造の調整が調整されます。長さは長すぎます。

以上がRedux認証：Auth0でアプリケーションを保護しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。