2019.12.19ケネPassportを使用してログイン認証(Node.js)ツイートシェアはてブ送るPocket※当サイトはアフィリエイト広告を利用しています※この記事は2019/10/24に更新されました。Passport.jsを使ってNode.jsのWebアプリケーションにログイン画面(ユーザID、パスワード認証)を実装する方法を解説します。以下のような画面を実装できます。Passport.jsはNode.jsミドルウェアを利用することで、自分で一から作らなくてもログイン画面が実装できます。WebアプリケーションはExpress.jsを使用して構築しています。手軽にログイン画面を実装したいセキュリティを強化したいという方向けの記事です。オススメ記事Passportの使用方法(事前準備)インストールまずはnpm経由でインストールします。Passport.jsではStrategiesという項目を定義するためにpassport-localも必要となるのでinstallしておきます。セッション管理用にexpress-sessionもinstallしておきます。--savePassportの使用方法(ログイン画面実装)ログイン画面を実装する手順は以下となります。それぞれ解説していきます。Express.jsで新規でログイン画面を作成app.jsにpassportを定義app.jsにStrategiesを定義routes/index.jsにログイン画面遷移の処理を追加ログイン画面作成ログイン画面を作成します。以下のサンプルコードではExpress.jsのテンプレートエンジンとしてEJSを利用しています。login.ejsという新規画面を作成し、username、passwordを入力するinputタグを記述します。passport-localを定義しておきます。ログイン状態(セッション)を管理させるためのpassport.sessionをapp.use(session())定義後の順で書きます。//Expressを使用している場合はInitializeが必要app.use(passport.session())app.jsにStrategiesを定義Passport.jsの利用にはpassport.use()でStrategiesという項目を定義する必要があります。今回はユーザ名、パスワードのログイン認証のためのLocalStrategyを使用します。他にもgoogle認証やgithub認証も可能です。Passport.js公式サイトのStrategiesを参照ください。//↓にはPasswordチェック処理を実装してください。})}));Routeにログイン画面遷移処理を記述Express.jsのroutes/index.jsにログイン画面遷移の処理を追加します。});});先ほど作成したログイン画面からログインボタンを押下(Submit)した際の処理を記述します。true}));ここまででログイン画面の実装は完了です。Passportの使用方法(各画面にログイン認証を実装)それぞれの画面でログイン認証チェックをさせるログイン画面の実装ができたので、それぞれの画面にログイン認証済みであるかのチェックを実装していきます。ログイン状態でない場合、ログイン画面に遷移させます。この例ではsample.jsの画面のroutesファイルにisLoginedというフラグを持たせて画面表示の際にチェックしています。{~~~画面表示時の通常処理~~~});まとめNode.js(Express.js)のWebアプリケーションにログイン画面を実装する方法を解説しました。一から実装するよりは簡単に作れるので試してみてください。オススメ記事ログイン認証以外にNode.jsのWebアプリケーションに入れておきたいセキュリティ設定はこちら。Node.js(Express.js)アプリケーションをWeb公開する際のセキュリティ設定Node.jsでブラウザ操作するPuppeteerの解説はこちら。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。USケネはじめまして、ケネです。Node.jsの技術情報を書いています。一人でも多くの方と「自分でもできた」感覚を共有したいので、なるべくわかりやすく、実体験ベースでのブログを心がけています。技術で自分の世界を広げましょう。不明点や質問があればお気軽にコメントください。