ReactJSとDjangoの間の安全な認証

Question

ReactJSとDjangoに関する多くの質問をしています。

これは特に、Django REST FrameworkからReactJSへのデータの流れと、ReactJSからDjango REST Frameworkへのデータの流れを理解するのに役立ちました。

Django Forms and Authentication with Front-end Framework (AngularJS/ReactJS)

しかし、私は理解しようとしている一つのことは、DjangoのRESTフレームワークへの認証です。私はそれが認証を組み込んだことを文書から理解しています。これは機密データなので、私は明らかに、http://www.my_site.com/info/apiに行くだけで、人々がそれを取得するのを保護したいと思うでしょう。

APIからデータを要求できる唯一のものとしてReactJSをセットアップする必要があります。これは、キーまたはユーザー名/パスワードの資格情報を使用するかどうかです。私はこれがどのように処理されるのか不思議です。 ReactJSでコード化されたコードをReactJSの残りの部分とコンパイルするので、明らかに私はそのコードをReactJSでコード化したくありません。

Answer 1

ここで私はそれにアプローチします：JSON Web Token (JWT)を認証と認可に使用します。

あなたは（すなわち、登録/ログインページ）ユーザーはトークンを持っていないルートの無効 JWTの除いからALL APIリクエストを保護するためにあなたのバックエンドを使用すると思います。ここで

は、アプリケーションの流れが行く方法は次のとおりです。

1. 新しいユーザーは、電子メールやパスワードなどの標準的な資格情報を使用して、あなたのアプリに登録されます。
2. バックエンドで新しいユーザーが作成され、新しいJWTトークン（通常はユーザーのID）に署名します。トークンの署名/検証にはサードパーティのライブラリを使用することになります（私はDjangoコミュニティでの経験はありませんが、迅速なGoogle検索で回答が得られると確信しています）。バックエンドはこのトークンを返します。これは、バックエンドがメール、パスワード、または登録に関する他の機密情報を受け取る唯一の時間です。
3. Reactのこの時点からは、このトークンのみが承認に使用されます。 Reactはこのトークンをどこかに保存します（つまり、localStorage）、このトークンをリクエストの他の部分とともに、バックエンドで作成したAPIルートに送信します。このトークンは、リクエスト内のauthorizationヘッダーに送信されます。
4. バックエンドはサードパーティのライブラリを使用してこのトークンを検証します。無効な場合、要求は停止し、不正なエラーが返されます。有効な場合、要求は継続されます。

これは、次のことを実現：

1. あなたのAPIのルートは、あなたのAPIへの各リクエストは、あなたのAPIの一部を要求するから誰を保護し、許可されたユーザーのために検証され認証されていないユーザー
2. から保護されています。
3. これは、ユーザーが自分のデータを変更する要求のみを許可することでさらに固めることができます。たとえば、自分のIDを持つトークンに自分のアカウントやデータを変更するだけでSuzyのプロフィールが変更されるのを防ぐことができます。

重要な注意 - あなたのバックエンドストレージでこれらのトークンを保存することはありません。各要求時にトークンを確認します。 JSON Web Tokens (JWT)の詳細とその動作についてをお読みください。