[NodeJS] Passport - Ajax 기반의 인증 처리

Passport - Ajax 기반의 인증 처리 

우선 login에 필요한 페이지를 새로 만든다.

login/index.js와 views/login.ejs를 추가한다.

코드 내용은 예제 링크를 참조한다.
 

Ajax로 통신을 하므로 Json 형식으로 응답을 줘야한다.

이때 사용되는 것이 passport의 custom callback이다.

router.post('/', function(req, res, next){
  passport.authenticate('local-login',function(err, user, info){                                           
    if(err) res.status(500).json(err);
    if(!user){return res.status(400).json(info.message);} 
 
    req.logIn(user, function(err) {
      if (err) { return next(err); }
      return res.json(user);
    });
  })(req, res, next);
})
 

다음과 같은 코드를 login/index.js 파일에 추가 해준다.

유저가 없을 때/500 오류가 발생했을 때 json으로 응답을 준다

중요한것은 req인데 req.logIn이 정상적으로 동작한다면 

serializeUser 등의 메소드로 자연스럽게 이어지도록 되어있다.

req.logIn의 마지막에서는 user를 json으로 redirect 하게된다.

document.querySelector('.ajaxsend').addEventListener('click', function(){
        var email =  document.getElementsByName('email')[0].value;
        var password =  document.getElementsByName('password')[0].value;
        sendAjax('http://localhost:3000/login',{'email': email, 'password':password});
      })
 
      function sendAjax(url,data){
        data = JSON.stringify(data);
 
        var oReq = new XMLHttpRequest();
        oReq.open('POST', url);
        oReq.setRequestHeader('Content-Type', 'application/json')
        oReq.send(data);
 
        oReq.addEventListener('load', function(){
          var result = JSON.parse(oReq.responseText);
          var resultDiv = document.querySelector('.result');
 
          if(result.email) {
            resultDiv.innerHTML = 'welcome '+ result.email +'!!'
            window.location.href = '/main'
          }
          else if(oReq.status === 400){
            resultDiv.innerHTML = result + "<div class='sign up'><a href='/join'>Sign up</a></div>"         
          }
          else resultDiv.innerHTML =  result;
        });
      }
 

Ajax 통신을 보내는 ejs파일에는 다음과 같은 코드가 들어가게 된다.

버튼을 클릭하여 ajax요청이 되면 방금 만든 커스텀 콜백 함수로 들어가게 된다.

예제코드