チュートリアル

ECHOPFをバックグラウンドにした会員制サイトを作ろう(その3:会員情報編集)

コンテンツへのアクセス制限をするためにログイン認証させる仕組みはよく使われます。しかしデータベースを用意したり、セキュアに認証システムを提供するには様々な用意が必要です。そんな手間を減らすべく、ECHOPFを認証システムとして使ってみましょう。

作るもの

このチュートリアルではJavaScript SDKを使って、Node.jsでExpressサーバでシステムを作ります。そして3回に分けて会員登録、ログインとログアウト、そして会員情報の編集という機能を実装します。前回はログインおよびログアウトの実装方法を紹介しました。3回目となる今回は会員情報を編集する処理について解説します。

必要なもの

Node.js

Node.jsはサーバサイド、ローカルコンピュータ上で動作するJavaScriptエンジンになります。Node.jsを使うことでJavaScriptを使ってWebアプリケーションであったり、ローカルコンピュータ上で動作するソフトウェアが開発できるようになります。

ダウンロードはNode.jsの公式プロジェクトサイトから行えます。インストーラーを実行するだけで完了します。

会員情報の表示

ログイン処理で行ったように、会員情報はJSON Web Tokenの中に入っています。会員情報の変更処理は、まずこの情報を表示するところからはじまります。 GET /users/edit にアクセスした時に、名前とメールアドレスを表示します。

const getCurrentUser = (req) => {
  try {
    const token = req.cookies.token;
    const user = jwt.verify(token, config.secret);
    return user;
  } catch(err) {
    return false;
  }
}

router.get('/edit', (req, res, next) => {
  const user = getCurrentUser(req);
  if (user) {
    res.render('users/edit', {user});
  } else {
    res.clearCookie('token');
    return res.redirect('/');
  }
});

会員情報の解析処理は会員情報更新時にも使いますので、 getCurrentUser という関数にしておきます。この関数はCookieに入っているトークンを取り出し、JSON Web Tokenを生成する際に使ったシークレット config.secret を使って確認処理 jwt.verify を行います。もしJSON Web Tokenが改ざんされている場合にはエラーが発生します。

JSON Web Tokenから会員情報が取り出せている場合、それを表示します。これは views/users/edit.jade になります。

extends ../layout

block content
  div.row.justify-content-md-center
    div.col-md-auto
      h2 会員情報を更新してください
        :
      form(action="/users/me",method="post")
        input(type="hidden",name="_method",value="put")
        div.form-group
          label(for=inputName) 名前
          input.form-control(type="text",name="name",placeholder="名前",value=user.name)
        div.form-group
          label(for=inputEmail) メールアドレス
          input.form-control(type="email",name="email",placeholder="メールアドレス",value=user.email)
        button.btn.btn-primary(type="submit") 登録

会員情報の更新

会員情報を更新するのは PUT /users/me になります。この処理は以下のステップで処理されます。

  1. JSON Web Tokenの確認
  2. 既存情報の取得
  3. 会員情報の更新

1. JSON Web Tokenの確認

これは表示する処理と変わりません。ただし、会員情報を更新する際には、正しいアクセストークンを設定してパーミッションを解決する必要があります。そのために使うのがaccessTokenで、 ECHOPF.accessToken に対して適用します。これでログインした直後と同じように認証された状態になります。

const currentUser = getCurrentUser(req);
if (!currentUser) {
} else {
  res.clearCookie('token');
  return res.redirect('/');
}
ECHOPF.accessToken = currentUser.accessToken;

2. 既存情報の取得

既存の会員情報を取得します。これによってアクセストークンの有効確認もできます。特定の会員情報を取得するときには ECHOPF.Members でメンバーオブジェクトを生成します。この時、会員ID refId を指定し、 fetch メソッドでデータを取得します。

const member = new ECHOPF.Members
  .MemberObject('member', currentUser.refId);
member
  .fetch()
  .then(user => {
    // : 後述
  });

3. 会員情報の更新

会員情報の更新はデータの作成と変わりません。 put メソッドでデータを更新し、 push メソッドで編集内容を反映します。

user
  .put('contents', {
    name: req.body.name,
    email: req.body.email
  })
return user.push();

JSON Web Tokenを更新する

更新処理が完了したら、Cookieの中にあるJSON Web Tokenを更新します。注意点として、更新された会員情報にはアクセストークンは含まれません。空のアクセストークンを適用してしまうとログアウトと変わらない状態になりますので注意してください。

const json = {
  accessToken: currentUser.accessToken,
  refId: user.refid,
  login_id: user.get('login_id'),
  name: user.get('contents').name,
  email: user.get('contents').email
}
var token = jwt.sign(json, config.secret, {
  expiresIn: '1h'
});
res.cookie('token', token);

管理画面で確認する

では実際に更新できているかどうか、管理画面で確認しましょう。アクセストークンを指定することで、未ログイン状態では利用できない機能も使えるようになります。

まとめ

ここまでの実装で会員の新規登録からログイン/ログアウト、そして会員情報編集までの実装が完了しました。ECHOPFを使うことで、バックエンドで認証が実現できます。JSON Web Tokenを使えばセッション管理にデータベースを用意する必要もありません。アプリケーションサーバだけであればスケーリングも容易です。

ここまでの実装はechopfcom/Echopf_Member at v3にアップロードしてあります。実装時の参考にしてください。