React Native - 6 - 소셜 로그인 (네이버, 카카오, 구글) 정보
React Native - 6 - 소셜 로그인 (네이버, 카카오, 구글)
본문
모바일 환경에서는 네이버, 카카오, 구글 3가지의 소셜 로그인을 구현
- 페이스북, 페이코 등의 추가적인 소셜 로그인은 Backend API에 맞춰 추가로 구현 예정입니다.
모바일 소셜 로그인은 아래와 같은 방식으로 구현되었습니다.
1. 소셜 로그인 공급업체 인증을 통하여 Access Token을 받아옵니다.
(편의상 Social Access Token이라 칭하겠습니다.)
2. Backend 서버와의 연동
- Social Access Token을 header에 담아 서버에 로그인 요청을 합니다.
- 서버에서는 넘어온 Social Access Token을 통해 유저 id를 얻고,
1) 해당 유저가 가입되어 있으면
Server에서 사용할 Access Token 등
(Acess Token, Refresh Token 및 만료시간 - 편의상 Server Access Token이라 칭하겠습니다) 을
response body에 담아 보냅니다.
2) 미가입 회원이면
유저를 DB에 생성한 후에 Server Access Token을 response body에 담아 보냅니다.
3. Social Access Token과 Server Access Token을 Keychain에 저장하고 로그인 상태로 전환합니다.
프로필 email 관련
카카오 로그인의 경우, email이 없는 카카오 계정을 고려하여 다음과 같이 반영하였습니다.
Naver, Google 로그인의 경우 Profile 업데이트시 email은
소셜 로그인 공급 업체에서 제공하는 email을 고정으로 하였고,
일반 로그인, 카카오 로그인의 경우 email 수정이 가능하도록 했습니다.
소셜 로그인 개발자 등록 관련
각 로그인 방식들은 아래와 같은 키 발급 및 등록 과정이 필요합니다.
네이버: 클라이언트 ID, 클라이언트 Secret 발급하여 .env 파일에 기재
카카오: 네이티브 앱 키를 발급하여 .env 파일에 기재
구글: (Android) SHA-1 인증서 디지털 지문 등록
커밋 내역:
2
댓글 3개
웹앱으로 구현시에는 네이버, 카카오의 앱키를 env 파일에 기재 안해도 되나요 ?
@swkim87 웹앱 등 콜백 url 방식으로 하시면 기존처럼 그누보드 관리자에서 클라이언트, 시크릿 키를 관리합니다.
@메리7 기존 방식대로 하면 되는군요~ 감사합니다!