チュートリアル
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を設定します。これで未登録ユーザはデータの追加が可能で、ログインした会員は編集、削除が可能になります。
- すべてのメンバーに一覧表示、個別表示、追加の権限を付ける
- 会員インスタンスに対して一覧表示、個別表示、編集、削除
また、新規登録時のステータスを有効にしておきます。これで新規登録完了時に有効な会員としてデータができあがります。
メール設定
ここは要件によりますが、ECHOPFでは会員登録完了時などにメール送信を行う機能があります。登録完了メールは会員向けや管理者向けに送信できます。
APIの作成
次にECHOPFを外部から操作するためのAPIを作成します。設定のAPIアプリケーション管理を選択します。
アプリケーション名は自由ですが、今回はAuthとします。
できあがるとアプリケーションID(X-ECHO-APP-ID)とアプリケーションキー(X-ECHO-APP-KEY)が取得できます。これは後ほど使います。
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はこちらからダウンロードできます。
なお、このチュートリアルは作成時点での最新版である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にリネームしてお使いください)。