Xác thực trong jQuery Mobile và PhoneGap

Question

Tôi có một ứng dụng web được xây dựng với jQuery Mobile và PHP (khung CodeIgniter). Bây giờ tôi đang cố gắng để làm cho một phiên bản PhoneGap của nó là tốt, để làm cho nó phân phối như là một ứng dụng độc lập. Tuy nhiên, ứng dụng web PHP. phiên bản sử dụng Ion Auth, một plugin CodeIgniter để xác thực. Vì vậy, khi bạn truy cập trang yêu cầu xác thực, ứng dụng sẽ chuyển hướng bạn đến phương thức đăng nhập bộ điều khiển xác thực. Và sau khi xác thực nó chuyển hướng bạn trở lại trang chủ (trang jQuery Mobile trong trường hợp này). Điều này làm việc tốt trong các ứng dụng web., Kể từ khi trang chủ được mở bởi bộ điều khiển nhà ở nơi đầu tiên anyway.

Nhưng đây là điểm mấu chốt: trong phiên bản PhoneGap, trang "trang chủ" cần phải là tệp index.html trong PhoneGap. Rõ ràng bạn có thể tải một url khác khi khởi động bằng cách thêm một giá trị trong PhoneGap.plist, nhưng điều đó không được chấp nhận bởi táo để gửi đến kho ứng dụng. Và nếu tôi thực hiện chuyển hướng trong xác thực, tôi không thể quay lại tệp index.html sau khi xác thực ...

Vậy bạn nên xác thực như thế nào trong ứng dụng MobileGap/jQuery Mobile?

UPDATE:

Tôi đã thử này theo một trong những câu trả lời, nhưng ứng dụng vẫn cố gắng hướng đến tài khoản trang đăng nhập/(mà không tồn tại), khi tôi chỉ muốn đăng nhập qua gửi và trả về một giá trị từ phương pháp này:

$('#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"); 
      } 
     }); 
    }); 

Dưới đây là các phương pháp điều khiển:

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

     } 
    } 

tôi nghĩ rằng tôi đã gỡ bỏ hoặc nhận xét ra bất kỳ trang đổi hướng ở đó. Vì vậy, tôi không biết tại sao nó cố gắng tải khung nhìn? Liệu nó có cái gì để làm với jQuery Mobile đang cố gắng điều hướng ở đó bởi vì tôi đăng lên url đó?

Answer 1

Bạn có thể yêu cầu dịch vụ web (Ion Auth) từ ứng dụng của mình. với jQuery. Thông tin đăng nhập của bạn sẽ trông giống như sau:

//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() sẽ thêm dữ liệu của biểu mẫu đăng nhập vào yêu cầu đăng. Ví dụ này giả định dịch vụ web của bạn sẽ trả về JSON.

Answer 2

Bạn đã xem Plugin PhoneGap: ChildBrowser (iPhone, Android, khác) và phương pháp locChanged của nó chưa?

Tôi chỉ có các ứng dụng được mã hóa sử dụng OAuth (Twitter App) và OpenID (AppLaud App) cho PhoneGap/Android, nhưng plugin trình duyệt con có những thứ cần thiết cho những ứng dụng đó. Âm thanh như Ion Auth có thể tương tự: sau khi auth điều khiển bởi nhà cung cấp, đưa người dùng trở lại ứng dụng liền mạch.

Answer 3

Lý do biểu mẫu của bạn vẫn đang gửi và cố gắng thay đổi các trang là vì bạn có lỗi cú pháp trong Javascript trình xử lý gửi của mình. Trên dòng hai, event không được xác định để cố gắng gọi tới số event.preventDefault() lỗi. Mặc dù trình xử lý không thành công, trình duyệt vẫn gửi biểu mẫu bằng cách sử dụng mặc định là action và method.

Hoặc thay đổi chữ ký chức năng của bạn thành function(event) { hoặc chỉ cần trả về false từ hàm. Trả lại false tương đương với việc ngăn chặn mặc định.

$('#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; 
});