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

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

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

ドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポートドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポート

5月7日、弊社のドットDNPにてゴールデンウィークのスペシャルイベント「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」が開催されました。 株式会社ミツエーリンクスの木達一仁さんと、株式会社Gaji-Laboの山岸ひとみさんをお招きし、Webデザインにおけるアクセシビリティの取り組みと、サービスとしての読書体験についてそれぞれ講演いただきました。本記事では、その内容を抜粋してご紹介致します。 Webデザインにおけるアクセシビリティへの取組み 読書体験を考える ――サービスとしての読書体験 トークセッション セミナーを終えて Webデザインにおけるアクセシビリティへの取組み

フォントの機能を使えるCSS3のFont feature settingsとはフォントの機能を使えるCSS3のFont feature settingsとは

CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。 Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable