Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

change callback and elementId to element #1192

Merged
merged 5 commits into from
May 1, 2024
Merged

change callback and elementId to element #1192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
faf8e1e
change callback and elementId to element
Vengi717 Apr 30, 2024
3c47132
remove comment and fix linting issue
Vengi717 Apr 30, 2024
2ae0eba
remove stats and change typescript version
Vengi717 Apr 30, 2024
012327a
revert sitekey and remove pin
Vengi717 May 1, 2024
63b75e9
fix linting issue
Vengi717 May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 32 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,15 +95,17 @@ An `onload` event is added to the script tag to call the render function when th
// A function that will call the render Procaptcha function when the procaptcha script has loaded
document.getElementById('procaptcha-script').addEventListener('load', function () {
// Define a callback function to be called when the CAPTCHA is verified
window.onCaptchaVerified = function (output) {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}

// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
// Render the CAPTCHA explicitly on a container with id "procaptcha-container"
window.procaptcha.render('procaptcha-container', {
window.procaptcha.render(captchaContainer, {
siteKey: 'YOUR_SITE_KEY',
theme: 'dark',
callback: 'onCaptchaVerified',
callback: onCaptchaVerified,
})
})
```
Expand All @@ -113,18 +115,18 @@ document.getElementById('procaptcha-script').addEventListener('load', function (
The `Procaptcha.render()` function takes an options object as its second argument. The options object can contain the
following fields:

| Key | Type | Description | Required |
| ---------------------- | ------ | -------------------------------------------------------------------------------------------------------- | -------- |
| siteKey | string | The site key of your application / website. This is required. | ✓ |
| callback | string | The name of the window function that will be called when the CAPTCHA is verified. | ✗ |
| theme | string | The theme of the CAPTCHA widget. The default is `light`. The other option is `dark`. | ✗ |
| captchaType | string | The type of CAPTCHA to render. The default is `frictionless`. Other options are `image`, `pow`. | ✗ |
| chalexpired-callback | string | The name of the window function that will be called when the CAPTCHA challenge expires. | ✗ |
| error-callback | string | The name of the window function that will be called when an error occurs. | ✗ |
| close-callback | string | The name of the window function that will be called when the CAPTCHA is closed. | ✗ |
| open-callback | string | The name of the window function that will be called when the CAPTCHA is opened. | ✗ |
| expired-callback | string | The name of the window function that will be called when the CAPTCHA solution expires. | ✗ |
| challenge-valid-length | number | The amount of time, in milliseconds, a successful CAPTCHA challenge is valid for. Defaults to 2 minutes. | ✗ |
| Key | Type | Description | Required |
| ---------------------- | -------- | -------------------------------------------------------------------------------------------------------- | -------- |
| siteKey | string | The site key of your application / website. This is required. | ✓ |
| callback | function | The function that will be called when the CAPTCHA is verified. | ✗ |
| theme | string | The theme of the CAPTCHA widget. The default is `light`. The other option is `dark`. | ✗ |
| captchaType | string | The type of CAPTCHA to render. The default is `frictionless`. Other options are `image`, `pow`. | ✗ |
| chalexpired-callback | string | The name of the window function that will be called when the CAPTCHA challenge expires. | ✗ |
| error-callback | string | The name of the window function that will be called when an error occurs. | ✗ |
| close-callback | string | The name of the window function that will be called when the CAPTCHA is closed. | ✗ |
| open-callback | string | The name of the window function that will be called when the CAPTCHA is opened. | ✗ |
| expired-callback | string | The name of the window function that will be called when the CAPTCHA solution expires. | ✗ |
| challenge-valid-length | number | The amount of time, in milliseconds, a successful CAPTCHA challenge is valid for. Defaults to 2 minutes. | ✗ |

The same options can be passed to the implicit rendering method by adding them as data attributes to the `.procaptcha`.
For example, to set the theme to dark, you would add `data-theme="dark"` to the `.procaptcha` container.
Expand Down Expand Up @@ -268,13 +270,15 @@ setting.

```javascript
document.getElementById('procaptcha-script').addEventListener('load', function () {
window.onCaptchaVerified = function (output) {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}
window.procaptcha.render('procaptcha-container', {
// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
window.procaptcha.render(captchaContainer, {
siteKey: 'YOUR_SITE_KEY',
theme: 'dark',
callback: 'onCaptchaVerified',
callback: onCaptchaVerified,
captchaType: 'frictionless', // can also be omitted
})
})
Expand All @@ -296,13 +300,15 @@ the `captchaType` to `pow`.

```javascript
document.getElementById('procaptcha-script').addEventListener('load', function () {
window.onCaptchaVerified = function (output) {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}
window.procaptcha.render('procaptcha-container', {
// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
window.procaptcha.render(captchaContainer, {
siteKey: 'YOUR_SITE_KEY',
theme: 'dark',
callback: 'onCaptchaVerified',
callback: onCaptchaVerified,
captchaType: 'pow',
})
})
Expand All @@ -323,13 +329,15 @@ to `image`.

```javascript
document.getElementById('procaptcha-script').addEventListener('load', function () {
window.onCaptchaVerified = function (output) {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}
window.procaptcha.render('procaptcha-container', {
// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
window.procaptcha.render(captchaContainer, {
siteKey: 'YOUR_SITE_KEY',
theme: 'dark',
callback: 'onCaptchaVerified',
callback: onCaptchaVerified,
captchaType: 'image',
})
})
Expand Down
10 changes: 6 additions & 4 deletions demos/client-bundle-example/src/frictionless.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,26 @@
async function captchaLoaded() {
const render = (await import('./assets/procaptcha.bundle')).render
console.log('Captcha loaded')
render('procaptcha-container', {
// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
render(captchaContainer, {
siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw',
theme: 'dark',
callback: 'onCaptchaVerified',
callback: onCaptchaVerified,
captchaType: 'frictionless',
})
}
window.captchaLoaded = captchaLoaded

// Define a callback function to be called when the CAPTCHA is verified
window.onCaptchaVerified = function (output) {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}
</script>
<script
id="procaptchaScript"
type="module"
src="./procaptcha.bundle.js?onload=captchaLoaded&render=explicit"
src="./assets/procaptcha.bundle.js?onload=captchaLoaded&render=explicit"
forgetso marked this conversation as resolved.
Show resolved Hide resolved
async
defer
></script>
Expand Down
8 changes: 5 additions & 3 deletions demos/client-bundle-example/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,17 @@
import { render } from './assets/procaptcha.bundle.js'

// Define a callback function to be called when the CAPTCHA is verified
window.onCaptchaVerified = function (output) {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}

// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
// Render the CAPTCHA explicitly on a container with id "procaptcha-container"
render('procaptcha-container', {
render(captchaContainer, {
siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw',
theme: 'dark',
callback: 'onCaptchaVerified',
callback: onCaptchaVerified,
})
</script>
</body>
Expand Down
8 changes: 5 additions & 3 deletions demos/client-bundle-example/src/urlParams.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,18 @@
async function captchaLoaded() {
const render = (await import('./assets/procaptcha.bundle')).render
console.log('Captcha loaded')
render('procaptcha-container', {
// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
render(captchaContainer, {
siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw',
theme: 'dark',
callback: 'onCaptchaVerified',
callback: onCaptchaVerified,
})
}
window.captchaLoaded = captchaLoaded

// Define a callback function to be called when the CAPTCHA is verified
window.onCaptchaVerified = function (output) {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}
</script>
Expand Down
110 changes: 108 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/procaptcha-bundle/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"@rollup/plugin-typescript": "^11.1.2",
"@vitejs/plugin-react": "^4.2.1",
"tslib": "2.6.2",
"typescript": "5.1.6",
"typescript": "^5.1.6",
forgetso marked this conversation as resolved.
Show resolved Hide resolved
"webpack-merge": "^5.9.0"
}
}
14 changes: 4 additions & 10 deletions packages/procaptcha-bundle/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ interface ProcaptchaRenderOptions {
siteKey: string
theme?: 'light' | 'dark'
captchaType?: Features
callback?: string
callback?: (payload: ProcaptchaOutput) => void
'challenge-valid-length'?: string // seconds for successful challenge to be valid
'chalexpired-callback'?: string
'expired-callback'?: string
Expand Down Expand Up @@ -112,7 +112,7 @@ const renderLogic = (
renderOptions?: ProcaptchaRenderOptions
) => {
elements.forEach((element) => {
const callbackName = renderOptions?.callback || element.getAttribute('data-callback')
const callbackName = renderOptions?.callback
const chalExpiredCallbackName =
renderOptions?.['chalexpired-callback'] || element.getAttribute('data-chalexpired-callback')
const errorCallback = renderOptions?.['error-callback'] || element.getAttribute('data-error-callback')
Expand Down Expand Up @@ -141,7 +141,7 @@ const renderLogic = (
},
}

if (callbackName) callbacks.onHuman = getWindowCallback(callbackName)
if (callbackName) callbacks.onHuman = renderOptions?.callback as any // Assuming the callback is set correctly
if (chalExpiredCallbackName) callbacks.onChallengeExpired = getWindowCallback(chalExpiredCallbackName)
if (onExpiredCallbackName) callbacks.onExpired = getWindowCallback(onExpiredCallbackName)
if (errorCallback) callbacks.onError = getWindowCallback(errorCallback)
Expand Down Expand Up @@ -195,14 +195,8 @@ const implicitRender = () => {
}

// Explicit render for targeting specific elements
export const render = (elementId: string, renderOptions: ProcaptchaRenderOptions) => {
export const render = (element: Element, renderOptions: ProcaptchaRenderOptions) => {
const siteKey = renderOptions.siteKey
const element = document.getElementById(elementId)

if (!element) {
console.error('Element not found:', elementId)
return
}

renderLogic([element], getConfig(siteKey), renderOptions)
}
Expand Down
Loading