Kii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装する

本記事は、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を使ってご紹介しました。次回は実際にデータを保存する際に使用する「オブジェクトの作成」について解説したいと思います。

Related Post

Gruntで快適な環境を整備したい!【タスク記述編】Gruntで快適な環境を整備したい!【タスク記述編】

『Gruntで快適な環境を整備したい!【インストール編】』に引き続き、タスクの自動化ツールであるGruntを使ってみます。今回はタスク記述編ということで、様々なタスクを書いてみます 今回したいこと 今回は以下のタスクを書いてみたいと思います。タスクはGruntfile.jsに書きます。ベースとなるコードは前回の記事『Gruntで快適な環境を整備したい!【インストール編】』の「Gruntfile.jsを作成する」をご覧ください。 タスクの中身は基本的に、処理対象となるファイルやフォルダのパスと処理後のパスで構成されています。ファイルパスの書き方には「コンパクト形式」「ファイルオブジェクト形式」「ファイル配列形式」があります。Gruntのドキュメントを日本語化してくださっているサイトがありますので、こちらを参考にしてください。プラグインによってはサポートしていない形式があるようですので、どのプラグインがどの形式をサポートしているかは各プラグインのドキュメントを参照してください。 ■ファイル、フォルダの複製 ファイル、フォルダの複製にはgrunt-contrib-copyを使います。納品用に必要なファイルをすべてbuildフォルダ下にコピーしてみます。   copy: {    dist:

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]

Kii Cloudは、MBaaSと呼ばれるクラウドサービスのひとつで、モバイルアプリの開発で共通して必要となるサーバ側の機能が提供されています。BaaSを使ったフロントエンド開発は、Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]でもご紹介しました。 MBaaS – Kii Cloud キークラウド Kii CloudもParseと同じく、ユーザー管理やデータ管理など、アプリケーション開発に必要な一連の機能が用意されており、SDKやREST