在jQuery Mobile和PhoneGap中進行身份驗證

Question

我有一個使用jQuery Mobile和PHP（CodeIgniter框架）構建的Web應用程序。現在我正在嘗試製作PhoneGap版本，以便將其作爲獨立應用分發。但是，PHP Web應用程序。版本使用Ion Auth，一個CodeIgniter插件進行身份驗證。因此，當您轉到需要認證的頁面時，應用會將您重定向到認證控制器登錄方法。認證後，它會將您重定向回主頁（本例中爲jQuery Mobile頁面）。這在Web應用程序中工作正常，因爲主頁首先由首頁控制器打開。

但是，關鍵是：在PhoneGap版本中，「主頁」頁面必須是PhoneGap中的index.html文件。顯然，您可以在啓動時通過在PhoneGap.plist中添加值來加載另一個網址，但蘋果無法接受該網址提交給應用商店。如果我在身份驗證中執行重定向，則無法在身份驗證後返回index.html文件...

那麼應該如何在PhoneGap/jQuery Mobile應用程序中進行身份驗證呢？

UPDATE：

我已經嘗試了本根據答案之一，但應用程序仍試圖導航到該帳戶/登錄頁面（不存在），當時我只是想通過登陸後從方法返回一個值：

$('#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試圖導航那裏有關，因爲我張貼到該網址？

Answer 1

您可以向您的應用程序請求您的網絡服務（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請求。這個例子假設你的web服務將返回JSON。

Answer 2

你看過PhoneGap插件：ChildBrowser（iPhone，Android，其他）和它的locChanged方法嗎？

我只有編碼的應用程序使用PhoneGap/Android的OAuth（Twitter App）和OpenID（AppLaud App），但子瀏覽器插件有這些需求。聽起來像Ion Auth可能類似：在由提供商驅動的auth之後，將用戶無縫地返回到應用程序。

Answer 3

你的表單仍在提交的原因，它試圖改變頁面是因爲你的提交處理程序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; 
});