本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。
※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。
アカウント登録
アカウント登録やログイン機能の実装には、KiiUser オブジェクトを使います。ユーザー作成用のメソッドが1つ用意されているわけではなく、ユーザー名やメールアドレスなど、ユーザーの認証を行うIDの種類によって異なるメソッドが提供されています。
- userWithUsername : ユーザー名、パスワード
- userWithEmailAddressAndUsername : ユーザー名、パスワード、メールアドレス
- userWithPhoneNumberAndUsername : ユーザー名、パスワード、電話番号
- userWithEmailAddress : メールアドレス、パスワード
- userWithPhoneNumber : 電話番号とパスワード
今回はユーザー名を使います。非同期処理をすっきり書くために、[準備編]でご紹介したオリジナルのユーティリティ関数kiiPromiseを利用します。
/*** ユーザー名とパスワードを使ってユーザーを作成する */function userWithUsername(username, password) { var d = $.Deferred(); try { // KiiUserオブジェクトを作成 var user = KiiUser.userWithUsername(username, password); }catch(e){ // userWithUsernameの引数に無効な値が渡された場合、Exception が発生する。return d.reject(e.message); } // Kii Cloudに登録する return kiiPromise(user.register, user); } |
ユーザーを作成する際に、関数の引数に無効な値が渡された場合(例えば、パスワードに空文字列を設定するなど)Exceptionが発生するので、エラー処理が必要です。
var username = "hiromitsuuuuu"; var password = "xxxxx"; userWithUsername(username, password). then(showSuccess, showError); function showSuccess(theUser) { // ユーザー作成成功} function showError(theUser, errorString) { // ユーザー作成失敗} |
ユーザー作成が成功すると、データブラウザーのUsersに新規作成したユーザーが追加されます。
Display NameやCountryといった属性は、既定フィールドとしてあらかじめ定義されています。独自のフィールドを追加することもできます。独自フィールドはCustom AttributesとしてUser details内にJSON形式で表示されます。
ログイン
ログイン用のメソッドは、ユーザー作成ほど種類は多くありません。ユーザー作成時に指定したID(ユーザー名もしくはメールアドレス、電話番号)でログインするか、アクセストークンでログインするかを選択することができます。
- authenticate : パスワードでのログイン
- authenticateWithToken : アクセストークンでのログイン
アクセストークンを用いたログインを行うためには、ログイン成功後にアクセストークンをローカルストレージに保存しておく必要があります。以下はパスワードによるログインの例です。
/*** パスワードによるログイン */function authenticate(userIdentifier, password) { return kiiPromise(function (callbacks) {KiiUser.authenticate(userIdentifier, password, callbacks) ;}); } |
var userIdentifier = "hiromitsuuuuu"; var password = "xxxxx"; var storageId = "todoAppSample"; authenticate(userIdentifier, password). then(function(user){ // アクセストークンをローカルストレージに保存しておく。 return saveAccessToken(user, storageId);}). then(showSuccess, showError); /*** アクセストークンをローカルストレージに保存する */function saveAccessToken(user, storageId) { var d = $.Deferred(); // KiiUserオブジェクトからアクセストークンを取得 var token = user.getAccessToken(); // ローカルストレージに保存 localStorage.setItem(storageId, token); return d.resolve(user); } |
ログイン後は、ローカルストレージに保存したアクセストークンを使います。このトークンはログアウト時やパスワードの変更時にローカルストレージから削除する必要があります。
まとめ
今回は、アプリケーション開発時に必要となる「アカウント登録」と「ログイン」機能の実装方法を、[準備編]でご紹介したオリジナルのユーティリティ関数kiiPromiseを使ってご紹介しました。次回は実際にデータを保存する際に使用する「オブジェクトの作成」について解説したいと思います。