チュートリアル

ECHOPFをバックグラウンドにした会員制サイトを作ろう(その1:会員登録)

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

作るもの

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

必要なもの

Node.js

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

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

管理画面での準備

インスタンスの作成

まずECHOPFの管理画面でインスタンスを作成します。

インスタンスの作成

インスタンスはメンバーインスタンスです。

メンバーインスタンス

今回は以下の情報で作成します。

名前内容
インスタンス名 会員
インスタンスID member

作成するとインスタンス一覧に会員インスタンスが表示されます。

インスタンス一覧

ACLの設定

次に会員インスタンスのACLを設定します。これで未登録ユーザはデータの追加が可能で、ログインした会員は編集、削除が可能になります。

  • すべてのメンバーに一覧表示、個別表示、追加の権限を付ける
  • 会員インスタンスに対して一覧表示、個別表示、編集、削除

ACL設定

また、新規登録時のステータスを有効にしておきます。これで新規登録完了時に有効な会員としてデータができあがります。

新規登録時のステータスを設定

メール設定

ここは要件によりますが、ECHOPFでは会員登録完了時などにメール送信を行う機能があります。登録完了メールは会員向けや管理者向けに送信できます。

メール送信設定

APIの作成

次にECHOPFを外部から操作するためのAPIを作成します。設定のAPIアプリケーション管理を選択します。

APIアプリケーション管理

アプリケーション名は自由ですが、今回はAuthとします。

アプリケーション名を設定

できあがるとアプリケーションID(X-ECHO-APP-ID)とアプリケーションキー(X-ECHO-APP-KEY)が取得できます。これは後ほど使います。

アプリケーションIDとアプリケーションキー

Expressのベースを生成する

ExpressはNode.jsのWebアプリケーションフレームワークです。npmを使ってベースになるコードを生成できます。

npm install express-generator -g

インストールが終わると express コマンドが使えるようになります。

express echopf-member-site

ディレクトリが生成されますので、その中に移動して必要なライブラリをインストールします。

cd echopf-member-site
npm install

これで準備が完了です。

ECHOPFのJavaScript SDKを用意する

JavaScript SDKはこちらからダウンロードできます。

JavaScript SDK

なお、このチュートリアルは作成時点での最新版である1.2.6に対応しています。ファイルをダウンロードしたら解凍し、解凍したフォルダの中にある ECHO.min.js をechopf-member-siteフォルダの中に入れておきます。

ライブラリの用意

今回はUIライブラリとしてBootstrapを使います。まずBowerをインストールします。

npm install bower

次に .bowerrc を作成します。内容は次の通りです。このファイルでBowerでのライブラリインストール先を指定します。

{
  "directory": "public/vendors"
}

ファイルを作成したらBootstrapをインストールします。

bower install bootstrap

会員登録画面

まず会員登録画面を用意します。これは /users/new でアクセスされることとします。これは routes/users.js に実装します。初期は以下のような表示になっています。

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

ここに GET /users/new でアクセスするルーティングを追加します。 users.js 自体が /users/ 以下のルーティングを処理しますので、 /new で定義すれば問題ありません。

router.get('/new', (req, res, next) => {
    res.render('users/new');
});

表示するページは views/users/new.jade で用意します。構文は拡張子の通りJade(現在はPug)で記述します。エラー(error)について後述しますが、エラー時のメッセージを表示する部分になります。他は名前、ログインID、メールアドレス、パスワードなどを入力してもらいます。クラスはBootstrapに合わせています。

extends ../layout

block content
  div.row.justify-content-md-center
    div.col-md-auto
      h2 会員登録してください
      if error
        div.alert.alert-warning
          span= error.message
          if error.details
            ul
              each val, key in error.details
                li #{key} : #{val.message}
      form(action="/users",method="post")
        div.form-group
          label(for=inputName) 名前
          input.form-control(type="text",name="name",placeholder="名前")
        div.form-group
          label(for=inputLoginId) ログインID
          input.form-control(type="text",name="login_id",placeholder="ログインID")
        div.form-group
          label(for=inputEmail) メールアドレス
          input.form-control(type="email",name="email",placeholder="メールアドレス")
        div.form-group
          label(for=inputPassword) パスワード
          input.form-control(type="password",name="password")
        div.form-group
          label(for=inputPasswordConfirmation) パスワード(確認入力)
          input.form-control(type="password",name="password_confirmation")
        button.btn.btn-primary(type="submit") 登録

サーバを立ち上げて http://localhost:3000/users/new にアクセスすると、会員登録画面が表示されます。

会員登録フォーム

登録処理

会員登録フォームに入力して、フォーム送信を行う処理を作成します。上記のJadeテンプレートしてフォームのアクション先を POST /users としています。このイベントは routes/users.js で実行されます。

router.post('/', (req, res, next) => {
    // この中に処理を記述
});

ECHOPFの初期化

まず ECHOPF オブジェクトを定義するところからはじめます。プロジェクトルートに config.json というファイルを作成します。内容は次のようになります。作成したECHOPFのドメイン、APIのアプリケーションID、アプリケーションキーをそれぞれ記述します。

{
    "accountDomain": "YOUR.echopf.com",
    "applicationId": "YOUR_APPLICATION_ID",
    "applicationKey": "YOUR_APPLICATION_KEY"
}

この設定ファイルを routes/users.js で読み込み、ECHOPFを初期化します。

const ECHOPF = require('../ECHO.min');
const config = require('../config');

ECHOPF.initialize(
    config.accountDomain,
    config.applicationId,
    config.applicationKey
);

パスワードの入力チェック

今回は簡易的な入力チェックとして、パスワードの一致を見ます。異なっていたらエラーメッセージを返して終了します。

router.post('/', (req, res, next) => {
    const params = req.body;
    if (params.password !== params.password_confirmation) {
        return res.render('users/new', {
            error: 'パスワードが一致しません'
        });
    }
});

会員オブジェクトの作成

入力チェックが終わったら会員オブジェクトを作成します。これは以下のように記述します。 member というのはインスタンスIDになります。

const member = new ECHOPF.Members.MemberObject('member');

そして必要なデータをセットします。

member.put('login_id', params.login_id);
member.put('password', params.password);
member.put('contents', {
    name: params.name,
    email: params.email
});

会員オブジェクトの保存

保存は push メソッドを使います。これはPromiseオブジェクトを返しますので、結果を then メソッドで受け取れます。一つ目の引数は正常終了時、二つ目の引数は異常終了時に呼ばれます。

member
    .push()
    .then((result) => {
        res.redirect('/users/success');
    }, (err) => {
        res.render('users/new', {
            error: err
        });
    });

正常終了時には GET /users/success を呼びます。これは二重処理を防止するためです。

正常終了時の処理

会員登録が問題なく完了したら、登録完了したというページを表示して終了です。

会員登録完了

さらにメール設定を行っておけば、会員登録完了したというメールが送られてくるでしょう。

会員登録完了メール

記載されたURLをクリックすればメールアドレスの確認も完了します。

メールアドレス確認完了

エラー時

エラーが発生した時にはエラーオブジェクトが返ってきます。内容は次のようになっています。これはユニーク制約にかかった場合のエラーです。detailsというキーに対して、エラーが起きたフィールドとその内容が記載されます。

{[ECHO.Error: Validation errors occurred.]
    code: 150000,
    message: 'Validation errors occurred.',
    details: {
        login_id: {
            [ECHO.Error: Non unique.]
            code: 150040,
            message: 'Non unique.',
            details: {}
        }
    }
}

これを表示するのが先ほどJadeファイルに記述していた内容になります。

if error
  div.alert.alert-warning
    span= error.message
    if error.details
      ul
        each val, key in error.details
          li #{key} : #{val.message}

まとめ

ここまでの内容で会員登録処理が完了しました。次回はログイン/ログアウト処理の実装について紹介します。

なお、ここまでのコードはechopfcom/Echopf_Member at v1にアップロードしてあります。実装時の参考にしてください(config.example.jsonをconfig.jsonにリネームしてお使いください)。