Аутентификация в jQuery Mobile и PhoneGap

#authentication #jquery-mobile #cordova #codeigniter-2

#аутентификация #jquery-мобильный #кордова #codeigniter-2

Вопрос:

У меня есть веб-приложение, созданное с помощью jQuery Mobile и PHP (CodeIgniter framework). Теперь я пытаюсь создать и его версию для PhoneGap, чтобы сделать его распространяемым как отдельное приложение. Однако веб-приложение PHP. version использует Ion Auth, плагин CodeIgniter для аутентификации. Итак, когда вы переходите на страницу, требующую аутентификации, приложение перенаправляет вас на метод входа с помощью контроллера аутентификации. И после аутентификации он перенаправляет вас обратно на домашнюю страницу (в данном случае на страницу jQuery Mobile). Это отлично работает в веб-приложении., поскольку домашняя страница в любом случае в первую очередь открывается домашним контроллером.

Но вот в чем суть: в версии PhoneGap «домашняя» страница должна быть index.html файл в PhoneGap. По-видимому, вы можете загрузить другой URL при запуске, добавив значение в PhoneGap.plist, но это неприемлемо для Apple для отправки в app store. И если я сделаю перенаправление при аутентификации, я не смогу вернуться к index.html файл после аутентификации…

Итак, как следует выполнять аутентификацию в мобильном приложении PhoneGap / jQuery?

Обновить:

Я пробовал это в соответствии с одним из ответов, но приложение по-прежнему пытается перейти на страницу учетной записи / входа (которая не существует), когда я просто хочу войти через post и вернуть значение из метода:

     $('#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 amp;amp; $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?

Ответ №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;
});
  

Комментарии:

1. Да, я действительно разобрался в этом сам и заставил это работать. Но спасибо!

2. Обратите внимание на это: response == true . Вы проверяете истинные / ложные значения из серверного скрипта, который потенциально может отправить что-то, чего вы не ожидаете (например, страницу с ошибкой, а не ожидаемый результат). Я бы просто рекомендовал использовать === , чтобы убедиться, что вы получаете именно то, что ожидаете.

Ответ №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() добавит данные формы входа в post-запрос. В этом примере предполагается, что ваш веб-сервис вернет JSON.

Комментарии:

1. Хорошо, спасибо. На самом деле это не веб-сервис, а просто плагин для CodeIgniter. Хотя у меня получилось что-то вроде вашего примера. Единственная проблема заключается в том, что когда я отправляю сообщение в учетную запись / login (метод входа в систему в контроллере учетной записи), он входит в систему, но в конечном итоге также пытается перейти к просмотру учетной записи / login. Я этого не хочу. Я просто хочу вернуть значение (я повторяю его в методе входа в систему), но даже если значение возвращено, оно все равно пытается перейти на страницу входа в систему… Смотрите мое обновление.

2. Чтобы люди, которые увидят это в будущем, знали, каким было ваше решение?

3. Для тех, кто интересуется, почему это не сработало, похоже, что в функции () отсутствовала переменная. Это должна быть функция (событие) во второй строке.

4. @Adam Это верно только в том случае, если вы пытаетесь использовать event аргумент в вашем обработчике событий, чего нет в приведенном выше примере.

5. Думаю, я хотел прокомментировать пример кода автора, он использовал его там 🙂

Ответ №3:

Вы смотрели на плагин PhoneGap: дочерний браузер (iPhone, Android, другое) и его метод locChanged?

У меня есть только закодированные приложения, которые используют OAuth (приложение Twitter) и OpenID (приложение AppLaud) для PhoneGap / Android, но в дочернем плагине браузера есть то, что для них необходимо. Похоже, что Ion Auth может быть похожим: после аутентификации, управляемой провайдером, пользователь возвращается в приложение без проблем.

Комментарии:

1. Спасибо, выглядит интересно. Хотя не уверен, как это использовать для этого… Я практически не кодировал PhoneGap в этом приложении (не говоря уже о XCode / Objective-C), только jQuery Mobile и html, поэтому я не уверен, что делать, чтобы достичь того, что мне нужно.