CodeZine(コードジン)

特集ページ一覧

Monacaで作るHTML5/JavaScriptでのハイブリットモバイルアプリ(その2)

目指せ、定時退社! スマートなエンジニアのためのお役立ちツール(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/03/18 14:00
目次

ログイン認証機能

 それでは、前回作成した次の画面に、ログイン認証機能を実装していきましょう。

 まず、認証画面(login.html)を次のように作成します。

認証画面(login.htmlの抜粋)
<body>
<div id="loginPage" data-role="page" data-theme="b">
  <div data-role="header" data-position="fixed">
    ~中略~
  </div>
  <div role="main" class="ui-content">  
    <div class="ui-field-contain">
      <label for="username">ID:</label>
      <input type="text" id="username">
    </div>
    <div class="ui-field-contain">
      <label for="password">パスワード:</label>
      <input type="password" id="password">
    </div>
    <div class="ui-field-contain">
      <button id="loginBtn" class="ui-btn">ログイン</button>
      <button id="cancelBtn" class="ui-btn">キャンセル</button>
    </div>
  </div>
  <div data-role="footer" data-position="fixed">
    ~中略~
  </div>
</div>
</body>

 次に、ログインボタンを押すと実行される認証処理を記述するためのJavaScriptのファイル(app.js)をjsフォルダの配下に作成します。

認証処理の実装(app.jsの抜粋)
$(function(){
  $(document).on('click', '#loginBtn', function(){

    // 1. 変数の定義
    var MC = monaca.cloud;
    var id = $('#username').val();
    var pass = $('#password').val();

    // 2. Monacaバックエンドの認証を行う
    MC.User.login(id, pass)
    
    // 3. 認証成功
    .done(function(){
      MC.User.getProperty("address")
      .done(function(result){
         console.log(result);
      })
      .fail(function(err){
         console.log(err);
      })
      monaca.pushPage("success.html");
    })
  
    // 4. 認証失敗
    .fail(function(err){
      alert('認証失敗');
    });
  });

 プログラムの説明をします。

1.変数定義

 変数MCにMonacaバックエンドを使用するためのオブジェクトを定義します。認証に使うユーザ名とパスワードは、画面から入力された値を取得します。例えば$("#username").val()で画面に配置されたid属性がusernameの要素の値を取得できます。

2.Monacaバックエンドの認証を行う

 ログイン認証は、Monacaバックエンドのmonaca.cloud.User.login()を使用します。引数には、画面から取得したusernameとpasswordを指定します。

3.認証成功

 ユーザ名とパスワードが一致したら、pushPageメソッドで成功画面(success.html)に遷移します。

 このdone()はコールバック関数で、認証処理が正しく完了したときに実行されます。認証に成功したら、登録済みのroleやaddressなどのユーザ属性を取得することもできます。ユーザ属性を取得するには、getPropertyメソッドまたはgetPropertiesメソッドを使います。サンプルでは、getPropertyメソッドを使って、ユーザ属性であるaddressの値をコンソールログに出力しています。ユーザ情報をまとめて複数取得するときは、getPropertiesメソッドを使います。

4.認証失敗

 何らかの理由で認証に失敗したら、アラートを表示します。そのときは、失敗時のコールバック関数であるfail()にアラートを表示する命令を書きます。ほかにも、認証に成功または失敗のいずれかが返ってきたときに、always()が実行されます。

[Note]Monacaでの画面遷移

 Monacaでは、通常のWebアプリのように画面遷移を行うためのpushPageメソッドのほかにも、トップ画面(index.html)や1つ前のページに戻るAPIなどが用意されています。詳細については以下のドキュメントを参照してください。
 

ユーザ登録機能

 Monacaバックエンドの機能は、値を参照するだけでなく、アプリから登録することも可能です。ここでは、ユーザ登録機能を作ってみます。画面や処理部分のコードはさきほどのログイン認証とほぼ同じなので、詳細についてはサンプルを参照してください。

 バックエンド機能を使った登録処理を行うには、次のようなコードを書きます。

ユーザ登録処理の実装(app.jsの抜粋)
$(function(){
~中略~
  $(document).on('click', '#registerBtn', function(){
~中略~
    // 1. Monacaバックエンドの登録処理を行う
    MC.User.register( username , password,
                      {"address": address ,
                      "role": role,
                      "zip": zip })
    // 2. 登録成功
    .done(function(result){
        monaca.pushPage('success.html');
    })
    // 3. 登録失敗
    .fail(function(err){
        alert("登録失敗");
    });
  });
});

 プログラムの説明をします。

1.Monacaバックエンドの登録を行う

 ユーザ登録は、Monacaバックエンドのmonaca.cloud.User.registerメソッドを使用します。引数には、画面から取得したusernameとpasswordを指定し、残りの属性はJSON形式で指定します。

2.登録成功

 ユーザ名とパスワードが一致したら、成功画面(success.html)に遷移します。

 このdone()はコールバック関数で、認証処理が正しく完了したときに実行されます。

3.登録失敗

 何らかの理由で登録に失敗したら、アラートを表示します。そのときは、失敗時のコールバック関数であるfail()にアラートを表示する命令を書きます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:目指せ、定時退社! スマートなエンジニアのためのお役立ちツール

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5