Add reCAPTCHA support and update captcha provider handling (#647)
* Add reCAPTCHA support and update captcha provider handling - Introduced reCAPTCHA as an additional captcha provider alongside hCaptcha. - Updated form request validation to handle different captcha providers based on user selection. - Added a new validation rule for reCAPTCHA. - Modified the forms model to include a 'captcha_provider' field. - Created a migration to add the 'captcha_provider' column to the forms table. - Updated frontend components to support dynamic rendering of captcha based on the selected provider. - Enhanced tests to cover scenarios for both hCaptcha and reCAPTCHA. These changes improve the flexibility of captcha options available to users, enhancing form security and user experience. * fix pint * change comment text * Refactor captcha implementation and integrate new captcha components - Removed the old RecaptchaV2 component and replaced it with a new implementation that supports both reCAPTCHA and hCaptcha through a unified CaptchaInput component. - Updated the OpenForm component to utilize the new CaptchaInput for dynamic captcha rendering based on user-selected provider. - Cleaned up the package.json by removing the deprecated @hcaptcha/vue3-hcaptcha dependency. - Enhanced form initialization to set a default captcha provider. - Improved error handling and cleanup for both reCAPTCHA and hCaptcha scripts. These changes streamline captcha integration, improve maintainability, and enhance user experience by providing a more flexible captcha solution. * Refactor captcha error messages and localization support * Refactor registration process to integrate reCAPTCHA - Replaced hCaptcha implementation with reCAPTCHA in RegisterController and related test cases. - Updated validation rules to utilize g-recaptcha-response instead of h-captcha-response. - Modified RegisterForm component to support reCAPTCHA, including changes to the form data structure and component references. - Enhanced test cases to reflect the new reCAPTCHA integration, ensuring proper validation and response handling. These changes improve security and user experience during the registration process by adopting a more widely used captcha solution. * Fix reCAPTCHA configuration and update RegisterForm styling - Corrected the configuration key for reCAPTCHA in RegisterController from 'services.recaptcha.secret_key' to 'services.re_captcha.secret_key'. - Updated the styling of the Captcha input section in RegisterForm.vue to improve layout consistency. These changes ensure proper reCAPTCHA functionality and enhance the user interface during the registration process. * Fix reCAPTCHA configuration in RegisterTest to use the correct key format - Updated the configuration key for reCAPTCHA in RegisterTest from 'services.recaptcha.secret_key' to 'services.re_captcha.secret_key' to ensure proper functionality during tests. This change aligns the test setup with the recent updates in the reCAPTCHA integration, improving the accuracy of the registration process tests. --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
GitHub
179
client/components/forms/components/CaptchaInput.vue
Normal file
179
client/components/forms/components/CaptchaInput.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="showCaptcha">
|
||||
<RecaptchaV2
|
||||
v-if="provider === 'recaptcha'"
|
||||
:key="`recaptcha-${componentKey}`"
|
||||
ref="captchaRef"
|
||||
:sitekey="recaptchaSiteKey"
|
||||
:theme="darkMode ? 'dark' : 'light'"
|
||||
:language="language"
|
||||
@verify="onCaptchaVerify"
|
||||
@expired="onCaptchaExpired"
|
||||
@opened="onCaptchaOpen"
|
||||
@closed="onCaptchaClose"
|
||||
/>
|
||||
<HCaptchaV2
|
||||
v-else
|
||||
:key="`hcaptcha-${componentKey}`"
|
||||
ref="captchaRef"
|
||||
:sitekey="hCaptchaSiteKey"
|
||||
:theme="darkMode ? 'dark' : 'light'"
|
||||
:language="language"
|
||||
@verify="onCaptchaVerify"
|
||||
@expired="onCaptchaExpired"
|
||||
@opened="onCaptchaOpen"
|
||||
@closed="onCaptchaClose"
|
||||
/>
|
||||
</div>
|
||||
<has-error
|
||||
:form="form"
|
||||
:field-id="formFieldName"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HCaptchaV2 from './HCaptchaV2.vue'
|
||||
import RecaptchaV2 from './RecaptchaV2.vue'
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value) => ['recaptcha', 'hcaptcha'].includes(value)
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
darkMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const recaptchaSiteKey = config.public.recaptchaSiteKey
|
||||
const hCaptchaSiteKey = config.public.hCaptchaSiteKey
|
||||
|
||||
const captchaRef = ref(null)
|
||||
const isIframe = ref(false)
|
||||
const showCaptcha = ref(true)
|
||||
const componentKey = ref(0)
|
||||
|
||||
const formFieldName = computed(() => props.provider === 'recaptcha' ? 'g-recaptcha-response' : 'h-captcha-response')
|
||||
|
||||
// Watch for provider changes to reset the form field
|
||||
watch(() => props.provider, async (newProvider, oldProvider) => {
|
||||
if (newProvider !== oldProvider) {
|
||||
// Clear old provider's value
|
||||
if (oldProvider === 'recaptcha') {
|
||||
props.form['g-recaptcha-response'] = null
|
||||
} else if (oldProvider === 'hcaptcha') {
|
||||
props.form['h-captcha-response'] = null
|
||||
}
|
||||
|
||||
// Force remount by toggling visibility and incrementing key
|
||||
showCaptcha.value = false
|
||||
|
||||
// Wait longer to ensure complete cleanup
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
componentKey.value++
|
||||
await nextTick()
|
||||
|
||||
// Wait again before showing new captcha
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
showCaptcha.value = true
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
isIframe.value = window.self !== window.top
|
||||
})
|
||||
|
||||
// Add a ref to track if captcha was completed
|
||||
const wasCaptchaCompleted = ref(false)
|
||||
|
||||
// Handle captcha verification
|
||||
const onCaptchaVerify = (token) => {
|
||||
wasCaptchaCompleted.value = true
|
||||
props.form[formFieldName.value] = token
|
||||
// Also set the DOM element value for compatibility with existing code
|
||||
if (import.meta.client) {
|
||||
const element = document.getElementsByName(formFieldName.value)[0]
|
||||
if (element) element.value = token
|
||||
}
|
||||
}
|
||||
|
||||
// Handle captcha expiration
|
||||
const onCaptchaExpired = () => {
|
||||
wasCaptchaCompleted.value = false
|
||||
props.form[formFieldName.value] = null
|
||||
// Also clear the DOM element value for compatibility with existing code
|
||||
if (import.meta.client) {
|
||||
const element = document.getElementsByName(formFieldName.value)[0]
|
||||
if (element) element.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// Handle iframe resizing
|
||||
const resizeIframe = (height) => {
|
||||
if (!isIframe.value) return
|
||||
|
||||
try {
|
||||
window.parentIFrame?.size(height)
|
||||
} catch (e) {
|
||||
// Silently handle error
|
||||
}
|
||||
}
|
||||
|
||||
// Handle captcha open/close for iframe resizing
|
||||
const onCaptchaOpen = () => {
|
||||
resizeIframe(500)
|
||||
// Ensure the captcha is visible by scrolling to it
|
||||
if (import.meta.client) {
|
||||
nextTick(() => {
|
||||
const captchaElement = captchaRef.value?.$el
|
||||
if (captchaElement) {
|
||||
captchaElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onCaptchaClose = () => {
|
||||
resizeIframe(0)
|
||||
}
|
||||
|
||||
// Method to reset captcha - can be called from parent
|
||||
defineExpose({
|
||||
reset: () => {
|
||||
// Only do a full reset if the captcha was previously completed
|
||||
if (captchaRef.value) {
|
||||
if (wasCaptchaCompleted.value) {
|
||||
wasCaptchaCompleted.value = false
|
||||
captchaRef.value.reset()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
186
client/components/forms/components/HCaptchaV2.vue
Normal file
186
client/components/forms/components/HCaptchaV2.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="hcaptcha-container">
|
||||
<div ref="hcaptchaContainer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
sitekey: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'light'
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
default: 'en'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['verify', 'expired', 'opened', 'closed'])
|
||||
const hcaptchaContainer = ref(null)
|
||||
let widgetId = null
|
||||
|
||||
// Global script loading state
|
||||
const SCRIPT_ID = 'hcaptcha-script'
|
||||
let scriptLoadPromise = null
|
||||
|
||||
// Add this cleanup function at the script level
|
||||
const cleanupHcaptcha = () => {
|
||||
// Remove all hCaptcha iframes
|
||||
document.querySelectorAll('iframe[src*="hcaptcha.com"]').forEach(iframe => {
|
||||
iframe.remove()
|
||||
})
|
||||
|
||||
// Remove all hCaptcha scripts
|
||||
document.querySelectorAll('script[src*="hcaptcha.com"]').forEach(script => {
|
||||
script.remove()
|
||||
})
|
||||
|
||||
// Remove specific script
|
||||
const script = document.getElementById(SCRIPT_ID)
|
||||
if (script) {
|
||||
script.remove()
|
||||
}
|
||||
|
||||
// Remove hCaptcha styles
|
||||
document.querySelectorAll('style[data-emotion]').forEach(style => {
|
||||
style.remove()
|
||||
})
|
||||
|
||||
// Clean up global variables
|
||||
if (window.hcaptcha) {
|
||||
delete window.hcaptcha
|
||||
}
|
||||
|
||||
// Clean up any potential callbacks
|
||||
Object.keys(window).forEach(key => {
|
||||
if (key.startsWith('hcaptchaOnLoad_')) {
|
||||
delete window[key]
|
||||
}
|
||||
})
|
||||
|
||||
scriptLoadPromise = null
|
||||
}
|
||||
|
||||
const loadHcaptchaScript = () => {
|
||||
if (scriptLoadPromise) return scriptLoadPromise
|
||||
|
||||
// Clean up before loading new script
|
||||
cleanupHcaptcha()
|
||||
|
||||
scriptLoadPromise = new Promise((resolve, reject) => {
|
||||
// If hcaptcha is already available and ready, use it
|
||||
if (window.hcaptcha?.render) {
|
||||
resolve(window.hcaptcha)
|
||||
return
|
||||
}
|
||||
|
||||
// Create a unique callback name
|
||||
const callbackName = `hcaptchaOnLoad_${Date.now()}`
|
||||
|
||||
// Create the script
|
||||
const script = document.createElement('script')
|
||||
script.id = SCRIPT_ID
|
||||
script.src = `https://js.hcaptcha.com/1/api.js?render=explicit&onload=${callbackName}&recaptchacompat=off`
|
||||
script.async = true
|
||||
script.defer = true
|
||||
|
||||
let timeoutId = null
|
||||
|
||||
// Set up the callback before adding the script
|
||||
window[callbackName] = () => {
|
||||
if (timeoutId) clearTimeout(timeoutId)
|
||||
if (window.hcaptcha?.render) {
|
||||
resolve(window.hcaptcha)
|
||||
delete window[callbackName]
|
||||
} else {
|
||||
reject(new Error('hCaptcha failed to initialize'))
|
||||
}
|
||||
}
|
||||
|
||||
script.onerror = (error) => {
|
||||
if (timeoutId) clearTimeout(timeoutId)
|
||||
delete window[callbackName]
|
||||
scriptLoadPromise = null
|
||||
reject(error)
|
||||
}
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
delete window[callbackName]
|
||||
scriptLoadPromise = null
|
||||
reject(new Error('hCaptcha script load timeout'))
|
||||
}, 10000)
|
||||
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
|
||||
return scriptLoadPromise
|
||||
}
|
||||
|
||||
const renderHcaptcha = async () => {
|
||||
try {
|
||||
// Clear any existing content first
|
||||
if (hcaptchaContainer.value) {
|
||||
hcaptchaContainer.value.innerHTML = ''
|
||||
}
|
||||
|
||||
const hcaptcha = await loadHcaptchaScript()
|
||||
|
||||
// Double check container still exists after async operation
|
||||
if (!hcaptchaContainer.value) return
|
||||
|
||||
// Render new widget
|
||||
widgetId = hcaptcha.render(hcaptchaContainer.value, {
|
||||
sitekey: props.sitekey,
|
||||
theme: props.theme,
|
||||
hl: props.language,
|
||||
'callback': (token) => emit('verify', token),
|
||||
'expired-callback': () => emit('expired'),
|
||||
'error-callback': () => {
|
||||
if (widgetId !== null) {
|
||||
hcaptcha.reset(widgetId)
|
||||
}
|
||||
},
|
||||
'open-callback': () => emit('opened'),
|
||||
'close-callback': () => emit('closed')
|
||||
})
|
||||
} catch (error) {
|
||||
scriptLoadPromise = null // Reset promise on error
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
renderHcaptcha()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Clean up widget and reset state
|
||||
if (window.hcaptcha && widgetId !== null) {
|
||||
try {
|
||||
window.hcaptcha.remove(widgetId)
|
||||
} catch (e) {
|
||||
// Silently handle error
|
||||
}
|
||||
}
|
||||
|
||||
cleanupHcaptcha()
|
||||
|
||||
if (hcaptchaContainer.value) {
|
||||
hcaptchaContainer.value.innerHTML = ''
|
||||
}
|
||||
|
||||
widgetId = null
|
||||
})
|
||||
|
||||
// Expose reset method that properly reloads the captcha
|
||||
defineExpose({
|
||||
reset: async () => {
|
||||
cleanupHcaptcha()
|
||||
await renderHcaptcha()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
179
client/components/forms/components/RecaptchaV2.vue
Normal file
179
client/components/forms/components/RecaptchaV2.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="recaptcha-container">
|
||||
<div ref="recaptchaContainer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
sitekey: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'light'
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
default: 'en'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['verify', 'expired', 'opened', 'closed'])
|
||||
const recaptchaContainer = ref(null)
|
||||
let widgetId = null
|
||||
|
||||
// Global script loading state
|
||||
const SCRIPT_ID = 'recaptcha-script'
|
||||
let scriptLoadPromise = null
|
||||
|
||||
// Add cleanup function similar to hCaptcha
|
||||
const cleanupRecaptcha = () => {
|
||||
// Remove all reCAPTCHA iframes
|
||||
document.querySelectorAll('iframe[src*="google.com/recaptcha"]').forEach(iframe => {
|
||||
iframe.remove()
|
||||
})
|
||||
|
||||
// Remove all reCAPTCHA scripts
|
||||
document.querySelectorAll('script[src*="google.com/recaptcha"]').forEach(script => {
|
||||
script.remove()
|
||||
})
|
||||
|
||||
// Remove specific script
|
||||
const script = document.getElementById(SCRIPT_ID)
|
||||
if (script) {
|
||||
script.remove()
|
||||
}
|
||||
|
||||
// Clean up global variables
|
||||
if (window.grecaptcha) {
|
||||
delete window.grecaptcha
|
||||
}
|
||||
|
||||
scriptLoadPromise = null
|
||||
}
|
||||
|
||||
const loadRecaptchaScript = () => {
|
||||
if (scriptLoadPromise) return scriptLoadPromise
|
||||
|
||||
// Clean up before loading new script
|
||||
cleanupRecaptcha()
|
||||
|
||||
scriptLoadPromise = new Promise((resolve, reject) => {
|
||||
// If grecaptcha is already available and ready, use it
|
||||
if (window.grecaptcha?.render) {
|
||||
resolve(window.grecaptcha)
|
||||
return
|
||||
}
|
||||
|
||||
const script = document.createElement('script')
|
||||
script.id = SCRIPT_ID
|
||||
script.src = 'https://www.google.com/recaptcha/api.js?render=explicit'
|
||||
script.async = true
|
||||
script.defer = true
|
||||
|
||||
let timeoutId = null
|
||||
|
||||
script.onload = () => {
|
||||
const checkGrecaptcha = () => {
|
||||
if (window.grecaptcha?.render) {
|
||||
if (timeoutId) clearTimeout(timeoutId)
|
||||
resolve(window.grecaptcha)
|
||||
} else {
|
||||
setTimeout(checkGrecaptcha, 100)
|
||||
}
|
||||
}
|
||||
checkGrecaptcha()
|
||||
}
|
||||
|
||||
script.onerror = (error) => {
|
||||
if (timeoutId) clearTimeout(timeoutId)
|
||||
scriptLoadPromise = null
|
||||
reject(error)
|
||||
}
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
scriptLoadPromise = null
|
||||
reject(new Error('reCAPTCHA script load timeout'))
|
||||
}, 10000)
|
||||
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
|
||||
return scriptLoadPromise
|
||||
}
|
||||
|
||||
const renderRecaptcha = async () => {
|
||||
try {
|
||||
// Clear any existing content first
|
||||
if (recaptchaContainer.value) {
|
||||
recaptchaContainer.value.innerHTML = ''
|
||||
}
|
||||
|
||||
const grecaptcha = await loadRecaptchaScript()
|
||||
|
||||
// Double check container still exists after async operation
|
||||
if (!recaptchaContainer.value) return
|
||||
|
||||
// Render new widget
|
||||
widgetId = grecaptcha.render(recaptchaContainer.value, {
|
||||
sitekey: props.sitekey,
|
||||
theme: props.theme,
|
||||
hl: props.language,
|
||||
callback: (token) => emit('verify', token),
|
||||
'expired-callback': () => emit('expired'),
|
||||
'error-callback': () => {
|
||||
if (widgetId !== null) {
|
||||
grecaptcha.reset(widgetId)
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
scriptLoadPromise = null // Reset promise on error
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
renderRecaptcha()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Clean up widget and reset state
|
||||
if (window.grecaptcha && widgetId !== null) {
|
||||
try {
|
||||
window.grecaptcha.reset(widgetId)
|
||||
} catch (e) {
|
||||
// Silently handle error
|
||||
}
|
||||
}
|
||||
|
||||
cleanupRecaptcha()
|
||||
|
||||
if (recaptchaContainer.value) {
|
||||
recaptchaContainer.value.innerHTML = ''
|
||||
}
|
||||
|
||||
widgetId = null
|
||||
})
|
||||
|
||||
// Expose reset method that properly reloads the captcha
|
||||
defineExpose({
|
||||
reset: async () => {
|
||||
if (window.grecaptcha && widgetId !== null) {
|
||||
try {
|
||||
// Try simple reset first
|
||||
window.grecaptcha.reset(widgetId)
|
||||
} catch (e) {
|
||||
// If simple reset fails, do a full cleanup and reload
|
||||
cleanupRecaptcha()
|
||||
await renderRecaptcha()
|
||||
}
|
||||
} else {
|
||||
// If no widget exists, do a full reload
|
||||
cleanupRecaptcha()
|
||||
await renderRecaptcha()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user