jQuery Mobile和PhoneGap中的身份验证

Question

我有一个使用jQuery Mobile和PHP(CodeIgniter框架)构建的Web应用程序.现在我正在尝试制作它的PhoneGap版本,使其可以作为独立应用程序分发.但是,PHP Web应用程序.版本使用Ion Auth,一个CodeIgniter插件进行身份验证.因此,当您转到需要身份验证的页面时,应用程序会将您重定向到身份验证控制器登录方法.在身份验证之后,它会将您重定向回主页(在本例中为jQuery Mobile页面).这在网络应用程序中工作正常,因为主页首先由家庭控制器打开.

但这里有关键:在PhoneGap版本中,"home"页面需要是PhoneGap中的index.html文件.显然,你可以通过添加在PhoneGap.plist值在启动时加载另一个网址,但无法接受被苹果提交到应用商店.如果我在身份验证中进行重定向,我无法在身份验证后返回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");
            }
        });
    });

这是控制器方法:

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',
            );

        }
    }

我想我已删除或注释掉那里的任何重定向.所以我不知道为什么它还试图加载视图？它是否与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;
});

Answer 2

您可以从您的应用程序向您的网络服务 (Ion Auth) 发出请求。使用 jQuery。您的登录信息将如下所示：

//add event handler to the `submit` event for your login form
$('#login_form').bind('submit', function () {

    //send a post request to your web-service
    $.post('http://my-domain.com/my-auth/auth.php', $(this).serialize(), function (response) {

        //parse the response string into an object
        response = $.parseJSON(response);

        //check if the authorization was successful or not
        if (response.status === 'success') {
            //do login here
        } else {
            //do error here
        }
    });
});

$(this).serialize()将把登录表单的数据添加到发布请求中。此示例假设您的 Web 服务将返回 JSON。