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

position:fixedを実現するiScrollを使う際に覚えておきたいメソッドたちposition:fixedを実現するiScrollを使う際に覚えておきたいメソッドたち

ヘッダーやフッター等の要素を固定表示するのに利用されるposition:fixed。このposition:fixedがサポートされていない環境で、固定表示を実現する際によく使われるライブラリにiScrollがあります。要素を固定するというよりは、特定要素の範囲をスクロール可能にする、overflow:autoのようなイメージです。 複雑なレイアウトになると、iScrollでスクロールさせている要素の高さが動的に変化したり、スクロール領域が入れ子だったり・・・ユーザ操作に応じて追加の処理を行う必要があります。難しそうなレイアウトは設計の際に回避したいところですが、そういう実装が必要な場合に使えるiScrollのメソッドをまとめてみました。 iScrollの使い方 iScrollの使い方ですが、HTML要素に任意のIDを付け、JSで初期化を行います。下記の例ではid=”scroller”の要素がスクロール可能になります。例でリスト要素になっている部分は何でもかまいませんが、2つのwrapper(例ではIDがwrapperとscrollerのdiv要素)は必要です。また、一番外側の要素には高さを指定しておく必要があります。 ◆HTML <div id=”wrapper”><div id=”scroller”><ul><li></li>……</ul></div></div>

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[後編]

本記事はParse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]の後編です。前編では、Parseの管理画面と、JavaScript SDKのうちBackbone.jsをベースとしている部分とCollectionの生成に必要となるデータの取得方法をご紹介しました。後編では引き続き、ParseのJavaScript SDKの機能として以下の3つをご紹介いたします。 Parse.User: アカウント管理 Parse.File: 画像をはじめとしたファイルのアップロード処理等 Parse.Promise: Defferedの仕組み Parse.GeoPoint: 位置情報 Parse.User

主要なモバイルUIフレームワークを比較してみました主要なモバイルUIフレームワークを比較してみました

WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。 調査対象フレームワークの概要 対応環境 主要UIコンポーネント その他(CSS,MVCフレームワーク統合有無など) 特徴 調査対象フレームワークの概要  以下6つのフレームワークを対象に調査を行いました。