【プロゲート】Node.js Node.js VIの学習内容まとめ
Node.js VI
1.ユーザー登録機能を作ろう
ユーザー登録機能を作ろう
・このレッスンでは、Node.js学習コースVで作ったブログサイトにユーザー登録機能を追加する
・ユーザーの入力をチェックする方法や、パスワードを安全に取り扱う方法など、ユーザー登録機能に必要な処理について学んでいく
このレッスンで作るものを確認しよう
・今回のレッスンでは、この問題を解決しよう。3つの機能を作成する
レッスンの前半で作るもの
・レッスン前半では、わんこのブログサイトに「① ユーザー登録機能」を作成する
レッスンの後半で作るもの
・レッスン後半では、「② ユーザーの入力をチェックする機能」と「③ パスワードを安全に取り扱う機能」を作成する
2.ユーザー登録機能を作成する手順
ユーザー登録機能を作成する手順
・ユーザー登録機能を作成していく
・「STEP 01 ユーザー登録の画面を作成しよう」から始める
ユーザー登録画面を作成しよう
・まずは、作成するユーザー登録画面を確認しておく
・ユーザー登録画面にはユーザー名とメールアドレス、パスワードを入力するフォームを用意する
ユーザー登録画面を表示しよう
・localhost:3000/signupにアクセスしたときにユーザー登録画面を表示する
・ユーザー登録画面のビューファイルは、signup.ejsとする
ユーザー登録フォームを作成しよう
・ユーザー登録画面にはユーザー名とメールアドレス、パスワードを入力するフォームを用意する
ユーザー登録画面へのリンクを追加しよう
・ログインしていないとき、ヘッダーにユーザー登録画面へのリンクを表示する
3.ユーザー登録処理を作成しよう
ユーザー登録処理を作成しよう
・それでは「STEP 02 ユーザー登録の処理を作成しよう」に進む
ユーザー登録処理の流れを確認しよう
・まずは、ユーザー登録処理の流れを確認しておく
・この流れは、Node.js学習コースⅡでメモを追加したときと同じ
・今回は①〜③を一気に進めていく
ユーザー登録フォームの値を送信しよう
・ユーザー登録フォームからユーザー情報（ユーザー名、メールアドレス、パスワード）を送信する
・サーバー側でユーザー登録のルーティングを用意して、受け取ったユーザー情報を定数に代入する
ユーザーをデータベースへ追加しよう
・定数に代入したユーザー情報を、INSERTクエリを使ってusersテーブルに追加する
・usersテーブルのidにはAUTO INCREMENTを設定しているので、クエリの中でidの値を指定する必要はない
一覧画面へリダイレクトしよう
・ユーザーをデータベースへ追加できたら、一覧画面（/list）へリダイレクトする
4.ユーザー登録と同時にログインしよう
ユーザー登録と同時にログインしよう
・ユーザー登録のあと、ログイン画面からログインし直す必要があって不便
・登録したらそのままログインしている状態にできたら良い
・今回はこの問題を解決する
・Node.js学習コースⅤで学んだセッションを使えば、ユーザー登録と同時にログインすることができる
ユーザー名とユーザーIDをセッション情報に保存しよう
・Node.js学習コースⅤでユーザー認証後にログインした
・セッション情報にユーザーIDとユーザー名を保存した
・ユーザー登録と同時にログインするときも同じ
・新しいユーザーのユーザーIDとユーザー名をセッション情報に保存すれば、そのままログインできる
・ユーザー名は、ユーザー登録フォームから送信されたものを使う
・ユーザーIDを取得するには工夫が必要
ユーザーIDを取得しよう
・INSERTクエリが成功すると、特に設定しなくても、追加したレコードのidがresultsオブジェクトのinsertIdというプロパティに入ることになっている
・これが新しいユーザーのID
・セッション情報に保存する
5.入力値の空チェック機能を作成しよう
入力値の空チェック機能を作成しよう
・現状だとユーザー登録フォームが未入力（空の状態）でもユーザー登録できてしまう
・入力値の空チェックをする機能を作成して、未入力では登録できないようにする
・空の場合はエラーメッセージも表示する
作成する手順を確認しよう
・ユーザーの入力値が空かどうかをチェックする機能じゃが、今回はミドルウェア関数というものを使って作成する
・Expressを使ってWebアプリを開発する際には、ミドルウェア関数を理解しておくことが重要になる
・それを学ぶのに入力値の空チェックはとても良い機会
・今回は「STEP 01 ミドルウェア関数を学ぼう」について進めていく
ミドルウェア関数とは
・まずは復習から
・Node.js学習コースⅠで学んだように、クライアントの要求をリクエスト、サーバーの応答をレスポンスと呼ぶ
・Expressでは、このリクエストとレスポンスの間にサーバーが実行する関数のことをミドルウェア関数と呼ぶ
ミドルウェア関数の例
・実は、これまでルーティングに対応する処理を書いてきた関数が、ミドルウェア関数
・例えば、/signupのルーティングでユーザー登録の処理を書いた関数もミドルウェア関数になる
ミドルウェア関数を追加しよう
・リクエストを受け取ってからレスポンスを返す間に、複数のミドルウェア関数をつくることができる
・ここでは入力値の空チェックを行うミドルウェア関数を加えてみる
ミドルウェア関数の実行される順番を確認しよう
・ミドルウェア関数は、上から順番に実行される
・複数のミドルウェア関数があるときの処理の流れを、ターミナルに出力して確認しておく
6.ユーザー登録フォームの未入力を防ごう
ユーザー登録フォームの未入力を防ごう
・STEP 02に進む
・さっき用意したミドルウェア関数に、ユーザー登録フォームの入力値が空かどうかをチェックする処理を書いていく
・このようなデータをチェックする仕組みのことをバリデーションと呼ぶ
これから作るバリデーションを確認しよう
・今回は、ユーザー登録フォームに入力されたユーザー名とメールアドレス、パスワードが空かどうかをチェックする仕組み（バリデーション）を作る
・入力値が空の場合は、ユーザー登録へ進まないようにする
処理の流れを確認しよう
・ユーザー登録フォームの入力値が空かどうかは、「入力値の空チェック」を行うミドルウェア関数でチェックする
・空の場合は、ユーザー登録画面へもどるようにする
入力値が空かどうかを判定しよう
・まず、入力値の空チェックを行うミドルウェア関数の中で、ユーザー登録フォームの値が空かどうかをチェックする
・ユーザー名とパスワード、メールアドレスそれぞれについて、' '（空文字列）と比較する
エラーメッセージを配列に追加しよう
・ユーザー名などの入力値が空の場合、pushメソッドを使ってエラーメッセージを配列errorsに追加する
・ターミナルに出力してエラーメッセージを確認する
空かどうかで流れを分岐しよう
・入力値が空の場合、配列errorsの要素数は0より大きくなる
・この場合は、ユーザー登録画面へリダイレクトする
・空ではない場合は、next関数を実行してユーザー登録処理へ進む
7.エラーメッセージを表示しよう
エラーメッセージを表示しよう
・それでは、最後のSTEP 03に進む
・空で入力してしまったことにユーザーが気づけるように、さきほどターミナルで確認したエラーメッセージをユーザー登録画面に表示していく
エラーメッセージを渡そう
・入力値が空の場合に、エラーメッセージをユーザー登録画面に表示する
・まずは、ユーザー登録画面のビューファイル（signup.ejs）にエラーメッセージの入った配列errorsを渡す
エラーメッセージを表示しよう
・signup.ejsでは、forEachメソッドを用いて配列errorsに入ったエラーメッセージを表示する
空の配列を渡そう
・render関数を使ってsignup.ejsを表示する処理では、配列errorsを渡すことが必須となった
・ユーザー登録画面（/signup）のルーティングに対応する処理でも、同様にsignup.ejsを表示している
・ここでも配列errorsを渡す必要がある
・render関数に渡す配列errorsは空の配列とすれば良い
8.もう１つミドルウェア関数を追加しよう
もう１つミドルウェア関数を追加しよう
・ユーザーの二重登録を防ぐために、メールアドレスの重複をチェックするバリデーションも用意しよう
・今回は、このバリデーションの処理を書くミドルウェア関数を準備するところまで進める
これから作る処理の流れを確認しよう
・「メールアドレスの重複チェック」を行うミドルウェア関数が、「入力値の空チェック」と「ユーザー登録」の間で実行されるように準備していく
ミドルウェア関数を追加しよう
・ユーザー登録のためのルーティングに、メールアドレスの重複チェックを行うミドルウェア関数を追加する
ミドルウェア関数の実行される順番を確認しよう
・ユーザー登録時に3つのミドルウェア関数が実行されることになった
・これらの関数が実行される順番をターミナルに出力して確認しておく
9.メールアドレスの重複を防ごう
メールアドレスの重複を防ごう
・ミドルウェア関数の中で、メールアドレスの重複をチェックしていく
・重複がある場合はエラーメッセージを表示する
処理の流れを確認しよう
・メールアドレスの重複がある場合は、ユーザー登録画面へエラーメッセージを渡すようにしていく
・重複がない場合は、ユーザー登録処理へ進むようにしていく
メールアドレスの重複を調べよう
・ユーザー登録フォームから受け取ったメールアドレスが、usersテーブルに登録されているか検索しよう
・すでに登録されている場合は、メールアドレスが重複していることになる
重複しているかどうかで流れを分岐しよう
・メールアドレスの重複がある場合は、配列errorsをユーザー登録画面へ渡そう
・重複がない場合は、ユーザー登録のミドルウェア関数へ進む
10.パスワードの安全な取り扱い方を学ぼう
パスワードの安全な取り扱い方を学ぼう
・レッスンの最後に、ユーザー登録機能に大切な機能を追加する
・これまでは、ユーザーが入力した文字列をそのままパスワードとして保存してきた
・もしそのパスワードが流出して第三者に知られてしまうと、不正にログインされる危険がある
・パスワードは安全に取り扱う必要がある
・今回はその方法について学んでいく
パスワードの安全な取り扱い方を学ぼう
・パスワードが複雑な文字列になっている
・これはninjaという普通の文字列のパスワードをハッシュ値という特別な文字列にしたもの
・ハッシュ値を見ただけだと、もとのパスワードがninjaだったなんて全然分からない
・だからこそハッシュ値は安全性が高い
・万が一、流出してしまっても、もとのパスワードが分からなければ不正ログインは難しくなる
・さっそく、パスワードをハッシュ値に変える（ハッシュ化する）準備を進めていく
bcryptパッケージ
・パスワードのハッシュ化には、bcrypt（ビークリプト）というパッケージを用いることにする
・bcryptパッケージは、普通の文字列のパスワードをハッシュ化して、安全性の高いパスワードを作るのに広く使われる
bcryptパッケージのインストールと準備
・npm installコマンドを使って、bcryptパッケージをインストールしよう
・app.jsではbcryptパッケージを読み込み、定数bcryptに代入する
11.パスワードのハッシュ化を導入しよう
パスワードのハッシュ化を導入しよう
・今回は、「STEP 01 ユーザー登録時にパスワードをハッシュ化する」を進める
hashメソッド
・パスワードをハッシュ化するには、bcryptパッケージのhashメソッドを用いる
・第1引数に普通の文字列のパスワードを与えると、コールバック関数の引数hashから、ハッシュ化されたパスワードを取得できる
データベースに追加する
・ハッシュ化されたパスワードをusersテーブルのpasswordカラムに追加する
12.ハッシュ化されたパスワードでログインしよう
ハッシュ化されたパスワードでログインしよう
・パスワードをハッシュ化することはできたが...そのパスワードでログインができない
・「STEP 02 ハッシュ化されたパスワードでログインする」を進めて、この問題を解決していこう
パスワードを比較しよう
・ユーザーの入力した普通の文字列のパスワードと、データベース上のハッシュ化されたパスワードを比較するにはbcryptパッケージのcompareメソッドを使う
・普通の文字列のパスワードはメソッド内部でハッシュ化される
比較した結果によって処理を変えよう
・パスワードが一致している場合、isEqualはtrueになる
・この場合は、ログイン処理を行う
・パスワードが一致していない場合は、ログイン画面へリダイレクトする
その他：参考サイトリンク（progateの内容ではありません）
nvm(Node Version Manager）公式ページ
この記事が気に入ったらサポートをしてみませんか？