[VibeCoding] 04. 웹에서 설정 시

자! 이번에는 SNS 로그인을 붙일겁니다.

벌써부터 귀찮죠? 어쩌겠어요 해야죠.

지원 대상은

• Android: 네이버, 구글, 카카오
• iOS: 애플, 구글, 카카오

입니다.

많기도 해라.

제가 정한건 아니고요.

저희 로드형이 정했습니다.

 

여기서 중요한 점은 "구현"이 아니고, "이해"라고 생각합니다.

구현은 저희 형들이 할테지만, 이게 지금 어떻게 동작하고 있는지 이해를 하는 것이 저의 몫이라고 봐요.

 

이게 어떻게 동작하는지를 이해하지 못하면 문제가 생겼을 때 저는 아무것도 못 합니다.

• Access Token은 어디서 오고
• ID Token은 왜 필요한지
• 서버에서는 뭘 검증하는지
• 리프레시는 언제 일어나는지
• iOS에서 애플 로그인이 왜 까다로운지

이걸 모르면 형은 또 말합니다.

“이게 정상 동작입니다.”

그리고 저는 또 생각합니다.

“그런가…?”

 

아니라고요?

---

로그인 플로우 설명

1. 앱에서 각 SNS를 통해 토큰을 발급받습니다.
2. 이 토큰과 로그인 타입을 서버에 전달합니다.
3. 서버는 로그인 타입에 따라 분기 처리하여 토큰을 검증하고, 내부적으로 pk 값을 꺼냅니다.
4. 이 pk를 이용해 JWT 토큰을 새로 발급하고, 최종적으로 클라이언트에서 이 토큰을 관리합니다.

“SNS에서 이미 토큰을 주는데 왜 굳이 두 번이나 토큰을 발급하나요?”

 

그 이유는 바로, 구글·네이버·카카오·애플의 토큰 유효 기간이 제각각이기 때문입니다.
저는 그게 마음에 안 들어서, 서버에서 JWT로 통일해 관리하기로 했습니다.

---

그런데 우리는 개초보라고 가정합시다.

(사실 개 초보임ㅠ)

각 로그인 다 붙일 수 있겠습니까? 카카오 디벨로퍼, GCP 콘솔, 애플 디벨로퍼 센터, 네이버 클라우드 들어가면 설정 화면이 미로입니다.

각 각 로그인 붙일 수 있겠음?

 

https://hellojavascript.tistory.com/73

[RN] apple login

https://hellojavascript.tistory.com/72

[RN] google login (without firebase)

https://hellojavascript.tistory.com/71

[RN] kakao login

 

 

사실 난 할 수 있음ㅎ 아니 그게 아니고..

IDE 환경에서는 형이 코드 잘 짜줍니다. 그런데 이런 웹 콘솔 설정 작업은 형이 대신 클릭해주지 않습니다.

텍스트로 설명은 해줍니다.

“여기서 Redirect URI를 등록하세요.”
“여기서 Bundle ID를 맞추세요.”

그런데 화면이 조금만 달라도 헷갈립니다.

그래서 제 팁은 이겁니다.

각 웹 서비스 콘솔에 들어가서 개발자 도구를 켜세요.

그리고 해당 설정 영역 DOM을 통째로 복사해서 형에게 보냅니다.

그리고 한 마디 덧붙입니다.

“여기서 뭐 어쩌라고?”

 

그러면 형이 구체적으로 짚어줍니다.

“이 필드에 이 값 넣으세요.”
“여기 체크하세요.”
“이 URL은 이렇게 만드세요.”

이 방식으로 정확히 1시간 걸렸습니다.

 

중요한 점은 이해입니다.

일단 구현은 될테니, 반.드.시 이해를 하고 가요.

아 지금 어떤 식으로 동작하고 있구나.

---

DB 준비

하… 그럼 DB부터 구축해야겠죠? 갈 길이 너무 머네요.
민감한 영역이라 세부 설정값은 공개하지 않겠습니다.

개인적인 팁 하나만 적자면, 정규화(최대 5NF 지향) 를 지키려고 노력은 합니다.
다만 조인이 과도해지는 구간에서는 눈을 감는 편입니다.

 

어쨌거나 저쨌거나