jQuery Mobile 和 PhoneGap 中的身份验证

Question

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

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

Answer 3

您看过 PhoneGap 插件：ChildBrowser（iPhone、Android 等）及其 locChanged 方法吗？

我只为 PhoneGap / Android 编写了使用 OAuth (Twitter App) 和 OpenID (AppLaud App) 的应用程序，但子浏览器插件具有这些应用程序所需的功能。听起来Ion Auth可能类似：在provider驱动的auth之后，无缝返回用户到app。