本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。
※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。
アカウント登録
アカウント登録やログイン機能の実装には、KiiUser オブジェクトを使います。ユーザー作成用のメソッドが１つ用意されているわけではなく、ユーザー名やメールアドレスなど、ユーザーの認証を行う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を使ってご紹介しました。次回は実際にデータを保存する際に使用する「オブジェクトの作成」について解説したいと思います。
