[javascript] 이메일 인증 타이머 기능 구현 (+ 애플로그인 구현 썰)

애플로그인은 이메일이 필수가 아니라고요?

요즘 자체 회원가입 및 소셜 회원가입을 거쳐가면서 결국 이메일 인증 기능을 추가하기로 했다. 기존에 구현된 소셜 로그인에는 (카카오,네이버, 구글)은 별도로 이메일을 받기때문에 이런 인증절차를 자체회원가입에만 고민하면 되는 문제였는데 (사실 이 문제도 나중 스탭이였다..)🤨  애플로그인 기능을 구현 하냐! 마냐의 문제에서 결국 이메일 인증을 바로 다음 업데이트때 붙이기로 했다.. 애플로그인은 이메일을 제공할것인지 아닐것인지에 대해서 사용자가 직접 선택할 수 있다. (카카오의 경우 비지니스 계정을 등록하면 필수로 이메일을 받을 수 있다.) 어쨋든 대부분의 서비스는 이메일을 유니크값으로 사용자를 체크하기때문에 애플로그인에 대한 이메일 인증은 필수사항으로 보여졌다.

 

더 늦기전에 사용자한테 인증받자..

로그인에 관련되서는 이전부터 통합로그인을 외쳐대던 나로써는 로직을 재구성하는일이 조금은 버겁지만.. 이렇게라도 사용자를 체크하는것에 대해 매우 지지했다. 나중에 이메일 인증을 추가함으로써 발생되는 여러가지 문제들(기존 회원)을 이미 회의를 통해 여러번 어필하고 얘기했지만... 다음에 생각하자고 받아들여지지 않아... 추후에 일어날 문제들에 대해 혼자 골머리를 앓고 있었는데 이렇게라도 문제를 해결하니 속은 시원했다.

문제는 메일인증을 붙이는 플로우차트를 그려야되고... 구상해야하고... 기존로직을 추가해야하고... 퍼블리싱도 해야하는 😂 .. 그리고 시간이 없다는 문제 뿐이였다. 

 

 

 

대충 그려본 플로우차트

우선적으론 자체회원들을 위한 회원가입 중복체크 로직에 이메일 인증 필드를 추가하는 방식을 구현했고, 앞으로 추가될 애플로그인은 페이지단을 새로 구성해 이메일 인증화면을 따로 제작했다. 나머지 소셜로그인은 이메일 인증절차가 따로 필요가 없어서 생략했다. 

이때 구현한 코드 중 다른 프로젝트에서도 재사용이 가능한 5분 타이머 로직이다

 

 

 

💎 Vue 환경

let count = 300000; //5분 단위 60초 기준 60 * 분당

let interval = setInterval(() => {
  if (v === true && this.count > 0) {
    this.count = this.count - 1000;
  } else {
    clearInterval(interval);
    this.count = 300000;
  }
}, 1000);​

 

setInterval 함수를 사용해 1초마다 5분단위를 줄여주었다. 그리고 count가 0 밑으로 내려간 경우 clearInterval 함수를 사용해 멈춰주고 count값을 초기화 시켜주었다. 매우 간단한 로직이다.

 

💎 moment 사용

 <button v-if="certification && !reCertification">
  {{ moment(new Date(count)).format("mm:ss") }}
</button>

 

그리고 계산된 count를 시간으로 바꿔주고 "분 / 초" 포맷으로 바꿔주었다.

 

ios앱 인증은 회원탈퇴까지 구현되어야.. 

사실 애플이 까다롭다 얘기만 들었지 실제로 서비스에 도입할 때, 이렇게까지 까다로울줄은 몰랐다. (사실 까다로운것보다는 사용자의 편의를 위해 정해둔 규칙같다는 생각이 든다.. 다른 소셜 로그인들은 이런것 관련된 제약사항이 없기때문에) 앱 인증 직전에 앱 개발자분이 "큰일났어요! 회원탈퇴가 있어야 심사를 받을 수 있어요!" 라는 소리를 듣고나서 머리에 총맞은듯 멍해졌다. 구현하고있는 서비스에 탈퇴 기능이 없기때문에...ㅎㅎㅎㅎㅎ 뭔가 애플로그인을 통해.. 텅텅빈 프로젝트를 알차게 채워나가는 느낌이 들었다. 

미리 알았다면 좋았겠지만.. 사실 기획서조차 제대로 없었던 서비스이기 때문에 한걸음 더 발전했다는 생각으로 받아들이려고 한다.

 

 

 

아래는 내가 구현하고싶은 통합인증 방식이다.

1) 일반 회원가입 -> 회원가입 
2) 소셜 로그인 가입 시 -> 소셜 로그인 이후 -> 일반회원가입 창으로 이동 -> 일반회원 가입(아이디나 닉네임 랜덤) -> 일반회원+소셜 로그인 연동 완료 

 

>> 결국 한번은 일반회원가입을 거쳐서 통합회원 인증을 받아야 사용자가 "어? 내가 뭘로 가입햇지? 내 아이디가 뭐지?" 라며 여러가지 로그인방법을 체크하지 않아도 하나의 이메일로 회원가입 및 비밀번호 찾기 / 동일 유저 체크가 가능해진다고 생각한다.

이렇게 하면 유저관리에 매우 유용하고 사용자들도 여러 아이디 혼동없이 기존 혜택들을 혼동없이 누리면서 서비스이용이 가능해진다..

소셜 로그인에 관련해서 최근들어 관심이 많아져서 여기저기 찾아보다가 나름 괜찮은 글을 발견해서 같이 올린다 (나중에 내가 보려고)🧐

소셜로그인, 통합이 어려우면 한 개만 사용하게 만든다