[ReactNative/Node.js/Rest API] WebView를 사용하여 Kakao Login 구현하기 (2)
이전글에서 webview로 카카오 로그인 창을 제공하는 것까지 소개하였다.
Access Token 발급 및 사용자 정보 조회하기
처음에는 카카오 로그인 웹에서 계정 정보 입력 완료 후 redirect url(나의 api 서버 경로)로 보내주는 인가 코드를 서버에서 받아 처리하여 access token을 발급받고
이 토큰을 사용하여 사용자 정보(내 경우 회원 번호만 필요했기에 정확히는 토큰 정보에서 user_id를 받아왔음.)를 반환 해주도록 구현하였다.
(프론트 -> 웹뷰 -> 서버 -> 웹뷰 -> 프론트)
//서버 코드 요약
const {getKakaoUserId} = require('../services/get_kakao_user_id');
const {getKakaoToken} = require('../services/get_kakao_token');
const { insertKakaoUserNumberToDb } = require('../services/promise-mysql');
const myQurey = require('../query/query');
exports.returnKakaoUserId = async (req, res) => {
try{ //인가 코드를 req로 받음
console.log('Enter return KakaoUserId')
const tokenData = await getKakaoToken(req);
const kakaoUserNumber = await getKakaoUserId(tokenData)
await insertKakaoUserNumberToDb(myQurey.insertUserNumber, kakaoUserNumber)
res.json({userId: kakaoUserNumber});
}catch(error){
console.log('Controller Error: ', error)
}
}
하지만 서버에서 json 형태로 반환해준 데이터가 어디로 전송되는지 정확히 알 수 없었고
생성해준 webview로 전달 되었을 것이라 예상 했지만 webview에서 받은 데이터를 어떻게 리액트 네이트브 앱으로 전송하는지도 알지 못했다.
정말 많은 레퍼런스를 참조한 결과 생성한 웹뷰에 event handler로 데이터를 받아 postMessage로 앱으로 전송 할 수 있을 것 같았는데... 결국 webview에 대한 본인의 지식 부족으로 해결하지 못했다 ㅜㅜ
하여 webview에서 url에 붙여 앱에 반환해 주는 인가코드를 axios를 사용하여 따로 서버에 전송해 주는 방법을 사용하였다.
(프론트 -> 웹뷰 -> 프론트 -> 서버 -> 프론트)
(이전글에 onMessage={event => { parseAuthCode(event.nativeEvent['url']); }} 부분)
const parseAuthCode = async url => {
const exp = 'code='; //url에 붙어 날라오는 인가코드는 code=뒤부터 parse하여 get
const startIndex = url.indexOf(exp); //url에서 "code="으로 시작하는 index를 찾지 못하면 -1반환
if (startIndex !== -1) {
const authCode = url.substring(startIndex + exp.length);
console.log('access code :: ' + authCode);
await axios
.post('서버 url 경로', {
params: {
code: authCode,
},
})
.then(res =>
AsyncStorage.setItem(
'userNumber',
JSON.stringify(res['data']['userId']),
),
);
navigate('Home', {screen: 'Home'});
}
인가코드는 url에 붙어서 오기 때문에 위처럼 인가코드를 따로 파싱해 주어야 했다. 최종적으로 user_id값을 반환 받는데 성공하였고 이후 최초 로그인 여부를 user_id의 존재 여부로 판단하기 위해 asyncStorage로 로컬에 저장해 주었다.
하.지.만!
여기서 두번째 이슈가 생겼다.
Not Found: 404 Error

네비게이션을 통해 홈화면으로 이동하기 전 아주 잠깐이지만 404 error 페이지가 출력된다...
이는 기존에 서버 라우터에 get으로 구현했던 것을 post로 바꿔주면서 redirect url로 서버에 인가코드를 전송할때 통신이 실패하면서 생기는 이슈였다.
const express = require('express');
const router = express.Router();
const kakaoController = require('../controller/kakao_controller');
router.post('/kakao/callback',kakaoController.returnKakaoUserId); //axios를 통해 인가코드 받는 라우터
module.exports = router;
카카오 로그인 웹에서 redirect 자체를 막을 순 없나 찾아보다 방법을 찾지못해
그냥 get라우터도 만들어 처리중 화면을 따로 만들어 주었다.
const express = require('express');
const router = express.Router();
const kakaoController = require('../controller/kakao_controller');
router.post('/kakao/callback',kakaoController.returnKakaoUserId); //axios를 통해 인가코드 받는 라우터
router.get('/kakao/callback', function(req, res, next) {
res.render('loading');
});
module.exports = router;
전체 코드 및 pug를 사용한 express 화면 생성은 다음글에서 정리하겠다.
'React-native > KakaoLogin' 카테고리의 다른 글
카카오 로그인 API 사용을 위한 애플리케이션 등록 (0) | 2022.04.28 |
---|---|
[ReactNative/Node.js/Rest API] WebView를 사용하여 Kakao Login 구현하기 (3 ) (0) | 2022.04.28 |
[ReactNative/Node.js/Rest API] WebView를 사용하여 Kakao Login 구현하기 (1) (0) | 2022.04.28 |