JQuery Mobile - ユーザーログインのベストプラクティス

Question

ユーザー認証が必要な既存のWebアプリケーション用にJQuery Mobileとモバイルインターフェイスを構築しており、ログインプロセスを実装するための最良の方法には納得できません。

私はサーバー側の認証についてそれほど心配していませんが、ユーザー側で実装する方法を心配していません。いくつかの実験の後

は、オプションであることを思わ：

1. 標準フォームのPOST \リダイレクトを提出：、data-ajax="false"
   -User提出すると
   を無効化 - 自動アヤックス、その後、サーバーで認証情報をチェックします成功するとアプリにリダイレクトを送信し、失敗した場合はログインページにリダイレクトします。

2. のAjax
   介し$.mobile.changePage
   -sendユーザ名/ passwdを有する

   Ajaxの方法は、応答にベース、いずれかwindow.location.replace
   -Similarと$.mobile.changePageまたは表示エラーメッセージ

3. Ajaxの方法でアプリケーションのフロントページを追加オプション2に、window.location.replaceを使用してアプリのフロントページを追加する以外は

4. POSTを使用したAjaxメソッド。失敗したログイン時にのみリダイレクト
   -Keep ajaxをフォーム送信用に有効にします。
   - サーバー側では、フォームフィールドが設定されている場合にのみ実行されるように、ユーザー認証機能をアプリケーションの入力ページと組み合わせてください。
   - ログインに成功すると、アプリのフロントページに戻ります。
   - ログインに失敗すると、ログインページにリダイレクトされます。
   - フォームの値が設定されていない場合は、ユーザーが適切にログインしていることを確認し、標準出力ページを返します。ログインしていない場合は、ログインにリダイレクトしてください。

いくつかの注意事項：
- それは、ナビゲーションは、ユーザーフレンドリーで親切のトリッキーなように見えるとなるように、正しいバックボタンの機能を-Maintaining URL
にログインデータを添付避けるためにPOSTを使用する必要があります。
- 可能な限り少ないページリロードでできるだけ簡単にプロセスフローを作成したいと思います。

アイデアをお持ちですか？

編集：
私は4番目の方法を見つけました。これは最善の方法です。これは、POST /リダイレクトメソッドの結果生じるバックボタン機能の問題を回避します。ユーザーが最初の試行で認証すると、スムーズなページ遷移が常に維持されます。そうでない場合、ページ遷移フローはログインが成功した後も継続して維持される。さらに、JQMの組み込みのエラー処理機能はすべて利用可能です。

Answer 1

基本的には必要に応じています。

標準フォーム提出（ポイント1）は非常に明確な方法ですが、、を失敗したので、ページをリロードする必要がありますログインがであれば、複数の要求（ログインチェックのための1、ページの読み込みのための別）が作られています&また、入力データを入力する必要があります。 AJAX用

いくつかの利点は、接続がクローズまたはネットワーク障害されている場合は、我々は完全なページのデザインを保ち、適切なエラー - を表示することができます

• をR-。標準の送信の場合は、接続エラーが表示されます。その際、ユーザーはモバイルアプリを再起動する必要があります。

• 今後、ユーザーがログインしてページのコンテンツを表示すると、AJAXは簡単にそのトリックを行うことができます。だから私たちはそのログインボックスを毎時&ログイン状態にして、現在の状態を中断することなくログインすることができます。

Answer 2

私はこの質問が1年以上前であることを知っていますが、ここに私の2セントです。これは、HTTPS経由で行く必要があります。もちろん、

$(document).ready(function() { 
    $("#login_submit").click(function(event) { 
     event.preventDefault(); 
     var credentials = { type: 'EMAIL', username: $('#login_username').val(), password: $('#login_password').val() }; 
     $.ajax({ 
      type: "PUT", 
      url: "api/auth", 
      cache: false, 
      data: JSON.stringify(credentials), 
      contentType: "application/json; charset=utf-8", 
      success: function(data) { 
       //validate the response here, set variables... whatever needed 
        //and if credentials are valid, forward to the next page 
       $.mobile.changePage($('#main_menu')); 
        //or show an error message 
      }, 
      error: function() { // server couldn't be reached or other error } 
     }); 
    }); 
}); 

：ボタンのクリックを「送信」迎撃する機能次に

<form method="PUT" action="api/auth" data-ajax="false"> 
    <label for="login_username">Username:</label><br> 
    <input type="text" name="login_username" id="login_username" /><br> 
    <label for="login_password">Password:</label><br> 
    <input type="password" name="login_password" id="login_password" /><br> 
    <button id="login_submit" type="submit" data-theme="a">Submit</button> 
</form> 

：私がやったこと は次のようになりますjQueryのモバイルフォームです。私の場合は、サーバー側のRESTサービスで検証しています。たとえば、資格情報が間違っている場合は、それを403に戻すことができます。次に、$ .mobile.changePage（）を同じDOM内のページまたは別のURLに転送します。