1

インデックスページがログインページ/登録ページであるphonegapで開発しているWebアプリがあります。

これは、新しいユーザーがアプリを使用するために登録されていないときに表示される最初のページであるため、問題ありません。しかし、これは私にとって2つの問題を提示します。それは、人がログインして戻るボタンを押すと、ログインページに戻り、それが発生したくないということです。また、ユーザー資格情報が保存されているときにアプリを開くと、しばらくの間ログイン ページに移動してからアプリに入ります。

どうすればこれを防ぐことができますか? Cookie/セッション タイプのログイン システムを実装する必要がありますか?

私のコードは以下です

HTML 

<div id="home">

    <div id="launcherPage" data-role="page">
        <!-- I'm just here waiting for deviceReady -->
    </div>


    <div id="loginPage" data-role="page">

        <div data-role="header">
            <h1>CHUNE</h1>
        </div>

        <div data-role="content">    

            <form id="loginForm">
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" value="" placeholder="Username" />
            </div>

            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" value="" placeholder="Password" />
            </div>

            <input type="submit" value="Login" id="submitButton">
            </form>
            <div style="text-align: center;">Or</div> <!--need to center-->
            <a href="./register.html" data-role="button">Register</a>

        </div>

        <div data-role="footer">
            <h4>&copy; KewsPlus</h4>
        </div>

    </div>
</div>

JavaScript

 function init() {
document.addEventListener("deviceready", deviceReady, true);
delete init;

}

 function checkPreAuth() {
console.log("checkPreAuth");
var form = $("#loginForm");
if(window.localStorage["username"] != undefined && window.localStorage["password"] != undefined) {
    $("#username", form).val(window.localStorage["username"]);
    $("#password", form).val(window.localStorage["password"]);
    handleLogin();
}
}

function handleLogin() {
var url = 'http://kewsplus.com/includes/login.php';
var form = $("#loginForm");    
//disable the button so we can't resubmit while we wait
$("#submitButton",form).attr("disabled","disabled");
var u = $("#username", form).val();
var p = $("#password", form).val();
if(u != '' && p!= '') {
    $.ajax({
        type: "POST",
        url: url,
        data: {username:u,password:p},
        dataType: "jsonp",
        crossDomain: "true",
        jsonp : "onJSONPLoad",
        success: function (data) {
            if (data = 1) {
                //store
                window.localStorage["username"] = u;
                window.localStorage["password"] = p;             
                $.mobile.changePage("featuredtracks.html");
            }  else {
                navigator.notification.alert("Your login failed", function() {});
            }
        }
    }); //$.ajax
       $("#submitButton").removeAttr("disabled");
    }
 else {
    navigator.notification.alert("You must enter a username and password", function() {});
    $("#submitButton").removeAttr("disabled");
}
return false;
}

function deviceReady() {
console.log("deviceReady");
$("#loginPage").on("pageinit",function() {
    console.log("pageinit run");
    $("#loginForm").on("submit",handleLogin);
    checkPreAuth();
});
$.mobile.changePage("#loginPage");
    });
4

2 に答える 2

1

  1. 戻る機能を防ぐには、新しいページ (featuredtracks.html) をロードしたらすぐに、PhoneGap が提供するイベント「backbutton」にアタッチして、戻るボタンをオーバーライドする必要があります。PhoneGap APIから:

    document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {
    // Handle the back button
}

  2. 認証情報の保存時にログイン ページが一瞬表示されないようにするには、最初のページをスプラッシュ スクリーンのようにすることを検討してください。ページは、ログイン ページまたはメイン ページ (featuredtrack.html だと思います) のどちらを読み込むかを決定します。そのため、常にログイン ページを最初にロードするのではなく、login.html をロードするか、featuredtracks.html をロードするかを決定する画像や何かを適切に表示する別のページをロードします。

    ログインページの戻るボタンもオーバーライドして、ユーザーが戻ってロード/スプラッシュ画面ページに移動できないようにすることに注意してください。

于 2013-04-18T14:37:17.353 に答える