개요

이 기사에서는 reCAPTCHA 대신 지금 현재 순조롭게 점유율을 늘리고있는 "hCaptcha"을 Nuxt에 쉽게 구현하는 방법을 소개합니다.

환경

node.js v14.15.0

npm 6.14.8

hcaptcha-nuxt

hCaptcha 은 현재 Cloudflare에 채용되는 등 점유율을 크게 확대하고 있는 봇 프로텍트를 다루는 웹 인프라 서비스입니다.

하지만 지금 현재 Google의 reCAPTCHA가 그 다수를 차지하고 개발자에게도 문서나 모듈의 적음(라고 할까 거의 없다)로부터 구현에 수고가 걸립니다.

거기서 이번 「hcaptcha-nuxt 」를 npm에 공개했으므로, 소개하겠습니다.

리포지토리: hcaptcha-module

hcaptcha-nuxt

사용방법

Easy to Use입니다.
우선 설치.

npm install hcaptcha-nuxt --save

그런 다음 nuxt.config.js 의 모듈 목록에 추가합니다.

nuxt.config.js

export default {
    modules: [
        "hcaptcha-nuxt"
    ],
}

다음으로 SiteKey 설정입니다.
hCaptcha 대시보드 로부터 취득할 수 있는 것입니다.
공개키가 되기 때문에, 환경 변수에 설정해 주셔도, 평문으로 두어 주어도 괜찮습니다.

nuxt.config.js

export default {
    hcaptcha: {
        siteKey: process.env.HCAPTCHA_SITE_KEY || ''
    }
}

hCaptcha를 도입하고 싶은 컴포넌트에 <hcaptcha> 를 설치.

login.vue

<template>
    <div>
        <hcaptcha />
    </div>
</template>

이것으로 완료됩니다.axios 등을 이용한 ajax 어플리케이션 등에서는 아래의 API를 사용하여 응답을 서버에 전송하십시오.
단, $hcaptcha.getResponse() 는 챌린지의 클리어 후에 실행할 필요가 있습니다.

login.vue

<script>
export default {
    methods: {
        onSubmit() {
            const hcaptcha_response = this.$hcaptcha.getResponse()
            // サーバーへの送信処理
        }
    }
}
</script>

<form> 내에 <hcaptcha> 구성 요소를 설치할 수도 있습니다.
이 경우 <form>의 페이로드의 일부로 hcaptcha_response가 전송되므로 위의 API가 필요하지 않습니다.

login.vue

<template>
    <div>
        <form action="/login" method="POST">
            <input type="text" placeholder="user-id"/>
            <input type="password" placeholder="password"/>
            <hcaptcha />
            <button @click="onSubmit">ログインする</button>
        </form>
    </div>
</template>

이상이 됩니다.

기타

결함이나 추가 기능, 질문, 개선등 있으면 리포지토리 의 이슈, 혹은 토론에서 어떤 사소한 일이라도 상관없으므로, 부탁드리겠습니다.