- https://developers.kakao.com/console/app
- 애플리케이션 추가하기
- REST API 키 메모
- 플랫폼 설정하기 - Web 플랫폼 등록
- 사이트 도메인 입력 (http://localhost:3005)
- 카카오 로그인 사용 시 Redirect URI를 등록해야 합니다. 등록하러 가기
- 활성화설정 ON
- Redirect URI 등록 (http://localhost:3005/auth/kakao)
- 동의항목 체크 (닉네임, 프로필사진, 카카오계정, 카카오메시지 전송 등) 필수동의 및 선택동의 - 사용자에게 값이 없는 경우 카카오 계정 정보 입력을 요청하여 수집
- 보안 Client Secret 코드 생성 / 활성화 사용
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api
step 1 / step 2 / step 3 순서대로 하기
npm install express cors nunjucks axios qs
auth.js
const express = require('express')
const app = express()
const cors = require('cors')
const nunjucks = require('nunjucks')
const axios = require('axios')
const qs = require('qs') // {a : 'asdf', b : 'aa' } => a=asdf&b=aa
/*
REST API 키
Redirect URI : http://localhost:3005/auth/kakao
Client Secret코드
*/
const client_id = ''
const redirect_uri = 'http://localhost:3005/auth/kakao'
const client_secret = ''
const host = 'https://kauth.kakao.com'
app.set('view engine', 'html')
nunjucks.configure('views', {
express:app,
})
app.use(cors())
app.get('/', (req, res)=> {
res.render('index')
})
app.get('/kakao/login', (req, res)=> {
const redirect = `${host}/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code`
// /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code
res.redirect(redirect) // 실제 kakao 주소로 보낼거에요
})
app.get('/auth/kakao', async (req, res)=> { // 에러나려나?
const {query:{code}} = req
// axios
// 1. url
// 2. data = body 내용
// 3. header = option
const body = qs.stringify({
grant_type : 'authorization_code',
client_id,
redirect_uri,
code,
client_secret
})
const headers = { 'Content-type' : 'application/x-www-form-urlencoded;charset=utf-8' }
const response = await axios.post(`${host}/oauth/token`, body, headers) // 리턴값 프로미스
console.log(response.data)
try {
const { access_token } = response.data
const url = 'https://kapi.kakao.com/v2/user/me'
const userinfo = await axios.post(url, null, {
headers : {
"Authorization": `Bearer ${access_token}`,
"Content-type": "application/x-www-form-urlencoded;charset=utf-8"
}
})
console.log( userinfo.data )
} catch (e) {
}
res.send('hello')
})
app.post('/oauth/token', (req, res) =>{
})
app.listen(3005, ()=>{
console.log('서버시작')
})
views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="/kakao/login">카카오 로그인</a>
</body>
</html>
등록된 카카오계정 서비스해지 하기
카카오톡
...
상단메뉴에 톱니바퀴
개인/보안
개인정보 관리
하단 드래그 -> 카카오계정 및 연결된 서비스
하단 드래그 -> 연결된 서비스 관리
외부 서비스 ->