앱개발 진행 중 카카오 소셜로그인을 사용하기로 했고 이를 위해 카카오 디벨로퍼에 내 앱을 등록하는 과정을 기록하고자 한다. 1.먼저 https://developers.kakao.com/ 에서 카카오 계정으로 로그인한다. 2. 상단에 내 애플리케이션으로 이동한다. 3.애플리케이션 추가하기를 누르고 앱 이름과 사업자 등록명 등을 자유롭게 입력한다. 4.플랫폼 설정으로 이동하여 자신의 패키지명과 키해시를 등록해준다. 패키지명은 본인 프로젝트의 AndroidManifest.xml 패키지명과 일치시켜줘야한다. 참조 : https://develop-writing.tistory.com/33 5.카카오 로그인을 구현할 방식에 맞춰 필요한 KEY값을 따로 저장한다.(내 경우 REST API KEY) 6.왼쪽 카카오 로그..

pug로 express 로딩 화면 구현 및 전체 코드 // views/loading.pug html head link(rel='stylesheet', href='/stylesheets/style.css') body div#divPosition img(src='/images/loading.gif') //css body { font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } a { color: #00B7FF; } #divPosition { background-color: white; position: absolute; width: 400px; height: 200px; margin-left:-200px; margin-top:-100px; top: 50%..

이전글에서 webview로 카카오 로그인 창을 제공하는 것까지 소개하였다. Access Token 발급 및 사용자 정보 조회하기 처음에는 카카오 로그인 웹에서 계정 정보 입력 완료 후 redirect url(나의 api 서버 경로)로 보내주는 인가 코드를 서버에서 받아 처리하여 access token을 발급받고 이 토큰을 사용하여 사용자 정보(내 경우 회원 번호만 필요했기에 정확히는 토큰 정보에서 user_id를 받아왔음.)를 반환 해주도록 구현하였다. (프론트 -> 웹뷰 -> 서버 -> 웹뷰 -> 프론트) //서버 코드 요약 const {getKakaoUserId} = require('../services/get_kakao_user_id'); const {getKakaoToken} = require('..

리액트 네이티브 앱 프로젝트를 진행하면서 카카오 소셜로그인을 구현한 과정을 기록하고자 한다. 개발 환경은 아래 이미지로 요약하고자 한다. 카카오 로그인 로직을 간단하게 요약하자면 아래와 같다. 1.react-native 프론트 단에서 webview를 사용하여 rest api 방식으로 카카오 로그인 창을 띄워준다. 2.사용자가 카카오 계정 정보를 입력하면 url형태로 인가 코드를 반환 받는다. 3.인가 코드를 api 서버에 전송한다. 4-1.api 서버는 인가 코드를 통해 access token을 발급받는다. 4-2.토큰으로 사용자의 카카오 회원번호(user_id)를 받아 프론트와 DB에 전송한다. 5.프론트는 user_id를 asyncstorage에 저장하고 이후 최초 로그인 여부를 asyncstorag..