일단냥은 일본어 능력 시험인 JLPT 단어들을 모아둔 단어장으로 5400단어와 그에 맞는 예문을 제공하고 있어요! 한번 사용해 보세요 🤭

⛩️ IOS 바로가기, AOS 바로가기 ⛩️

0. 왜 파이어베이스 커스텀 토큰 로그인을 선택했어요?

기존에 서버가 없었던 일단냥에서 일단냥 웹앱 적용기에서 커뮤니티를 적용하는 데 있어 로그인 기능이 필요했었어요.

마침 일단냥에서는 서버리스로 파이어베이스를 선택했기에 로그인을 파이어 베이스를 이용해 구현할 생각이었어요.

일단냥에서 카카오 소셜 로그인을 지원하고 싶었지만 파이어베이스 로그인 제공업체에는 Google, Apple, Facebook과 같이 여러 업체가 있긴해도 카카오 로그인은 없었어요.

하지만 위 사진에서 제공하지 않는 소셜 로그인 업체를 사용하려면 파이어베이스 측에서 제공하는 커스텀 토큰 로그인이라는 기능을 사용하면 카카오 로그인, 네이버 로그인과 같은 외부 소셜 로그인도 가능하다고 들었어요.

그래서 결론은 커스텀 토큰 로그인을 적용하는 과정에 있어 생겼던 문제와 구현 과정을 기록하고자 해요

1. 잘못된 커스텀 토큰 로그인 방식을 사용했었어요

기존 일단냥 웹뷰에 적용한 커뮤니티는 4월 16일부터 5월 18일까지 운영하다가 커스텀 로그인 방식이 잘못됨을 깨닫고 임시 폐쇄를 결정하였어요.

왜 커스텀 로그인 방식이 잘못됨을 깨달았냐면 아래에 차례차례 설명할게요.

먼저 일단냥이 구현한 방식은

카카오 SDK 로그인(앱) -> 카카오 유저 정보로 파이어베이스 이메일 로그인 -> 이메일 로그인으로 받은 토큰으로 커스텀 토큰 로그인 -> 로그인 완료

이러한 방식이었어요.

즉 파이어베이스 로그인을 1번만 하면 되는 것을 이메일 로그인하고 또 커스텀 토큰 로그인을 해서 2번을 한 것이었어요.

파이어베이스의 커스텀 토큰 만들기 공식 문서를 보면 커스텀 토큰 로그인을 하기 위해선 createCustomToken()에 토큰을 넣는데 어떤 토큰을 넣는지 몰랐어서 파이어 베이스 이메일 로그인에서 발급받은 토큰을 넣어 2번이나 로그인을 진행했던 것이었어요.

이렇게 파이어베이스 로그인을 2번 하게 되어서 문제점 3가지가 생겼어요.

1.1 기존 로그인 문제점 1번째가 뭐예요?

카카오 SDK 로그인으로 받은 유저 정보로 파이어베이스 이메일 로그인을 해서 공식 문서에서 권하는 올바른 로그인 루트가 아니었던 점이에요

1.2 기존 로그인 문제점 2번째는 뭐예요?

파이어베이스 이메일 로그인으로 해버려서 카카오 로그인이 의미가 없어지고 한술 더 떠서 커스텀 토큰 로그인을 카카오 토큰이 아닌 파이어베이스 이메일로 로그인한 토큰을 넣어서 의미 없는 짓을 해버린 점이에요

1.3 3번째는 파이어베이스 보안 규칙이 생각대로 작동하지 않았어요

이런 로그인에 문제점이 있다고 느끼고 깨닫게 된 것은 파이어베이스 보안 규칙을 적용하고부터였어요.

보안규칙에서 request.auth 라는 값으로 요청한 유저의 정보를 담고 있는 데이터가 있는데 이 데이터를 가지고 자기가 작성한 게시글은 자신만 수정하거나 삭제가 가능하는 등 보안에 관련된 규칙을 짜는데 이게 계속 풀리고 제대로 기능하지 않았어요.

그래서 로그인 로직을 유심히 살펴본 와중에 알게 된 사실이 있는데 유저 검증 토큰을 파이어베이스 측에서 1번째로 로그인한 이메일 로그인 토큰을 가지고 자동으로 검증하고 있었던 것이었어요.

기존 로직에서는 2째로 로그인한 커스텀 토큰 로그인의 토큰을 갖고 있었는데 이는 의미가 없었어요 그래서 2번째 토큰으로 재발급을 해도 보안규칙에 유효하지 않았고 1번째 로그인으로 재발급을 받지 않았어서 간헐적으로 로그인이 풀리게 되었던 거예요. (재발급은 2번째 토큰으로 했었음)

이중 로그인으로 인해 로그인이 풀리는 이슈와 더불어 보안규칙이 적용되지 않았던 이슈 때문에 문제를 해결하기 위해서 고군분투한 결과 기존 커스텀 토큰 로그인 로직에 큰 문제점이 있다는 것을 깨닫게 되었던 것이에요.

무엇보다 알고 있는 백엔드 친구가 예전에 구현해놓은 커스텀 토큰 로그인을 공유해줘서 커스텀 토큰 로그인 순서와 방법에 대해 많은 도움이 되었어요.

2. 그래서 어떻게 잘못된 커스텀 토큰 로그인 로직을 해결했어요?

먼저 문제점을 파악하고 나서 급하게 일단냥에서 운영 중인 커뮤니티를 폐쇄한다는 공지를 내렸어요.

이런 비극은 너무 빠른 기능 개발에만 몰두해 보안성, 안전성, 올바른 로직에 더 신경 쓰지 않고 바로 배포해버린 탓이에요.

커뮤니티 이용자는 약 60명이었고 공지를 올려서 약간의 탈퇴할 시간을 준 뒤 커뮤니티를 폐쇄하게 되었으며 당연히 이후에 캐릭터 꾸미기에 필요한 악세서리와 같은 아이템을 보상할 생각을 가지고 있어요. 죄송합니다 😢

2.1 운영 중인 커뮤니티를 폐쇄하면서 느낀 점이 있어요

소규모이며 회원도 많지 않았지만 실제로 운영 중인 커뮤니티를 폐쇄하면서 느낀 점이 많았어요

소위 말하는 기능을 빨리 개발해서 내놓으면 유저들이 좋아할 줄 알았고 개인적으로 잘하는 개발자라고 은연중에 생각했었고 그로 인해 덜 완성된 커뮤니티가 배포되었고 결국 폐쇄까지의 길로 들어서게 된 것이었어요.

기능을 개발할 때 해당 기술에 대해 여러 가지가 있을 텐데 내 서비스에 어떤 기술을 적용하면 좋은지 와 그 기술로 인해 발생할 문제점과 이점들을 하나씩 검토한 다음에 기능을 구현하고 구현하고 나서도 배포 전에 수많은 테스트도 했어야 했어요.

유저들에게 더 많은 기능을 사용하게끔 하고 싶음 마음이 앞선 것은 좋지만 이렇게 빨리 개발하다 보면 탈이 나기 마련이고 오히려 탈을 고치려고 더 많은 시간이 소요된다는 사실을 알게 되었어요.

그리고 일본어를 좋아하고 좋아해서 일본어를 공부하는 서비스(앱)를 만들어 배포했는데 이 개발하는 것과 사용자들과 소통하는 게 너무 재미있어서 너무 게임처럼 운영해왔던 것이었어요.. 그렇기에 이번 폐쇄로 인해 반성을 많이 하게 되었고 운영에 있어 더욱 책임감을 느끼게 되는 계기가 되었고 이제는 다운로드 수도 약 2000명이 돼서 믿고 이용해 주는 사용자들을 위해서 다시는 이와 같은 실수는 없도록 다짐하는 계기도 되었어요.

2.2 그래서 수정된 커스텀 로그인 로직은 뭐예요?

여기서 알아야 할 점은 일단냥에서 커뮤니티는 웹뷰에서 구현했으므로 간편 로그인을 위해 카카오 로그인은 앱에서 구현하였고 파이어베이스 측 로직은 웹에서 구현하였어요.

로직 순서

1. 유저가 리액트네이티브 앱에서 카카오 SDK 로그인 버튼을 클릭
2. 카카오 서버한테 카카오 유저 정보를 받음
3. 웹에서 카카오 유저 정보로 파이어베이스에게 커스텀 토큰을 발급받고 커스텀 토큰 로그인을 요청
4. 커스텀 토큰 로그인을 하면 파이어베이스에서 ID 토큰, 리프레시 토큰을을 발급 받음
5. ID 토큰으로 일단냥 유저 정보를 조회하고 로그인 완료
6. 이후에는 자유롭게 파이어베이스 서버에게 요청

이렇게 구현하면 유저 정보가 유출되는 가능성도 엄청나게 줄었고 로그인이 풀리지 않아 파이어베이스 보안 규칙도 제대로 동작해요.

그리고 로직 중간중간에 혹시 모를 틀린 로직이 있을 수도 있어 틀린 점이 있다면 댓글로 알려주시면 감사하겠습니다.