웹과 앱에서 동시에 로그인 가능한 서비스 만들기

앱을 통해 웹뷰로만 서비스하는 앱을 만드는 것이 목표이고, 앱과 웹에서 자유롭게 로그인 가능한 구조를 만들고 싶었다.

 

웹과 앱에서 동시에 서비스하기 위해 필요한 로그인 구조를 설계하기 위해 기록합니다.

 

1. 앱 & 웹의 JWT 토큰의 분리

• 웹으로만 접속할 수 있고, 앱으로만 접속할 수 있다.
• 또한 만약 일원화하여 웹에서만 만들면 앱을 켤 때마다 웹뷰 로그인을 해주어야 한다.

⭐️ 그래서, 서버와 프론트에서 앱용 토큰과 웹용 토큰을 분리하는 것이 좋을 것 같다! ⭐️

 

2. 웹 로그인 구현 방법

1번에 입각해 두 API를 분리한다고 가정하면 편리상 `/sign-in-web`과 `/sign-in-app` 으로 표기하기로 한다.

• 소셜로그인 후 백엔드에 JWT 토큰 요청
  • /sign-in-web 과 같은 API에 소셜로그인 후 받은 토큰을 서버에 요청
  • 서버의 응답으로 받은 값을 쿠키에 저장 HTTP-ONLY 옵션 추가
    • 브라우저의 DB에 저장하는 것은 보안적 위험 요소 존재
• middleware.ts 세팅
  • refreshToken의 유효성을 검증하는 로직을 추가 해 유효하지 않으면 재발급

3. 앱 로그인 구현 방법

• 소셜 로그인 후 백엔드에 JWT 토큰 요청
  • /sign-in-app 호출 하여 응답 토큰 react-native-keychain에 저장
    • AsyncStorage, mmkv 등 다양한 기기 저장소에 저장해도 좋으나 keychain이 가장 높은 수준의 보안을 가짐
  • 앱내 메모리에 저장해, API 

4.  웹&앱 용 구현 방법

• 앱에서 로그인했다는 인증을 앱에서 발급 받은 access_token을 기반으로 함
• 앱에서 웹뷰를 로드하기 전에 /get-auth 와 같은 API에 앱에서 발급받은 access_token을 header에 함께 포함하여 보낸다. 그리고 응답받은 auth-code를 웹뷰를 처음 로드할 때 사용한다.
• 웹에서는 auth-code를 입력 받아 서버에게 JWT를 발급받는 API를 활용해 다시 쿠키에 저장한다.
• 즉 소셜로그인에서 사용되는 PKCE 방식을 웹과 앱끼리 한다고 보면 됨