Nuxt3 google ReCaptcha 사용하기

서론

맞춤법검사기를 만들면서 CSRF 인증 대신 더욱 안전한 ReCaptcha v3를 사용하기로 결정했다.
이 글은 Nuxt3에서 ReCaptcha 인증을 하는 방법에 대해 설명한다.

본론

우선 ReCaptcha SITE_KEY와 SECRET_KEY를 발급받았다는 전제 하에 진행한다.
ReCaptcha ADMIN CONSOLE에서 간단히 발급받을 수 있다.

npm i -s vue-recaptcha 로 필요한 vue-recaptcha 라이브러리를 받아준다.

Nuxtjs 3의 /plugins/recaptcha.ts 에 다음 코드를 작성한다. dev.to 의 글을 참고했다.

import { defineNuxtPlugin} from "#app"
import {VueReCaptcha} from "vue-recaptcha-v3";

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: config.public.recaptchaSiteKey ?? "",
        loaderOptions: {
            autoHideBadge: false,
            explicitRenderParameters: {
                badge: 'bottomright',
            },
        },
    });
});

여기에서 config.public.recaptchaSiteKey 변수는 nuxt.config.ts 에서 설정해야 하는 변수이다. 나는 Dotenv 파일을 이용해 테스트 환경에서 변수를 설정해준다. 이 부분에 대한 내용은 나중에 블로그에 남길 예정이다.

추가로 /composables/useGoogleRecaptcha.ts 파일을 작성한다.

import {useReCaptcha} from "vue-recaptcha-v3";

export default () => {
  const recaptchaInstance = useReCaptcha()
  const executeRecaptcha = async (action: string) => {
    await recaptchaInstance?.recaptchaLoaded()
    const token = await recaptchaInstance?.executeRecaptcha(action)
    const headerOptions = { headers: { 'google-recaptcha-token': token } }
    return { token, headerOptions }
  }

  return { executeRecaptcha }
}

useGoogleRecaptcha 객체를 만드는 과정이다. 이 객체가 "ReCaptcha"를 사용할 때 중요한 함수이다.

사용방법

사용해야 하는 Vue components에 다음과 같이 작성한다.

<script setup lang='ts'>
import useGoogleRecaptcha from "~/composables/useGoogleRecaptcha";

const { executeRecaptcha } = useGoogleRecaptcha()

const { token } = await executeRecaptcha('action')
</script>

여기의 token 변수에 유저의 리캡챠 검증용 토큰이 담겨있다.
'action' 부분엔 ReCaptcha Console에서 Metric label로 사용할 action 이름을 적으면 된다.

결론

이전의 Nuxt2에서 사용하던 @nuxtjs/recaptcha 모듈은 Nuxt3에서 사용할 수 없다.
새로이 플러그인과 composable 코드를 작성해 코드를 구성해야 한다. 또한 검증용 토큰을 백엔드로 보내 백엔드에서 요청에 대한 검증도 같이 진행할 수 있다. 이 부분은 Python FastAPI를 사용한 내용을 참고하면 된다.