본격적으로 passport.js 를 사용해서 로그인을 구현해보도록 하자.
passport는 기본적인 체계가 있고, 공통의 체계에 의해서 구글 로그인 / 페이스북 로그인 / 로컬 로그인 등을 로그인을 해보도록한다.
여기에서는 local 전략을 사용할 것이다.
passport.js 에서 보여주는 기본적인 username, password 방식을 확인한다.
<form action="/login" method="post">
<div>
<label>Username:</label>
<input type="text" name="username"/>
</div>
<div>
<label>Password:</label>
<input type="password" name="password"/>
</div>
<div>
<input type="submit" value="Log In"/>
</div>
</form>
이러한 형태로 작성이 되어야 passport.js 를 인식할 수 있다.
/auth/login
을 확인해보면, 다른 형식으로 적혀있기 때문에 주석처리를 하고 해당 홈페이지에서 제공하는 route를 확인한다.
app.post('/login',
passport.authenticate('local', { successRedirect: '/',
failureRedirect: '/login',
failureFlash: true })
);
해당 형태로 /login 라우터를 작성해야한다.
(app_passport_file.js
)
app.post(
'/auth/login',
//passport.authenticate 라는 미들웨어가 받는다.
// local 이라는 로그인 방식이 실행된다. 만약에 facebook 을 활용하고 싶다면, facebook 으로 바꾸면 된다.
// local 을 사용하기 위해서는, 설정이 필요하다.
passport.authenticate(
'local', {
//로그인에 성공했다면
successRedirect: '/welcome',
//사용자가 로그인에 실패했다면
failureRedirect: '/auth/login',
// 사용자를 로그인 페이지로 보내면, 자신이 로그인페이지로 왔는지 모르기 때문에
// 인증에 실패했다는 정보를 주고 싶을 수 있다. 그럴 때, Flash 를 사용하면
// 사용자에게 보여줄 수 있다. 여기서는 사용하지 않는다.
failureFlash: false
}
)
);
/auth/login , method ="post" 에 접근하게 되면,
passport.authenticate
라는 미들웨어를 타게 된다.