Part7:セッション管理

海未「では、前回までに作ったアプリケーションに、ユーザ認証の機能を追加してみます」
穂乃果「いよいよ本格的になってくるねっ!」

海未「仕様は」

  • グループ登録画面に入るために認証が必要
    • ログインされていればそのままグループ登録画面を表示
    • ログインされていなければログイン画面を表示
  • ユーザ登録はログイン画面から行える

海未「こんなところでいいでしょう。では、必要なモジュールを追加します」

$ npm install express-session –save
$ npm install connect-mongo –save

海未「セッション管理を行うモジュールexpress-sessionと、セッション情報をMongoDBに保存するためのconnect-mongoを使います」

海未「セッション管理の基本設定をしましょう。app.jsに書き足します」

海未「8~9行目ではモジュールの読み込みを行います。connect-mongoについては、セッションを渡すとそれをMongoDBで管理するためのオブジェクトを返します」

海未「28行目以降が、セッション管理機能をアプリに組み込む部分です」
ことり「いろんな設定が、あるみたいだけど・・・」
海未「secretは、cookieの暗号化に使われる文字列です。誰かに見られるものではありませんから、何を指定しても構いません」
ことり「ふーん、やっぱり海未ちゃん、誰にも見られないところでは『あなたのハート撃ち抜くぞ♡ばーん』とかやってるんだ♪」
海未「・・・っ!」
穂乃果「海未ちゃんの自爆芸も板についてきたね・・・」

海未「saveUninitializedresaveは、一般的にはfalseでいいでしょう。セッションの保存タイミングを制御するものです」

海未「storeがMongoDBの設定です。URLはこれまで通り、clear_intervalは、セッションの有効期間です。ここでは1時間にしていますが、運用に合わせて適宜変更するといいでしょう」

海未「cookieはcookie関係の設定ですが、httpOnlytrueにすることで、HTTP接続の場合のみcookieにアクセスできるようにしています。maxAgeはcookieの有効期間で、これも1時間にしています」
穂乃果「この有効期間、単位どうなってるの?」
海未「clear_intervalは秒、maxAgeはミリ秒です。似たような設定でも単位が違うのでややこしいですね」

海未「これで設定は完了です。では、ログイン画面を作りましょう。views/login.jadeにフォームを2つ実装します」

ことり「この画面でログインと登録両方できるんだ」
海未「分けてもいいのですが、特に複雑なわけでもないので1画面で十分かと」

海未「今までのグループに加えて、ユーザという新しいデータを扱うことになりました。モデルを追加しましょう」

海未「UserSchemaを追加しました。パスワードは平文保存ですが、今はいいでしょう」
ことり「本番では、ダメ、絶対」

海未「では、/adduser/loginのコントローラを実装していきます。まずはroutes/adduser.jsから」

海未「やっていることはグループの登録と同じですから、説明は割愛しますね」

海未「次に、ログイン処理をroutes/login.jsに実装します」

海未「GETの処理はログイン画面を表示するだけですからいいでしょう。問題はPOSTの方です」
穂乃果「最初はわかるよ。リクエストパラメータからユーザ名とパスワードを取り出して、えーとそれから・・・」
海未「そこから先はDBへのアクセスです。合致するデータがDBにあるかを検索しています」
ことり「User.findかな?」
海未「そうです。findroutes/index.jsにも出てきましたが、ここでは第1引数は検索条件、第2引数にコールバック関数を取ります」
ことり「え~っと、検索結果が空だったらログイン画面、ヒットしたらグループ登録画面かな」
海未「はい。その際に、セッション情報にユーザ名を書き込んでいます」

海未「では、グループ登録画面にログイン判定を実装しましょう。routes/add.jsを」

海未「sessionCheck関数で、セッション情報にユーザ名があるかないかをチェックして、なければログイン画面を表示しています」
穂乃果「そのsessionCheckは、ええと・・・getで呼んでるのかな」
海未「getpostは第2引数に関数を渡すと、前処理を行うことができます。それを利用して、リクエストの処理前にチェック処理を入れています」

海未「最後に、グループ登録画面にユーザ名を表示してみましょう。さきほどのadd.jsuserパラメータを追加しましたから」

海未「こんな感じでしょう」
穂乃果「これでできあがり?」
海未「はい。実際に動かしてみてください」
穂乃果「えーと、グループ登録画面に行こうすとるとログイン画面が表示されて・・・」
ことり「登録してからログインすると、グループ登録画面に行けて、名前が表示されてる!」
海未「セッション管理というと難しそうなイメージがありますが、基本的なところはそう難しくなく実装できますね」


穂乃果「さて海未ちゃん、これ何回目の中締め?」
海未「JavaScript関係はネタが尽きませんから・・・そのうちAngularJSとかTypeScriptとかやりはじめるかもしれません」
ことり「じゃあまたきっと、この3人で集まれるよね♪」
穂乃果「もっちろん! それじゃ、今回もお相手は高坂穂乃果とっ!」
ことり「南ことりと♪」
海未「園田海未でした♡」
3人「「「まったねーっ!!」」」


LINEで送る
Pocket


返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です