Skip to content

Commit

Permalink
change callback and elementId to element
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vengi717
Vengi717 committed Apr 30, 2024
1 parent 843c622 commit faf8e1e
Show file tree
Hide file tree
Showing 9 changed files with 5,009 additions and 47 deletions.
58 changes: 33 additions & 25 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
2 changes: 1 addition & 1 deletion demos/client-bundle-example/src/jsBundleTest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div
class="procaptcha"
data-theme="light"
data-sitekey="5HUBceb4Du6dvMA9BiwN5VzUrzUsX9Zp7z7nSR2cC1TCv5jg"
data-sitekey="5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw"
></div>
</form>
</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 package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@
"typedoc-plugin-mdn-links": "^3.1.16",
"typedoc-plugin-missing-exports": "^2.2.0",
"typedoc-plugin-zod": "^1.1.2",
"typescript": "5.1.6"
"typescript": "^5.1.6"
},
"description": "Prosopo Procaptcha is a privacy-focused, secure alternative to reCAPTCHA. This repository integrates prosopo packages for development purposes.",
"bugs": {
Expand Down
16 changes: 8 additions & 8 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 @@ -111,8 +111,8 @@ const renderLogic = (
config: ProcaptchaClientConfigInput,
renderOptions?: ProcaptchaRenderOptions
) => {
elements.forEach((element) => {
const callbackName = renderOptions?.callback || element.getAttribute('data-callback')
elements.forEach((element) => { // || 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,12 +195,12 @@ 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)
// const element = document.getElementById(elementId)

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

Expand Down Expand Up @@ -242,4 +242,4 @@ if (onloadUrlCallback) {
getProcaptchaScript()?.addEventListener('load', () => {
ready(onloadCallback)
})
}
}
Loading

0 comments on commit faf8e1e

Please sign in to comment.