[포트폴리오] 팀프로젝트 경일 홈페이지 리뉴얼 - 로그인 부분 상세 설명 + css 정리

1.    로컬 로그인

 

파일 별 설명

jwt.js

* 로그인 할 때 AccessToken을 만드는 jwt.js

- userid와 username을 담아서 토큰을 생성했다.

(후에 userid와 username이 필요하기 때문에)

 

 

crypto

암호화 하는 패키지를 다운받아야 한다 - npm install crypto

 

env

.env :  두번째 인자값을 숨긴다.

 

 

토큰 만드는 부분의 상세 설명 참고

2021.05.27 - [수업] - 21.05.27 jwt 토큰 생성하기 (암호화 하기)

21.05.27 jwt 토큰 생성하기 (암호화 하기)

 

 

---

 

jwtId.js       &        jwtName.js

* 로그인 후 userid와 username이 필요할때 사용하기 위해서 만든 jwtId.js 와 jwtName.js 

AccessTocken 에 저장된 userid와 username 을 얻을 수 있다.

 

 

AccessToken에서 userid와 username 빼내기

require('dotenv').config();
const crypto = require('crypto');
const ctoken = require('./jwt');

function jwtId(AccessToken){  
    let [header, payload, sign] = AccessToken.split('.');   
    let { userid, exp } = JSON.parse(Buffer.from(payload, 'base64').toString())
    let Cuserid = userid;
    return Cuserid;
}

module.exports = jwtId;

userid 부분을 username으로 바꾸고 exports 부분만 수정하면 name 도 얻을 수 있다.

각각 다른 파일로 만들었다.

 

 

사용할 때는 @.controller.js에서 

const jwtId = require('../../jwtId')
const jwtName = require('../../jwtName');

let { AccessToken } = req.cookies;

let userid = (AccessToken != undefined) ? jwtId(AccessToken) : undefined;
let username = (AccessToken != undefined) ? jwtName(AccessToken) : undefined;

이렇게 사용했다.

 

먼저 req.cookies 에 AccessToken 이 있는지 확인한다 (로그인이 되어있는지 확인하는 것)

 

로그인 되어있다면  AccessTocken이 undefined가 아니므로,

AccessToken을 각각 jwtId.js와 jwtName으로 보내서 userid와 username 값을 얻을 수 있다.

 

하지만 로그인이 되어있지 않다면 AccessToken이 undefined 이므로 userid와 username 은 undefined가 된다.

 

username을 활용한 부분

 

<div class="after_login">
	{% if userid != undefined %}
		<a href="/user/info"><span class="after_login_span">{{username}}님</span></a>
		<a href="/user/logout"><span class="logout">로그아웃</span></a>
	{% endif %} 
	{% if nickname != undefined %}
		<a href="/auth/kakao/kakao_userinfo"><span class="after_login_span">{{nickname}}님</span></a>
		<a href="/auth/kakao/unlink"><span class="logout">로그아웃</span></a> 
	{% endif %}
</div>

userid나 nickname이 undefined 가 아니란 뜻은 로그인이 되었다는 뜻이므로 이 부분이 실행될 것이다.

첫번째 조건문이 로컬로그인, 두번째 조건문이 카카오 로그인이 실행 되었을 때 이다.

 

 

2.     카카오로그인 / 로그아웃

routers / auth

index.js

const express = require('express')
const router = express.Router()
const controller = require('./auth.controller')

router.get('/kakao', controller.kakao_login);
router.get('/kakao/callback', controller.kakao_callback);
router.get('/kakao/kakao_userinfo', controller.kakao_userinfo);
router.get('/kakao/unlink', controller.kakao_logout);

module.exports = router;

 

/kakao	로그인
/kakao/callback	카카오에게 두번(로그인 해달라 ,정보 달라) 요청한다
/kakao/kakao_userinfo	카카오 회원 정보
/kakao/unlink	로그아웃

 

왜 카카오 로그인을 했는데 회원가입을 해야하나요?

 

카카오 로그인을 하게 되면 내가 받아올 수 있는정보는 nickname과 user email이다.

 

그래서 처음 로그인하는 카카오 회원은 회원가입 페이지로 보내서, userid를 비롯한 추가 정보를 입력하게 한 뒤 DB에 저장했다.

 

굳이 이렇게 한 이유는 회원이 수강후기를 작성할 수 있어야 하는데 이때 unique 값인 userid가 필요하기 때문이다. 

 

이렇게 가입을 한 카카오 회원은 다음 로그인 부터는 카카오 로그인 버튼만 누르면 바로 로그인 될 수 있게 했다.

 

 

 

카카오 로그인 상세 설명

 

2021.05.21 - [수업] - 21.05.21 카카오 로그인( API 사용 )

 

21.05.21 카카오 로그인( API 사용 )

 

3. 로그인 후 할 수 있는 것들

1) 수강후기 작성

 

로그인 하지 않았을때는 수강후기를 작성 할 수 없다.

 

 

로그인 시 회원의 이름이 오른쪽 상단에 뜨게 되고 수강후기를 작성할 수 있는 버튼이 활성화 된다.

 

 

{% if nickname or userid  %}
	<div class="writez">
		<a class="submitBtn" href="/community/review_write?page={{page}}">작성하기</a>
	</div>
{% endif %}

nickname 이나 userid가 있는 경우 (로그인이 된 경우)

작성하기 버튼이 나올 수 있도록 nunjucks 구문을 활용했다.

 

 

---

 

2) 회원 정보 확인 및 수정

이름을 클릭하면

회원 정보를 확인 및 수정 할 수 있다.

 

 

 

---

CSS 폴더 트리

url 을 참고해서 폴더를 만들고 그 안에 css들을 정리했다

 

 

 

index 

메인페이지의 css만 담았다.

localhost:3000 부분

div 별로 섹터를 나눠서 css 파일도 나눴다.

 

 

 

 

 

 

 

 

mobile

모바일 부분은 위치 정리만 해주면 되는 부분이라 간단하게 나눴다. 

main 부분은 index.html 부분이고

나머지는 각 subpage 부분이다.

 

 

 

subpage

각각의 url을 참고해서 폴더를 만들고 css를 추가했다.

 

 

 

 

 

 

 

user

회원가입과 로그인 부분만 따로 빼서 만들었다.

 

 

404 잘못된 링크로 가는 경우 404페이지가 렌더될 때 사용된다.

common 전체적으로 많이 사용되는 css를 따로 빼서 담았다