jQuery Mobile 和 PhoneGap 中的身份验证

Question

我有一个使用 jQuery Mobile 和 PHP(CodeIgniter 框架)构建的 Web 应用程序。现在我也在尝试制作它的 PhoneGap 版本，以使其可作为独立应用程序分发。但是，PHP 网络应用程序。版本使用 Ion Auth，一个用于身份验证的 CodeIgniter 插件。因此，当您转到需要身份验证的页面时，应用程序会将您重定向到身份验证 Controller 登录方法。在身份验证之后，它会将您重定向回主页(本例中为 jQuery Mobile 页面)。这在网络应用程序中运行良好。因为主页无论如何都是由主 Controller 打开的。

但关键是:在PhoneGap 版本中，“主页”页面需要是PhoneGap 中的index.html 文件。显然，您可以通过在 PhoneGap.plist 中添加一个值来在启动时加载另一个 url，但这对于提交到应用商店是 Not Acceptable 。如果我在身份验证中进行重定向，我无法在身份验证后返回 index.html 文件......

那么应该如何在 PhoneGap/jQuery Mobile 应用程序中进行身份验证呢？

更新:

我已经根据答案之一进行了尝试，但是当我只想通过帖子登录并从该方法返回一个值时，该应用程序仍然尝试导航到帐户/登录页面(该页面不存在):

    $('#login_form').bind('submit', function () {
        event.preventDefault();
        //send a post request to your web-service
        $.post('http://localhost/app_xcode/account/login', $(this).serialize(), function (response) {
            //parse the response string into an object
            var response = response;
            //check if the authorization was successful or not
            if (response == true) {
                $.mobile.changePage('#toc', "slide");
            } else {
                alert('login failed');
                $.mobile.changePage('#toc', "slide");
            }
        });
    });

这是 Controller 方法:

function login()
    {
        //validate form input
        $this->form_validation->set_rules('identity', 'Identity', 'required');
        $this->form_validation->set_rules('password', 'Password', 'required');

        $base_url = $this->config->item('base_url');

        $mobile = $this->detect_mobile();
        if ($mobile === false && $base_url != 'http://localhost/app_xcode/') //Only restrict if not developing
            redirect('account/notAMobile');

        else if ($this->form_validation->run() == true) { //check to see if the user is logging in
            //check for "remember me"
            $remember = (bool)$this->input->post('remember');

            if ($this->ion_auth->login($this->input->post('identity'), $this->input->post('password'), $remember)) { //if the login is successful
                //redirect them back to the home page
                $this->session->set_flashdata('message', $this->ion_auth->messages());

                echo true;
                /*redirect($this->config->item('base_url'), 'refresh');*/
            }
            else
            { //if the login was un-successful
                //redirect them back to the login page
                $this->session->set_flashdata('message', $this->ion_auth->errors());
                /*redirect('account/login', 'refresh');*/ //use redirects instead of loading views for compatibility with MY_Controller libraries
            }
        }
        else
        { //the user is not logging in so display the login page
            //set the flash data error message if there is one
            $this->data['message'] = (validation_errors()) ? validation_errors()
                    : $this->session->flashdata('message');

            $this->data['identity'] = array('name' => 'identity',
                                            'id' => 'identity',
                                            'type' => 'text',
                                            'value' => $this->form_validation->set_value('identity'),
            );
            $this->data['password'] = array('name' => 'password',
                                            'id' => 'password',
                                            'type' => 'password',
            );

        }
    }

我想我已经删除或注释掉了那里的任何重定向。所以我不知道为什么它仍然试图加载 View ？它是否与 jQuery Mobile 试图导航到那里有关，因为我发布到那个 url？

Answer 1

您的表单仍在提交并尝试更改页面的原因是您的提交处理程序 Javascript 中存在语法错误。在第二行，event未定义，因此尝试调用 event.preventDefault()错误。尽管处理程序失败，浏览器仍然使用它的默认 action 提交表单和 method .

将您的函数签名更改为 function(event) {或者只是从函数中返回 false 。返回 false相当于防止违约。

$('#login_form').bind('submit', function () {

    //send a post request to your web-service
    $.post('http://localhost/app_xcode/account/login', $(this).serialize(), function (response) {
        //check if the authorization was successful or not
        if (response == true) {
            $.mobile.changePage('#toc', "slide");
        } else {
            alert('login failed');
            $.mobile.changePage('#toc', "slide");
        }
    }, 'JSON');

    return false;
});