ノード.JTの認証＆認証の例

このチュートリアルでは、完全なスタックノードのビルド方法を学びます.JSエクスプレス+角度11認証の例.バックエンドサーバはノードを使用します.JWT認証と認証のためのJSONWebTokenでJS Expressは、MySQLデータベースとの相互作用のためにシーケンス化します.フロントエンドは、角度11、httpInterceptorとルータで作成されます.UIでフォームの検証も行います.

JSONウェブトークン
セッションをクッキーに保存する必要があるセッションベースの認証と比較して、トークンベースの認証の大きな利点は、JSON Webトークン(JWT)をクライアント側に格納することです.したがって、我々はネイティブのアプリをサポートする別のバックエンドプロジェクトまたはネイティブのアプリケーションユーザーのための追加認証モジュールを構築する必要はありません.

JWT :ヘッダー、ペイロード、署名の3つの重要な部分があります.一緒に標準構造に結合されます.header.payload.signature .
クライアントは典型的にX - Access - TokenヘッダーにJWTを添付します.

x-access-token: [header].[payload].[signature]

詳細については、
In-depth Introduction to JWT-JSON Web Token

ノード.JSエクスプレス角度11認証例
これは、完全なスタック、ノードとなります.JSはフロントエンド用のバックエンドとアングル11を表します.アクセスはJWT認証で検証されます.

ユーザーは、新しいアカウント、ユーザー名とパスワードでログインをサインアップすることができます.

ユーザの役割による権限( admin ,モデレーター,ユーザ)

スクリーンショット
下の画像は、我々の角度11クライアントアプリのスクリーンショットを示しています.
誰でも、ログインする前にパブリックページにアクセスできます.

-新しいユーザがサインアップできます.

-登録フォームの妥当性検査:

-ログインして合法的なアカウント:

プロファイルページ:

-管理用ロールのUI

-管理者ロールを持たないユーザが管理者/モデレータボードページにアクセスしようとする場合:


デモ
これは完全な角度+ノードです.JS ExpressのJWT認証＆承認アプリケーションデモ(フォームの検証を使用して、署名のユーザー名/電子メールの重複、テストの承認を3つの役割:管理者、モデレーター、ユーザー)をチェックします.
ビデオでは、角度10を使用しますが、ロジックとUIはこのアングルバージョン11と同じです.

ユーザ登録フローとユーザログイン
図は、ユーザー登録の流れ、ユーザーログインと認可プロセスを示します.

認証のための2つのエンドポイントがあります.

api/auth/signup ユーザ登録

api/auth/signin ユーザーログイン用
クライアントが保護された資源にアクセスするなら、合法的なJWTはHTTP X - ACCESS - Tokenヘッダーに加えられなければなりません.

ノードでバックエンド.JSエクスプレス
ノード.JS Expressアプリケーションを以下の図にまとめます.

ルート経由で、ルートに一致するHTTPリクエストは、セキュリティ層に来る前にCorsミドルウェアによってチェックされます.
セキュリティ層には

JWT認証ミドルウェア

データベースによるユーザの役割チェック

これらのミドルウェアがどんなエラーでもスローするなら、メッセージはHTTP応答として送られます.
コントローラは、シーケンサを介してMySQLデータベースと対話し、HTTP応答(トークン、ユーザー情報、データに基づいてデータを送信する)クライアントに.

角11、HttpIntereptorとルータでフロントエンド

詳細はこちらをご覧ください.
https://bezkoder.com/node-js-angular-11-jwt-authentication/

更なる読書

Node.js + MongoDB: JWT Authentication & Authorization

Node.js + PostgreSQL: JWT Authentication & Authorization

フルスタックのCRUDアプリ:

Angular + Node.js Express + MySQL example

Angular + Node.js Express + PostgreSQL example

Angular + Node.js Express + MongoDB example