해외파트너센터 개발 오픈기 — 2. 이메일 인증 공통 서비스 개발 이야기

안녕하세요. 파트너웹개발팀 민티입니다.

저는 바나께서 i18n을 설정하고, 일부 페이지에 적용 테스트를 진행하던 도중에 해외 파트너 센터에 투입되었습니다! 제가 맡게 된 파트는 로그인, 계정 관리였습니다.

🚩 프로젝트 배경

기존 국내 파트너 센터 사용자는 휴대폰을 통해 본인 인증을 했지만, 현재 사용 중인 인증 솔루션에서는 해외 휴대폰 번호를 통한 인증을 지원하지 않기 때문에 이 방식으로는 인증이 불가했습니다.

처음에는 사용자가 접속한 국가를 기준으로 인증 방식을 분기하려 했으나, SSR(서버 사이드 렌더링) 환경에서는 국가 정보를 실시간으로 불러올 수 없었습니다 . 그래서 언어 설정을 통해 해외 파트너 센터 / 국내 파트너 센터 중 어느 쪽에 속하는지 프론트엔드에서 전달 받아 인증 방식을 분기하려 했습니다. 그렇지만 계정 관리가 국가별로 분리되어 있어 로그인 시점부터 해외 파트너인지 국내 파트너인지 명확하게 알아야 했습니다.

결국, 해외 파트너용으로 별도의 도메인을 설정하고 해당 URL로 로그인하기로 했습니다. 이를 위해 해외 파트너용 로그인 페이지를 별도로 만들고, 새로운 도메인의 로그인 랜딩 페이지와 연결했습니다.

고심을 거듭한 끝에, 해외 파트너는 이메일 인증을 기본 방식으로 채택하여 계정을 관리하도록 설계했습니다. 기존 여기어때 웹/앱에서도 이메일 2차 인증 방식이 있었지만, 이 방식은 여기어때 이메일 인증으로 된 회원번호 기반이라 글로벌 서비스 확장에 한계가 있었습니다. 따라서 새로운 설계가 필요했습니다.

그 설계를 구현하기 위해 유저혜택개발팀에서 여러 도메인에서 사용할 수 있는 이메일 인증 공통 서비스 를 개발해주셨습니다. (🍒체리 감사합니다!!) 이를 통해 해외 파트너 센터에서 이메일 인증을 처음으로 도입하게 되었습니다. 이 서비스는 이메일 인증 요청 시, 고정된 emailType 값을 사용해 다양한 이메일 타입에 따라 인증 메일을 발송하고, 인증 key를 받아 토큰으로 처리합니다.

지금부터는 해외파트너 센터의 [비밀번호 찾기] 를 예시로 이메일 인증 절차 및 코드를 알아보겠습니다.

🚩 개발 환경

• React
• Next.js
• Recoil

🚩 이메일 인증 절차 (예시: 비밀번호 찾기)

1. 인증 메일 발송

• 이름과 이메일을 입력하면, 인증 메일이 발송됩니다.
• email, emailType(고정값), referer 값을 서버로 보내 인증 키를 받습니다.

const onSubmitHandler = async (data) => {
    const { name, email } = data;
    const formData = {
      name,
      email,
    };
    const emailType = 'FIND_PASSWORD'; // 비밀번호 찾기 emailType 코드 (*고정값)
    try {
      // 비밀번호 찾기 요청
      const requestParams = { email, emailType, referer: 'PASSWORD-API' };
      // 사용자 정보 저장
      saveUserInfo({ email, emailType, key, ...formData });
      // 인증 체크 페이지로 리다이렉트
      return router.push(`/authentication/check`);
    } catch (err) {
      //에러 처리
      return accountError({
        err,
        callback: () => router.push('/'),
      });
    }
  };

이름/이메일을 입력하여 비밀번호를 찾는 화면

2. [인증 웹페이지]에서 처리

• 인증 메일 내의 링크를 클릭하면 새 창으로 페이지가 열립니다.
• 이 페이지에서 이메일 링크에 포함된 파라미터인 email, emailType, token을 추출하여 서버로 전송하고, 이를 통해 인증됩니다.

async function fetchAndPatch(params) {
  // params 객체에서 필요한 값(email, type, token)을 추출
  const { email, type, token } = params;
  // 필수 파라미터 존재 여부 체크
  if (email && type && token) {
    try {
      // patchAsync 함수로 서버에 비동기 요청
      const result = await patchAsync({
        email,
        emailType: type,
        token,
      });
      // 요청 성공 시, 서버로부터 받은 데이터 처리
      setContentData(result.data);
    } catch (err) {
      // 요청 실패 시, 에러 처리
      console.error('Error during patch request:', err);
    }
  } else {
    // 파라미터가 없을 시, 에러 처리
    console.error('Missing required parameters: email, type, or token');
  }
}

유저의 이메일로 발송된 인증 메일

[Complete Verification] 버튼을 눌러 이메일 인증에 성공한 화면

3. [인증 체크 페이지]에서 최종 인증 완료

• 인증이 성공하면, [인증 체크 페이지]로 리다이렉트되어 최종 인증이 완료됩니다.
• 이메일 인증이 성공적으로 처리된 후, 설정된 콜백 URL로 이동하여 계정 관리 절차가 이어집니다.

const handleSubmit = async () => {
    try {
      // 이메일 인증 요청 후, 응답 데이터 받기
      const responseData = await verificationEmail({ key, emailType });
      const verificationData = responseData.data;
      // 인증 결과 확인
      if (verificationData.verified && !verificationData.false) {
        // 성공 시, 콜백 URL을 가져오기
        const callbackUrl = getCallbackUrl(emailType);
        // 인증 콜백 요청을 보내고 token을 받음
        const {
          data: {
            callbackData: { token, tokenResponse },
          },
        } = await verificationCallbackEmail({ key, emailType, callback });
        // 사용자 계정을 찾기 위해 토큰 사용
        await handleFindAccount(token);
      } else {
        // 인증 실패 시 에러 메세지를 표시
        return toastOpen({
          message: t('err'), // i18next 키
        });
      }
    } catch (err) {
      // 에러 발생 시 홈으로 리다이렉트하고 에러 처리
      const callback = () => router.push('/');
      return verificationError({ err, callback });
    }
  };
  function getCallbackUrl(emailType) {
    let baseUrl = `${process.env.NEXT_API_URL}/accounts`;
    switch (emailType) {
      case 'FIRST_LOGIN':
      case 'TWO_FACTOR_AUTH':
        return `${baseUrl}/login/mfa?name=${username}&token=${token}`;
      case 'FIND_ID':
      case 'FIND_PASSWORD':
        return `${baseUrl}/userid?name=${realName}&email=${email}`;
      default:
        return baseUrl;
    }
  }

인증 완료 안내

4. 비밀번호 찾기 인증 완료

• 사용자는 비밀번호 재설정 화면으로 자동으로 이동되어 계정 복구 절차가 이어집니다.

비밀번호 재설정 화면

지금까지 해외 파트너 센터의 이메일 인증 도입 배경과 이메일 인증 공통 서비스의 적용 과정을 소개해드렸습니다.

이번 프로젝트는 글로벌 서비스로 확장하는 중요한 기반이 되는 서비스로, 이중 도메인 처리, 다국어 적용, 이메일 인증, 공통 에러 처리 등을 신규 개발했습니다. 비록 모든 내용을 다루지는 못했지만, 이번 글이 해외 파트너센터에서 이메일 인증을 통해 계정을 어떻게 관리하고 인증하는지 이해하는 데 도움이 되었기를 바랍니다.

이제 다음 글에서는 죠니께서 다국어 처리와 관련된 내용을 더 깊이 있게 다뤄주실 예정입니다. 많이 기대해주시고 해외 파트너센터도 많이 애용해주세요~ 감사합니다!

해외갈때 여기어때!!!