Skip to content

Commit

Permalink
change callback and elementId to element (#1192)
Browse files Browse the repository at this point in the history 
* change callback and elementId to element

* remove comment and fix linting issue

* remove stats and change typescript version

* revert sitekey and remove pin

* fix linting issue
  • Loading branch information
@Vengi717
Vengi717 authored May 1, 2024
1 parent 843c622 commit 7493e22
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 47 deletions.
56 changes: 32 additions & 24 deletions README.md
View file
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
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"
async
defer
></script>
Expand Down
8 changes: 5 additions & 3 deletions demos/client-bundle-example/src/index.html
View file
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
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

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
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",
"webpack-merge": "^5.9.0"
}
}
14 changes: 4 additions & 10 deletions packages/procaptcha-bundle/src/index.tsx
View file
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

0 comments on commit 7493e22

Please sign in to comment.