jQuery Mobile和PhoneGap中的认证

Question

我有一个使用jQuery Mobile和PHP（CodeIgniter框架）构建的Web应用程序。现在我也想制作一个PhoneGap版本，使其作为独立应用程序分发。但是，PHP Web应用程序版本使用Ion Auth，这是CodeIgniter身份验证插件。因此，当您访问需要身份验证的页面时，应用程序会将您重定向到身份验证控制器登录方法。身份验证后，它会将您重定向回主页（在这种情况下是jQuery Mobile页面）。在Web应用程序中，这很好用，因为主页本来就是由主页控制器打开的。

但是这里的关键是：在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有关，因为我发布到该URL？

- Anders

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;
});

- Jeffrey D. Hoffman

---

没错，我实际上自己解决了问题并使其正常工作了。但还是谢谢！ - Anders

请注意：response == true。您正在检查来自服务器端脚本的真/假值，该脚本可能会发送一些您不希望看到的内容（例如错误页面而不是预期的输出）。我建议使用 === 来确保您得到完全符合预期的结果。 - Jasper

Answer 2

您可以使用 jQuery 从应用中向您的 Web 服务 (Ion Auth) 发送请求。您的登录代码将如下所示：

//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() 会将登录表单的数据添加到POST请求中。该示例假定您的Web服务将返回JSON。

- Jasper

---

好的，谢谢。实际上它并不是一个Web服务，只是CodeIgniter的一个插件。我已经成功实现了类似你示例的功能。唯一的问题是，当我提交到account/login（即account控制器中的登录方法）时，它会登录，但也会尝试导航到一个视图account/login。我不想要那个。我只想返回一个值（在登录方法中我使用echo返回一个值），但即使返回了该值，它仍然会尝试导航到登录页面...请看我的更新。 - Anders

请问您需要的翻译是：“那么，看到这个信息的未来的人会知道，你的解决方案是什么？” - Jasper

对于其他人想知道为什么它不起作用，看起来函数()缺少变量。第二行应该是function(event)。 - Adam

@Adam 这只有在你尝试在事件处理程序中使用 event 参数时才是正确的，而上面的示例并没有这样做。 - Jasper

我想我本来是想评论作者的代码示例，他在那里使用了它 :) - Adam

Answer 3

你是否看过PhoneGap插件：ChildBrowser（iPhone、Android和其他平台）以及它的locChanged方法？

我只编写过使用OAuth(Twitter App)和OpenID(AppLaud App)的PhoneGap/Android应用程序，但是child browser插件具备所需功能。听起来Ion Auth可能类似：在由提供商驱动的认证之后，无缝地将用户返回到应用程序。

- Libby

---

谢谢，看起来很有趣。不过我不确定如何在这个项目中使用它... 我在这个应用程序中几乎没有进行任何实际的PhoneGap编码（更不用说XCode/Objective-C了），只有jQuery Mobile和html，所以我不知道该怎么做才能达到我需要的效果。 - Anders