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


本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。
※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。

アカウント登録

kii007
アカウント登録やログイン機能の実装には、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に新規作成したユーザーが追加されます。
kii006

Display NameやCountryといった属性は、既定フィールドとしてあらかじめ定義されています。独自のフィールドを追加することもできます。独自フィールドはCustom AttributesとしてUser details内にJSON形式で表示されます。

ログイン

kii005
ログイン用のメソッドは、ユーザー作成ほど種類は多くありません。ユーザー作成時に指定した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を使ってご紹介しました。次回は実際にデータを保存する際に使用する「オブジェクトの作成」について解説したいと思います。

参考

【Kii cloud リファレンスガイド】ユーザー作成
【Kii cloud リファレンスガイド】ログイン