플라스크 서버에 아약스 호출 (브로큰 파이프)을 사용하여 로그인 인증

파이썬 서버 (Flask)에 대한 ajax 호출을 사용하여 웹 응용 프로그램의 사용자를 인증하려고하는데,이 호출은 주 서버를 호출합니다. 자격 증명 Flask 서버에 전달하고 인증을 수행합니다. 그러나 인증 후에는 클라이언트에게 성공 메시지를 다시 전달해야합니다. 따라서 웹 페이지에서 메시지를 리디렉션하거나 표시 할 수 있습니다. 그러나 메시지를 돌려주지는 않습니다.플라스크 서버에 아약스 호출 (브로큰 파이프)을 사용하여 로그인 인증

1) 자바 스크립트 :

function login() 
{ 
var user=document.getElementById("username").value; 
var pass=document.getElementById("password").value; 
//alert(JSON.stringify({username:user,password:pass})); 
//var contentType = "application/x-www-form-urlencoded"; 
var ajax=$.ajax({ 
    type: "POST", 
    //crossDomain: true, 
    data: JSON.stringify({username:user,password:pass}), 
    contentType:"application/x-www-form-urlencoded", 
    dataType: "json", 
    url: "http://0.0.0.0:8081" 
    //async:true 
}).done(function(data){ 


     // alert(data); 
    }); 
ajax.fail(function(data){ 


    //alert(data); 
});

authentication.I 작성한 후 대신, 다음 코드 클라이언트 코드를 깨진 파이프 오류를주고있다 6,

}

2) HTML :

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<!--link rel="stylesheet" type="text/css" href="login.css"--> 
<script type="text/javascript" src="login_auth.js" ></script> 

</head> 
<body> 
<!-- Begin Page Content --> 
<div id="container"> 
<form> 

    <input type="text" id="username" name="username" value="sayan" > 
    <input type="password" id="password" name="password" value="3BxTPu+y4YA"> 
    <div id="lower"> 
     <input type="checkbox" id="checkbox" name="checkbox"><label class="check" for="checkbox">Keep me logged 
     in</label> 
     <input type="submit" value="Login" onclick="login()"> 
    </div> 
    <!--/ lower--> 
</form> 
</div><!--/ container--> 
<!-- End Page Content --> 
</body> 
</html>

3) 플라스크 서버 코드 :

app = Flask(__name__) 
@app.route('/', methods=['POST','GET','OPTIONS']) 
@crossdomain(origin='*') 
def login(): 

    data= request.get_json(force=True); 
    br=mechanize.Browser() 
    br.open('https://weaveprod.ucdp.utah.edu/geoserver/web/?wicket:bookmarkablePage=:org.geoserver.web.GeoServerLoginPage') 
    br.select_form(nr=0) 
    username=data['username']; 
    password=data['password']; 
    br['username']= username 
    br['password']= password 

    response= br.submit() 
    mainpage=response.read() 
    val=mainpage.find('Invalid username/password combination') 

    if val==-1: 
      success = True 
    else: 
     success=False 

    print success 

    return jsonify(text=success); 


if __name__ == "__main__": 
    app.run(host="0.0.0.0", port=8081, debug=True,threaded=True)

문제 :

1) 내가 모질라 브라우저를 통해 요청을하는 경우, 대신 Chrome 대신 POST 대신 GET 요청을 받고 인증이 수행되지 않습니다.

2) POST 요청을했지만 주소 표시 줄의 URL에 사용자 이름과 암호가 표시됩니다.

친절하게 도와주세요 ... 나는 지금 2 일 동안 그것을 고심하고 있습니다.

덕분 사얀

출처

2014-03-12 user2284140

자바 스크립트 코드는 마지막에 포함 된 (또는 $(document).ready으로 실행을 지연)한다. 코드는 심지어 양식 필드가 렌더링되기 전에 document.getElementById("username").value으로 요소를 가져 오려고했습니다. 그 외에도 제출 버튼을 클릭하면 양식이 정상적으로 제출되어 페이지를 새로 고치고 이전에는 쓸모없는 ajax 호출을 렌더링합니다. 또한 페이지 새로 고침은 이전에 작성된 ajax 호출을 인터럽트하여 로그에 표시되는 깨진 파이프 오류를 유발할 수 있습니다.

다음은 약간 더 나은 방법입니다. 양식 제출 이벤트에 직접 바인딩 해보자. 그 전에는 id="loginForm"을 양식에 추가하여 jQuery로 직접 가져올 수 있고 제출 버튼에서 onclick 속성을 제거 할 수 있습니다.

이제 자바 스크립트 부분입니다. 서버 측에

$(document).ready(function() { 
    // bind the form submit event to our function 
    $("#loginForm").bind('submit', function(e) { 
     // prevent page refresh 
     e.preventDefault(); 
     // post the data 
     var ajax=$.ajax({ 
      type: "POST", 
      data: $("#loginForm").serialize(), 
      url: "http://localhost:8081/" 
     }).done(function(data){ 
      console.log('done!') 
     }); 
     ajax.fail(function(data){ 
      console.log('error!'); 
     }); 
    }); 
});

는 request.form.get('username') 및 request.form.get('password') 같은 양식 필드 데이터를 얻을.

출처

2014-03-12 20:28:19 vivekagr

감사합니다. 톤 !!! 그것은 완벽하게 작동했습니다! :) – user2284140

플라스크 서버에 아약스 호출 (브로큰 파이프)을 사용하여 로그인 인증

답변

관련 문제