JQuery Mobile - 사용자 로그인 모범 사례

Question

사용자 인증이 필요한 이미 존재하는 웹 응용 프로그램에 JQuery Mobile을 사용하여 모바일 인터페이스를 구축하고 있으며 로그인 프로세스 구현을위한 최선의 방법을 결정할 수 없습니다.

저는 서버 측 인증에 대해별로 신경 쓰지 않고, 사용자 측면에서이를 구현하는 방법을 알고 있습니다. 몇 번의 실험 후

, 옵션을 것 같다 :

1. 표준 양식 POST의 \ 리디렉션에 제출, data-ajax="false"
   - 사용자 제출과
   -Disable 자동 아약스 다음, 서버에서 자격 증명을 확인 성공하면 앱으로 리디렉션을 보내고 실패하면 로그인 페이지로 돌아갑니다.

2. Ajax를
   통해 $.mobile.changePage
   보내기 - 이름/passwd를 가진

   의 Ajax 방식은 응답에 기반이든 window.location.replace
   비슷 하지만 함께 $.mobile.changePage 또는 디스플레이 오류 메시지

3. 의 Ajax 방식으로 앱 앞 페이지를 추가 옵션 2로, window.location.replace을 사용하여 앱의 첫 페이지 추가

4. POST가있는 Ajax 메소드; 실패한 로그인에서만 리디렉션
   -Keep ajax를 사용하여 양식을 제출할 수 있습니다.
   - 서버 측에서 양식 필드가 설정된 경우에만 실행되는 방식으로 사용자 인증 기능을 앱의 입력 페이지와 결합하십시오.
   - 로그인에 성공하면 앱의 첫 페이지를 반환합니다.
   - 로그인에 실패하면 로그인 페이지로 다시 리디렉션됩니다.
   - 양식 값이 설정되지 않은 경우 사용자가 제대로 로그인했는지 확인한 다음 표준 출력 페이지를 반환하십시오. 로그인하지 않은 경우 로그인으로 다시 리디렉션하십시오.

몇 가지 고려 사항 :
는 - 그것은 그 탐색은 사용자 친화적 나타납니다 종류의 까다로운 일이 될 것입니다 때문에 올바른 뒤로 버튼 기능을 -Maintaining URL
에 로그인 데이터를 부착 방지하기 위해 POST를 사용해야합니다.
- 최대한 적은 페이지 재로드로 가능한 한 쉽게 프로세스 흐름을 만들고 싶습니다.

아이디어가 있으십니까?

편집 :
가장 좋은 방법 일 수있는 네 번째 방법을 발견했습니다. POST/redirect 메소드로 인해 발생하는 뒤로 버튼 기능 문제를 방지합니다. 사용자가 첫 번째 시도에서 인증하면 매끄러운 페이지 전환이 전체 시간 동안 유지됩니다. 그렇지 않은 경우 로그인 성공 후 페이지 전환 흐름이 계속 유지됩니다. 또한 JQM의 모든 오류 처리 기능을 사용할 수 있습니다.

Answer 1

기본적으로 필요한 것입니다.

표준 양식 (포인트 1) 매우 명확한 방법이지만, 로그인 이 실패하는 경우, 그래서 페이지를 다시로드해야, 여러 요청 (로그인 체크 하나, 페이지로드에 대한 또 다른)을 만들어 제출할 & 또한 입력 데이터를 채울 필요가 있습니다. AJAX에 대한

일부 장점은 연결이 종료 또는 네트워크 실패하는 경우, 우리는 그대로 페이지 디자인을 유지 적절한 오류 -를 표시 할 수 있습니다

• 을 R-. 표준 제출의 경우 연결 오류가 표시됩니다. 사용자는 모바일 앱을 다시 시작해야 할 수 있습니다.

• 나중에 사용자가 로그인하여 페이지 내용을 보게되면 AJAX는 그 트릭을 신속하게 수행 할 수 있습니다. 그래서 우리는 그 로그인 상자를 매번 & 로그인 상태로두고 현재 상태를 방해하지 않고 로그인 할 수 있습니다.

Answer 2

나는이 질문이 1 년 이상 된 것을 알고 있지만 여기에는 2 센트가있다.

<form method="PUT" action="api/auth" data-ajax="false"> 
    <label for="login_username">Username:</label><br> 
    <input type="text" name="login_username" id="login_username" /><br> 
    <label for="login_password">Password:</label><br> 
    <input type="password" name="login_password" id="login_password" /><br> 
    <button id="login_submit" type="submit" data-theme="a">Submit</button> 
</form> 

그런 다음 함수는 "제출"버튼 클릭을 가로 챌 수 :

$(document).ready(function() { 
    $("#login_submit").click(function(event) { 
     event.preventDefault(); 
     var credentials = { type: 'EMAIL', username: $('#login_username').val(), password: $('#login_password').val() }; 
     $.ajax({ 
      type: "PUT", 
      url: "api/auth", 
      cache: false, 
      data: JSON.stringify(credentials), 
      contentType: "application/json; charset=utf-8", 
      success: function(data) { 
       //validate the response here, set variables... whatever needed 
        //and if credentials are valid, forward to the next page 
       $.mobile.changePage($('#main_menu')); 
        //or show an error message 
      }, 
      error: function() { // server couldn't be reached or other error } 
     }); 
    }); 
}); 

이 HTTPS를 통해 가야한다 물론 내가 무슨 짓을 처럼 보이는 JQuery와 모바일 양식입니다. 필자의 경우, 서버 측 REST 서비스로 검증하고있다. 예를 들어 자격 증명이 잘못되어 있으면 403을 반환 할 수 있습니다. 그런 다음 $ .mobile.changePage()를 사용하여 동일한 DOM 또는 다른 URL의 페이지로 전달합니다.