여러가지 구현 코드들을 찾아보았었는데, 찾다보니 카카오 디벨로퍼스 Dev Talk 게시판에서
카카오측 관리자가 게시글로 제시해준 node.js로 작성한 카카오 api 사용 예시안 파일이 있어서 그 내용을 참고해서 현재 카카오 로그인 기능을 구현중이다.
본 내용에 대한 원본 출처를 첨부한다.
https://devtalk.kakao.com/t/rest-api-node-js/119865
[rest api 예제] node.js- 카카오 로그인, 카카오 친구목록 조회, 나에게 메시지 발송
node.js로 “카카오 로그인, 카카오 카카오 친구목록 조회, 나에게 메시지 발송” 테스트 해볼 수 있는 간단한 예제입니다. demo.zip (2.4 KB) [실행방법] localhost 웹서버에 demo.html을 복사합니다. 내 애
devtalk.kakao.com
여기서 확인해볼 수 있다.
내가 지금까지 찾아본 내용중에서는 가장 확실하게 카카오 로그인 기능을 확인해볼 수 있는 예제안 이라고 생각된다.
구글에
'카카오 로그인 express rest api'
이라고 검색하면 나오는 글들중에서 꽤나 윗쪽에서 확인해볼 수 있는 글이었는데
이걸 여러가지 글들을 다 지나치고 나서야 발견해서 꽤나 오랜 시간이 걸려서 참고하게 되었다.
다음에도 혹시 스스로 카카오 로그인 기능을 구현할 수 있을것 같아서 기록해둔다.
demo.html 파일의 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<title>Kakao REST-API Node.js example</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>1. 카카오 로그인 및 프로필 조회 예제</h1>
<pre>
- [KOE101, KOE004] 내 애플리케이션>제품 설정>카카오 로그인 > 활성화 설정 : ON
- [KOE006] 내 애플리케이션>제품 설정>카카오 로그인 > Redirect URI : http://localhost:4000/redirect
</pre>
<div class="text-center">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function REST_Call(path) {
axios.get('http://localhost:4000' + path, { params: {}, withCredentials: true })
.then(({ data }) => {
console.log(data); $('#contents').html(JSON.stringify(data));
})
.catch(err => {
console.log(err); $('#contents').html(JSON.stringify(err));
});
}</script>
<a href="http://localhost:4000/authorize">
<img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" width="222" />
</a><br />
<button onclick="REST_Call('/profile')">프로필 조회 </button><br />
<textarea id="contents" rows='20' cols='100'></textarea><br />
<a href="http://localhost:4000/authorize?scope=friends,talk_message">
<h2> 친구목록 조회와 메세지 발송 권한 획득</h2>
</a><br />
<button onclick="REST_Call('/friends')">친구목 조회 </button>
<button onclick="REST_Call('/message')">나에게 메시지 발송 </button><br />
</div>
</body>
</html>
app.js 서버 코드
const express = require('express');
const session = require('express-session');
const cors = require("cors");
const qs = require("qs");
const axios = require('axios');
const app = express();
const port = 4000;
app.use(session({
secret: 'your session secret',
resave: false,
saveUninitialized: true,
cookie: { secure: false }
}));
let corsOptions = {
origin: 'http://localhost',
credentials: true
}
app.use(cors(corsOptions));
const client_id = '이곳에 카카오로부터 받은 key 값을 넣기. .env로 넣어야 안전'; // 나중에 .env 파일로 따로 빼서 저장해야한다.
const redirect_uri = 'http://localhost:4000/redirect';
const token_uri = 'https://kauth.kakao.com/oauth/token';
const api_host = "https://kapi.kakao.com";
const client_secret = '';
app.get('/', function (req, res) { //이 부분은 기존 예시 파일에 없었는데 내가 첨부했다. 화면에 demo.html을 띄우기 위해 첨부함.
res.sendFile(__dirname + '/views/demo.html');
})
app.get('/authorize', function (req, res) {
let { scope } = req.query;
var scopeParam = "";
if (scope) {
scopeParam = "&scope=" + scope;
}
res.status(302).redirect(`https://kauth.kakao.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code${scopeParam}`);
})
async function call(method, uri, param, header){
try {
rtn = await axios({
method: method,
url: uri,
headers: header,
data: param
})
} catch (err) {
rtn = err.response;
}
return rtn.data;
}
app.get('/redirect', async function (req, res) {
const param = qs.stringify({
"grant_type": 'authorization_code',
"client_id": client_id,
"redirect_uri": redirect_uri,
"client_secret": client_secret,
"code": req.query.code
});
const header = { 'content-type': 'application/x-www-form-urlencoded' };
var rtn = await call('POST', token_uri, param, header);
req.session.key = rtn.access_token;
res.status(302).redirect(`http://localhost/demo.html`);
})
app.get('/profile', async function (req, res) {
const uri = api_host + "/v2/user/me";
const param = {};
const header = {
'content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + req.session.key
}
var rtn = await call('POST', uri, param, header);
res.send(rtn);
})
app.get('/friends', async function (req, res) {
const uri = api_host + "/v1/api/talk/friends";
const param = null;
const header = {
'Authorization': 'Bearer ' + req.session.key
}
var rtn = await call('GET', uri, param, header);
res.send(rtn);
})
app.get('/message', async function (req, res) {
const uri = api_host + "/v2/api/talk/memo/default/send";
const param = qs.stringify({
"template_object": '{'+
'"object_type": "text",'+
'"text": "텍스트 영역입니다. 최대 200자 표시 가능합니다.",'+
'"link": {'+
' "web_url": "https://developers.kakao.com",'+
' "mobile_web_url": "https://developers.kakao.com"'+
'},'+
'"button_title": "바로 확인"'+
'}'
});
const header = {
'content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + req.session.key
}
var rtn = await call('POST', uri, param, header);
res.send(rtn);
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
일단 기본적인 부분으로 이걸 기록해두고,
다음에는 이를 기반으로 내가 필요로 하는 형태로 예시안을 만들어서 블로그에 포스팅 해보아야겠다.
+++++
추가적으로, 처음에 카카오 로그인으로 넘어가고, 거기서 확인을 누르고 난뒤에,
다시 카카오 로그인을 누르면,
이와 같이 다시 카카오를 통한 로그인 화면이 뜨지 않는데,
이와 관련하여서 많은 참고자료들을 보다가 관련된 내용을 봤던 기억이 있어서 다시 구글링을 하다보니 또 만나게된 블로그 글에서,
이와같은 글을 볼 수 있었는데,
아무래도 이와 같은 상황에 해당한다는 생각이 든다.
내가 참고한 블로그를 첨부해본다.
https://han-py.tistory.com/417
[React/Nodejs] 카카오 로그인 연결하기
카카오 로그인을 진행해 보자. 기본적인 작동 방식은 여기를 눌러서 확인하자. 기본 셋팅은 할수 있다 판단하고 글을 적어보겠다. 사실 쉽게 사용하기 위해 만들어진 라이브러리도 많다. 그러나
han-py.tistory.com
이 글의 댓글에도
이와같은 내용을 볼 수 있었는데, 현재 내 상황을 일으키는 상태와 같다고 보여졌다.
이렇게 쿠키를 찾을 수 있었고,
일단 내가 이걸 어떻게 하는지 잘 몰라서 그러는지,
지웠는데도 다시 카카오 계정으로 로그인 을 클릭했을때 되지 않는구나
그리고 다시 홈으로 되돌아오면 또 쿠키가 남아있는데, 이게 다시 받아온건지 혹은 원래 있던게 다시 생긴건지
이런건 아직 잘 모르겠다.
일단은 아직 잘 모르는 상태이지만 위와 같은 문제가 발생했을때 혹시 실마리가 될수도 있을 부분이라 생각해서 첨부해놓는다.
이와 관련된 내용은 다음에 다시 수정해보도록 하겠다.
그리고 쿠키 관련된 내용에 대해서 덧붙이기 위해서 첨부한
https://han-py.tistory.com/417
이 블로그에 있는 글이 꽤 도움이 많이 되는 글이라는 생각이 든다. 경우들을 나누어서 어떤식으로 구성을 해나가야 하는지에 대해서 힌트를 많이 주는 블로그 같다. 참고해보면 좋을것 같다.
'크래프톤 정글 > 웹' 카테고리의 다른 글
| JWT 토큰의 클라이언트 저장 위치에 관하여. (0) | 2023.08.02 |
|---|---|
| node.js 상에서 axios에 대하여. (0) | 2023.08.02 |
| filter() 메서드를 이용해서 객체를 걸러내는 방법에 대해서. (0) | 2023.08.01 |
| req.body를 사용하기 위해서 등록하는 express.json()와 express.urlencoded({extended:false}); (0) | 2023.08.01 |
| web server와 was. 프론트엔드 서버와 백엔드 서버라고 하는 표현이 잘못된 표현이라는 나의 생각에 관한 글. (0) | 2023.07.31 |
