쿠키와 인증 - 인증 구현
이제 쿠키를 이용하여 로그인/로그아웃을 구현해볼 것이다.
그러나 이번에 만드는 인증 기능은 이메일, 닉네임, 비밀번호가 쿠키로 그대로 노출되므로 실전에서 사용하면 안된다 !!
Hmm ... 강의를 보며 따라하려고 했으나 ... ! 내 main.js 파일은 express로 이루어져있다. 일단 express인지 여부와 상관 없는 사항에 대해서만 내 코드를 수정하고, 인증 구현 과정은 실습 없이 블로그에 글로 남기겠다 ...!
1. template.js에 '/login'으로 연결되는 a 태그를 추가하였다. ( UI 만들기 )
2. main.js에서 else if 문을 추가하여 login 페이지를 구현해주었다. ( 메인 페이지 코드를 가져와서 활용 )
<form action="login_process" method="post">
<p><input type="text" name="email" placeholder="email"></p>
<p><input type="password" name="password" placeholder="password"></p>
<p><input type="submit"></p>
</form>여기서 비밀번호를 입력하는 input 태그의 type을 password로 하면 비밀번호가 ●●● 이런 식으로 나온다.
3. else if문을 이용하여 login_process를 구현해주자. ( delete_process 코드를 가져와서 활용 )
if(post.email === 'egoing777@gmail.com && post.password === '111111'){
response.writeHead(302,{
'Set-Cookie' : [
`email=${post.email}`,
`password=${post.password}`,
'nickname=egoing'
],
Location: '/'
});
response.end();
} else{
response.end('Who?');
}else if 문 안에서 위와 같은 방식으로 쿠키를 생성한다. else문은 로그인을 실패했을 때 코드이다.
4. 이제 로그인 여부를 체크하는 코드가 필요하다. 로그인 여부를 체크하는 코드를 authIsOwner()이라는 함수로 따로 만들어주었다.
var cookie = require('cookie');
function authIsOwner(request, response){
var isOwner='false';
var cookies = {};
if(request.headers.cookie){ // undefined -> false
cookies = cookie.parse(request.headers.cookie);
}
if(cookies.email === 'egoing777@gmail.com' && cookies.password === '111111'){
isOwner = true;
}
return isOnwer;
}
var isOwner = authIsOwner(request, response);
5. login 상태라면 login a 태그가 logout이라고 뜨도록 UI를 수정해야 한다.
template.js의 해당 부분을 아래와 같이 바꿔준다.
HTML:function(title, list, body, control, authStatusUI = '<a href="/login">login</a>'){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${authStatusUI}
<br>
<a href="/author">author</a>
${list}
${control}
${body}
</body>
</html>
`;
그리고 main.js에 아래 코드를 추가하여 준다.
function authStatusUI(request, response){
var authStatusUI = '<a href="/login">login</a>';
if(authIsOwner(request, response)){
authStatusUI = '<a href="/logout_process">logout</a>';
}
return authStatusUI;
}그리고 메인 페이지, 상세 페이지, create, update에 해당하는 if문에 authStatusUI()를 추가한다.
6. 이제 logout을 했을 때, 쿠키가 삭제되도록 하자.
logout_process라는 else if문을 만들자.
response.writeHead(200, {
'Set-Cookie': [
'email=; Max-Age=0',
'password=; Max-Age=0',
'nickname=; Max-Age=0'
});Max-Age를 0으로 설정해주면 쿠키를 삭제할 수 있다.
7. 로그인한 사용자들만 CRUD에 접근할 수 있도록 하자.
create_process 부분에 아래 코드를 추가하자.
if(authIsOwner(request, response) === false){
response.end('Login required!!');
return false; // 아래 코드가 실행되지 않도록
}이 코드를 update, delete 등 인증이 필요한 모든 곳에 넣는다.
여기까지가 쿠키와 인증 내용이다 ~!~! 이제 express에서 Session을 이용하여 인증을 구현하러 가보자 ~~