Appearance

Vue Recaptcha 3 Plugin ​

File Information ​

  • Path: plugins/vue-recaptcha-3.js
  • Purpose: Google reCAPTCHA v3 integration

Overview ​

The Vue Recaptcha 3 plugin integrates Google reCAPTCHA v3, which provides invisible bot protection. Unlike reCAPTCHA v2, v3 runs in the background and provides a score-based risk assessment without user interaction.

Key Features ​

  1. Invisible Protection

    • No user interaction required
    • Background execution
    • Score-based assessment

  2. Global Integration

    • Available throughout application
    • Automatic token generation
    • Site key configuration

Configuration ​

The plugin is configured with:

  • Site Key: 6LdG9hgqAAAAAMEPKEe-kYbyPE2ifyucEG5xJcHs
  • Loader Options: Uses recaptcha.net

Usage Examples ​

Execute reCAPTCHA ​

javascript
// In component
async handleSubmit() {
  try {
    const token = await this.$recaptcha('login')
    // Send token to backend
    await this.$axios.post('/api/login', {
      email: this.email,
      password: this.password,
      recaptchaToken: token
    })
  } catch (error) {
    console.error('reCAPTCHA error:', error)
  }
}

With Action ​

javascript
// In component
async submitForm() {
  const token = await this.$recaptcha('form_submit')
  // Use token in API call
}

Integration Points ​

  • Login Pages: Login protection
  • Registration: Signup protection
  • Form Submissions: Form protection
  • API Endpoints: Backend verification

Backend Verification ​

Backend should verify token:

javascript
// Backend example
const response = await fetch('https://www.google.com/recaptcha/api/siteverify', {
  method: 'POST',
  body: JSON.stringify({
    secret: RECAPTCHA_SECRET_KEY,
    response: token
  })
})
const data = await response.json()
if (data.score < 0.5) {
  // Likely bot, reject request
}

Notes for Development ​

  • Plugin registers VueReCaptcha globally
  • Available as $recaptcha method
  • Requires action name
  • Returns promise with token
  • Backend must verify token