Oauth 용어
- 사용자(user): 서비스 제공자와 소비자를 사용하는 계정을 가지고 있는 개인
- 소비자(consumer): Open API를 이용하여 개발된 OAuth를 사용하여 서비스 제공자에게 접근하는 웹사이트 또는 애플리케이션
- 서비스 제공자(service provider): OAuth를 통해 접근을 지원하는 웹 애플리케이션(Open API를 제공하는 서비스)
- 소비자 비밀번호(consumer secret) : 서비스 제공자에서 소비자가 자신임을 인증하기 위한 키
- 요청 토큰(request token) : 소비자가 사용자에게 접근권한을 인증받기 위해 필요한 정보가 담겨있으며 후에 접근 토큰으로 변환된다.
- 접근 토큰(access token) : 인증 후에 사용자가 서비스 제공자가 아닌 소비자를 통해서 보호된 자원에 접근하기 위한 키를 포함한 값.
출처 : 위키백과
kakaoAuthURL : https://kauth.kakao.com/oauth/authorize
token;
url:'https://kauth.kakao.com/oauth/token',
headers:{
'content-type':'application/x-www-form-urlencoded'
},
user;
url:'https://kapi.kakao.com/v2/user/me',
headers:{
Authorization:`Bearer ${token.data.access_token}`
}
=============================================================================================================
javaScript, express, node.js + oauth + kakao login 만들기
Kakao Developers 에서 할 일
1. REST API 얻기
카카오 Developers 접속 -> 로그인 -> 내 어플리케이션 추가 -> REST API 복사, 따로 메모 해놓기
rest API란?
https://meetup.toast.com/posts/92
2. 활성화 설정 상태 on , Redirect URI 설정
kakao developers 메뉴 - 로그인 -> 활성화 설정 클릭 -> on 으로 바꾸고 redirect uri 입력
rest API 개발 경우 필수 설정
redirect uri 주소 따로 메모 = 카카오 로그인 되었을 때 나올 주소 설정함.
3. secret key 만들기
kakao developers - 메뉴 '보안' -> 코드 생성 -> key 생성
-> 따로 메모 해놓기
4. web 플랫폼 등록
kakao developers - 메뉴 '플랫폼' - web 등록
내가 설정한 port 값
========================================================================
Visual Studio - Local server 에서 할 일
0. npm init
1. express 설치 및 코드 작성
터미널 명령어 실행 $ npm install express
server.js 코드 작성
const express=require('express');
const app = express();
app.get('/', (req,res)=>{
res.send('kakao login')
})
app.listen(3000,()=>{
console.log('server start port: 3000')
})
터미널 명령어
$node server.js 입력 -> server on 시키고
app.get('/') res.send 잘 나오는지도 확인
2. nunjucks 설치, 코드 작성, views폴더, index.html (in views) 생성
$npm install nunjucks
views폴더 생성
views폴더 안 - index.html 파일 생성 , 아무 글 작성 (nunjucks 잘 되는지 test위함)
server.js 코드 추가
const express=require('express');
const nunjucks=require('nunjucks'); //추가요
const app = express();
nunjucks.configure('views', {
express:app,
})
app.set('view engine','html');
app.get('/', (req,res)=>{ // send -> render
res.render('index.html') //nunjucks -> html파일 render 보내기 위함.
})
app.listen(3000,()=>{
console.log('server start port: 3000')
})
$node server.js -> server on -> localhost:3000 확인
nunjucks 까지 잘 추가됨.
3. kakao developers 에서 생성한 RestAPI, secret key, redirectURI 객체로 담기
-> 편하게 쓰기 위함
server.js 파일에 아래 코드 작성
const kakao={
clientID : 'f219cecc72g1eb147e757978ac0e323f',
clientSecret : 'ucuZ7zZ5KKaeRedSedBMiXZIpTFnGBvi',
redirectUri : 'http://localhost:3000/auth/kakao/callback'
}
4. 카카오 URL 전달, redirectURL 까지 만들기
views - index.html 수정 - 로그인하러 보내는 a 링크 만들기
auth/kakao을 한 번 거치게 만듬
(redirectUri는 auth/kakao/callback )
<a href="/auth/kakao">카카오 로그인</a>
<a href="#">회원정보</a>
server.js 코드 작성
app.get('/auth/kakao', (req,res)=>{
const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize`;
res.redirect(kakaoAuthURL);
})
위의 URL 에 소비자 (client = local server) 의 clientID = restAPI, redirect_uri, response_type 값을 get 형식으로 보내줘야 한다. 아래처럼 추가
app.get('/auth/kakao', (req,res)=>{
const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?
client_id=${kakao.cliendtID}
&redirect_uri=${kakao.redirectUri}
&response_type=code`;
res.redirect(kakaoAuthURL);
})
server.js 전체
const express=require('express');
const nunjucks=require('nunjucks');
const app = express();
nunjucks.configure('views', {
express:app,
})
app.set('view engine','html');
const kakao={
clientID : 'f219cecc72g1eb147e757978ac0e323f',
clientSecret : 'ucuZ7zZ5KKaeRedSedBMiXZIpTFnGBvi',
redirectUri : 'http://localhost:3000/auth/kakao/callback'
}
app.get('/', (req,res)=>{
res.render('index.html')
})
app.get('/auth/kakao', (req,res)=>{
const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?
client_id=${kakao.cliendtID}&redirect_uri=${kakao.redirectUri}&
response_type=code`;
res.redirect(kakaoAuthURL);
})
app.listen(3000,()=>{
console.log('server start port: 3000')
})
** url 부분은 보기 좋게 엔터를 쳤지만 엔터가 있으면 오류남 !!! 쭉 - 이어서 URL쓰기
server on -> 로그인 클릭 -> 카카오 페이지가 나옴 -> 동의하고계속하기 -> 아까 설정한 /auth/kakao/callbck 주소로 보내짐
my local -------req----> kakao ---------> local 로 돌아옴
다시
my local ------req------> kakao 요청하는거 만들기
5. /auth/kakao/callback 받는 app.get추가
server.js 추가
app.get('/auth/kakao/callback',(req,res)=>{
res.send('ok');
})
ok 잘 뜸
6. AXIOS 사용해서 카카오로 요청(post로) 줄 것! axios 다운, 코드 작성
$npm install axios
server.js 작성
const axios=require('axios');
app.get('/auth/kakao/callback', async (req,res)=>{
let token;
try{
token=await axios({
method:'POST',
url:'https://kauth.kakao.com/oauth/token',
headers:{
'content-type':'application/x-www-form-urlencoded'
}
})
}catch(err){
res.json(err.data)
}
res.send('ok');
})
-> 에러가 뜸. 저 url 만 복사해서 브라우저에 넣고 엔터
-> 요게 뜬다. --------------->
7. qs 다운, 코드 작성 ( axios로 kakao에게 접근 토큰, access key 요청)
$npm install qs
server 코드 추가
const qs=require('qs');
qs 란? A querystring parsing and stringifying library with some added security.
server.js 코드 추가 2
app.get('/auth/kakao/callback', async (req,res)=>{
let token;
try{
token=await axios({
method:'POST',
url:'https://kauth.kakao.com/oauth/token',
headers:{
'content-type':'application/x-www-form-urlencoded'
},
data:qs.stringify({
grant_type:'authorization_code',
client_id:kakao.clientID,
client_secret:kakao.clientSecret,
redirectUri:kakao.redirectUri,
code:req.query.code,
})
})
}catch(err){
res.json(err.data)
}
console.log(token)
res.send('ok');
})
server on -> 로그인-> 동의하고 진행하기 -> 'ok' send됨
이 때 console.log(token) 내용
data 라는 속성에 우리가 필요한 access_token 이 들어 있음.
8. 로그인 시 가져올 정보 ( 동의항목) 선택 & server.js 코드에 추가
kakao developers - 메뉴 '로그인' - 동의항목 체크
** ID 를 잘 기억하기 !
server.js 추가
app.get('/auth/kakao', (req,res)=>{
const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?
client_id=${kakao.clientID}&redirect_uri=${kakao.redirectUri}
&response_type=cod
e&scope=profile,account_email`;
res.redirect(kakaoAuthURL);
})
** URL 부분은 엔터없이 쭉 써야함. 위는 보기 편하게 엔터를 침
scope=profile,account_email을 추가
get값은 원래 하나씩 보내지만 kakao쪽에서 알아서 처리할거라 괜춘
server.on - > 다시 들어가보기 !
필수, 선택 동의 창이 나온다. - > 동의하고 계속하기 click -> 'ok' send 완료
9. access token을 가지고 kakao에 다시 요청 보내기 (회원 정보 가져오기)
-> 이 이후에는 db, session 저장만 하면 로그인 기능은 완료 된다 !
server.js
app.get('/auth/kakao/callback', async (req,res)=>{
let token;
try{
token=await axios({
method:'POST',
url:'https://kauth.kakao.com/oauth/token',
headers:{
'content-type':'application/x-www-form-urlencoded'
},
data:qs.stringify({
grant_type:'authorization_code',
client_id:kakao.clientID,
client_secret:kakao.clientSecret,
redirectUri:kakao.redirectUri,
code:req.query.code,
})
})
}catch(err){
res.json(err.data)
}
let user;
try{
user=await axios({
method:'GET',
url:'https://kapi.kakao.com/v2/user/me',
headers:{
Authorization:`Bearer ${token.data.access_token}`
}
})
}catch(err){
res.json(err.data)
}
console.log(user)
res.send('ok');
})
data라는 속성 안에 우리가 필요한게 들어옴
data: {
id: 1739030102,
connected_at: '2021-05-21T02:27:37Z',
properties: {
nickname: '안뇽?',
profile_image: 'http://k.kakaocdn.net/dn/kqi/btq85gK9hw/ecW5iwL9kUFf3JmBGK1VK/img_640x640.jpg',
thumbnail_image: 'http://k.kakaocdn.net/dn/kqi/tq083gK9hw/ecW5iwL9kUFf6JmBG1VLK/img_110x110.jpg'
},
안뜰경우
1. 카카오 로그인 연결 해제하기
https://bottlecok.tistory.com/128
2. 인터넷 설정 - 쿠키 삭제하기
-> 다시 진행 -> 로그인부터 잘 나온다.
10. session-express 다운, 코드 작성
우리가 필요한 내용 : token, user
일단 오늘은user만 넣는 방법
$npm install express-session
server.js 코드 추가
const session=require('express-session');
app.use(session({
secret:'aa',
resave:true,
secure:false,
saveUninitialized:false,
}))
11. 가져온 data를 session에 담고 auth/info html에서 사용해보기
server.js
req.session.kakao=user.data; //session 추가
res.redirect('/'); // redirect('/') 로 수정 -> 그대로 있도록
})
session에 kakao라는 속성에 user.data 정보를 담음
views-index.html 수정
<a href="/auth/kakao">카카오 로그인</a>
<a href="/auth/info">회원정보</a>
server.js /auth/info 추가
app.get('/auth/info', (req,res)=>{
console.log(req.session);
let {nickname,profile_image} = req.session.kakao.properties
res.render('info.html',{
nickname,profile_image,
});
})
info.html 만들기
당신의 id는 {{nickname}}입니다.
프로필 사진
<img src="{{profile_image}}">
= > server on 하고 -> 로그인 클릭 -> 회원정보 -> nickname & profile_image 가 뜬다 !
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
[49일차 복습] JavaScript & Oauth 기능으로 kakao login 연결하기 (0) | 2021.05.25 |
---|---|
[49일차] 20210524 javaScript 카카오 oauth 로그인 kakao login (1) | 2021.05.25 |
[48일차] 20210521 KAKAO Login Javascript node.js express 카카오 로그인 연결하기 (2) | 2021.05.21 |
[47일차]20210520 팀프로젝트 리뷰 / oAuth 2.0 Passport 찍먹 / 내일 다시 정확하게 배우기로 함. (0) | 2021.05.21 |
[45일차] 20210517 팀프로젝트 css (0) | 2021.05.18 |