dukDukz

전체 구조 메인페이지에서 로그인 시도 로그인 완료 되면 토큰 생성 - user info 에서 id 확인가능 로그인 실패하면 재시도 요청 로그인 시간 만료되면 쿠키 없어짐 - 로그인 만료처리됨 폴더 트리 auth.js : 로그인 검증할때 토큰이 유효한지 인증하는 파트이다. main.js : html의 동작을 제어한다 .env : 두번째 인자값을 숨긴다. jwt.js : token 을 생성해주는 역할 1. html 과 css 먼저 꾸며주자 더보기 main.html 로그인 회원정보 보기 로그인페이지 로그인 카카오로그인 아직도 회원이 아니세요? 회원가입 main.css *{ margin: 0; padding: 0; } .layerPopup{ display: none; position: fixed; top: 0;..

전체 코드 더보기 createtoken.js const crypto = require('crypto') function createtoken() { let header = { "alg": "HS256", "typ": "JWT" } let encode_header = Buffer.from(JSON.stringify(header)) .toString('base64') .replace("=", ''); let payload = { "sub": "1234567890", "name": "John Doe", "user": "jjun97", "iat": 1516239022 } let encode_payload = Buffer.from(JSON.stringify(payload)) .toString('base64') ...

이 사진을 참고해서 header, payload, verify signature 부분에 어떤걸 넣어야 할지 체크해보자 token 생성의 전체 코드이다. createtoken.js const crypto = require('crypto') function createtoken() { let header = { "alg": "HS256", "typ": "JWT" } let encode_header = Buffer.from(JSON.stringify(header)) .toString('base64') .replace("=", ''); let payload = { "sub": "1234567890", "name": "John Doe", "user": "jjun97", "iat": 1516239022 } let ..

여러 서버에서 client의 로그인 값을 가질 수 있도록 하려고 jwt (토큰) 을 사용하는 것이다. client가 너무 많아서 서버 한대로 돌리기가 어려운 경우, 서버를 여러대 돌리게 된다. 사용자가 너무 많으면 1번 서버의 session에 로그인했는데 2번 서버에 접속해서 로그인이 끊기게되는 경우가 있다 서버가 늘어나면 서버들끼리 로그인 공유가 힘들어진다. 그래서 회원의 정보를 갖고 있는 주체를 클라로 바꾸면서 jwt 토큰을 사용하게 된것. 필요에 의해서 서버를 추가하기도 한다. - session에 대한 문제가 발생 - 로그인이 완료되서 그 정보를 들고 있는 사람을 client 쪽에 넣게 되면 어떨까 해서 나오게 된게 토큰이다 - 토큰 : 임의대로 지정해 놓은 값 - 토큰 저장을 브라우저에 시킨다 브..

카카오 개발자 페이지에서 지도/로컬 API를 가져와서 활용해보자 더보기 카카오 개발자 페이지에서 도구 - REST API 테스트 query에 값을 넣어서 검색해보자 이러한 결과 값이 나온다. 요청 코드를 참고하여 직접 요청해보기로 하자 + 내 API key 값이 필요하다. 이 부분을 활용하면 된다. 요청해보자! 중요한 부분! 이 문서를 보고 API 요청을 할 줄 알아야 한다. server.js /* express nunjucks url : / index.html 로 render */ const express = require('express') const app = express(); const nunjucks = require('nunjucks') app.set('view engine','html') ..

코드 더보기 server.js const express = require('express'); const nunjucks = require('nunjucks'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({extended:false})); app.set('view engine','html'); nunjucks.configure('views',{ express:app, }); app.get('/',(req,res)=>{ res.render('index'); }); app.get('/login',(req,res)=>{ console.log(req.headers); let {use..

index.html {% if logininfo == undefined %} 로그인 카카오로그인 {% else %} 회원정보 로그아웃 {% endif %} {% if msg %} {% endif %} server.js localhost:3000 main - 여기서 logininfo 값을 index.html 에 보내준다. 더보기 app.get('/',(req,res)=>{ const {msg} = req.query; //console.log(req.session.authData); res.render('./index.html',{ msg, logininfo : req.session.authData, // kakao든 local이든 로그인이 되면 두번 로그인 할 수 없게 처리하기 위해서 값을 보내준다 });..

1. index.html html에 이러한 링크를 만들고 2. server.js 라우터에 get 부분으로 이 링크를 받아주는 부분을 만든다. app.get('/auth/kakao/unlink', authMiddleware, async (req,res)=>{ const {session} = req; const {access_token} = session.authData.kakao; // 요청 - axios 비동기로 요청하기 (async 필요) // 카카오에게 접속을 종료하겠다는 것을 요청하겠다 - 그걸 unlink에 담는다 // 요청 실패시를 대비해서 try catch 문을 사용했다. let unlink; try { unlink = await axios({ //Promise 객체를 unlink에 넘겨주고 ..