Skip to content

docs: server-driven captchaType #39

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

Closed
HughParry wants to merge 1 commit into from
Closed

docs: server-driven captchaType #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 2 additions & 51 deletions src/content/docs/de/basics/captcha-types.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "CAPTCHA-Typen"
description: "Stellen Sie verschiedene CAPTCHA-Typen bereit, indem Sie `captchaType` auf `frictionless`, `pow` oder `image` setzen."
description: "Stellen Sie verschiedene CAPTCHA-Typen bereit: `frictionless`, `pow` oder `image`."
i18nReady: true
---
import {Image} from 'astro:assets';
Expand All @@ -9,7 +9,7 @@ import ImageCaptcha from '~/assets/image-captcha.png';
import PoWSettings from '~/assets/pow-settings.png';
import ImageSettings from '~/assets/image-settings.png';

Stellen Sie **verschiedene** CAPTCHA-Typen bereit, indem Sie `captchaType` auf `frictionless`, `pow` oder `image` setzen.
Stellen Sie **verschiedene** CAPTCHA-Typen bereit: `frictionless`, `pow` oder `image`.

## Frictionless CAPTCHA

Expand Down Expand Up @@ -38,52 +38,3 @@ Eine Bild-CAPTCHA-Herausforderung erfordert, dass der Benutzer das/die richtige(
/>

Der Bild-CAPTCHA-Typ untersucht nicht die Browserumgebung des Benutzers, verwenden Sie dafür `frictionless` (siehe oben).

## Typ implizit setzen

### 1. Setzen Sie den Typ in der Widget-Konfiguration

Hier setzen wir `captchaType` auf Proof-of-Work `pow`.

```html
<div class="procaptcha" data-sitekey="your_site_key" data-captcha-type="pow"></div>
```

### 2. Setzen Sie den Typ im Portal

Navigieren Sie zum [Prosopo Portal](https://portal.prosopo.io) und aktualisieren Sie den CAPTCHA-Typ in den Einstellungen auf `pow`.

<Image
src={PoWSettings}
alt="prosopo pow setting"/>

## Typ explizit setzen

### 1. Setzen Sie den Typ in der Widget-Konfiguration

Hier setzen wir `captchaType` auf Bild `image`.

```javascript
document.getElementById('procaptcha-script').addEventListener('load', function () {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}
// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
window.procaptcha.render(captchaContainer, {
siteKey: 'YOUR_SITE_KEY',
theme: 'dark',
callback: onCaptchaVerified,
captchaType: 'image', // `pow` or leave blank for `frictionless`
})
})
```

### 2. Setzen Sie den Typ im Portal

Navigieren Sie zum [Prosopo Portal](https://portal.prosopo.io) und aktualisieren Sie den CAPTCHA-Typ in den Einstellungen auf `image`.

<Image
src={ImageSettings}
alt="prosopo image setting"/>

18 changes: 0 additions & 18 deletions src/content/docs/de/basics/client-side-rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,6 @@ folgenden Felder enthalten:
| siteKey | string | Der sitekey Ihrer Anwendung / Website. Dies ist erforderlich. | ✓ |
| callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA verifiziert wurde. | ✗ |
| theme | string | Das Theme des CAPTCHA-Widgets. Der Standard ist `light`. Die andere Option ist `dark`. | ✗ |
| captchaType | string | Der Typ des zu rendernden CAPTCHA. Der Standard ist `frictionless`. Andere Optionen sind `image`, `pow`. | ✗ |
| chalexpired-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn die CAPTCHA-Herausforderung abläuft. | ✗ |
| error-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn ein Fehler auftritt. | ✗ |
| close-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA geschlossen wird. | ✗ |
Expand All @@ -139,23 +138,6 @@ und die Callback-Funktion am Window-Objekt definieren.
<div class="procaptcha" data-sitekey="your_site_key" data-callback="yourCallbackFunction"></div>
```

### `captchaType`

Sie können beim Rendern der Procaptcha-Komponente jeden der folgenden CAPTCHA-Typen implementieren:

| Type | Beschreibung |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `frictionless` | Der Standard-CAPTCHA-Typ ist `frictionless`. Dieser CAPTCHA-Typ ist für den Benutzer unsichtbar und erfordert nur die Durchführung einer unsichtbaren [Proof of Work-Herausforderung](https://en.wikipedia.org/wiki/Proof_of_work) (`pow`). Verdächtige Bots erhalten Bild-CAPTCHA-Herausforderungen (`image`). |
| `pow` | Der `pow`-CAPTCHA-Typ erfordert, dass der Benutzer ein kryptografisches Puzzle löst. Dieses Puzzle erfordert einfach einen kleinen Betrag an Rechenarbeit und verlangsamt Bots erheblich, wodurch es für sie schwierig wird, in großen Mengen zu scrapen. |
| `image` | Der `image`-CAPTCHA-Typ erfordert, dass der Benutzer ein einfaches Bild-CAPTCHA löst. Dies ist der CAPTCHA-Typ, mit dem die meisten Menschen vertraut sind, erstellt von Google reCAPTCHA. |



**Bitte beachten Sie**, wenn Sie `image` oder `pow` verwenden, muss der clientseitige [CAPTCHA-Typ](/de/basics/captcha-types/) auf denselben Wert wie im [Portal](https://portal.prosopo.io) gesetzt werden:
- Wenn Ihr Portal-CAPTCHA-Typ `image` ist, müssen Sie den clientseitigen CAPTCHA-Typ auf `image` setzen.
- Wenn Ihr Portal-CAPTCHA-Typ `pow` ist, müssen Sie den clientseitigen CAPTCHA-Typ auf `pow` setzen.
- Wenn Ihr Portal-CAPTCHA-Typ `frictionless` ist, müssen Sie den clientseitigen CAPTCHA-Typ auf `frictionless` setzen oder ihn leer lassen.

### Framework-Integrationen

Verschiedene Frameworks wurden mit Procaptcha integriert. Die Dokumentation für jedes Framework finden Sie unten:
Expand Down
5 changes: 0 additions & 5 deletions src/content/docs/de/basics/faq.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,6 @@ Dieser Fehler tritt auf, wenn die Domain des sitekey nicht mit der Domain der We
verwendet wird. Um diesen Fehler zu beheben, stellen Sie sicher, dass die Domain des sitekey mit der Domain der Website übereinstimmt, indem Sie
sich beim [Prosopo Portal](https://portal.prosopo.io) anmelden und die Domain aktualisieren.

### Was bedeutet `Incorrect CAPTCHA type`?
Dieser Fehler tritt auf, wenn der [CAPTCHA-Typ](/de/basics/captcha-types) nicht korrekt gesetzt ist. Der Standard-`captchaType` ist
`frictionless`. Wenn Sie `pow` oder `image` verwenden möchten, müssen Sie Ihren `captchaType` in der Widget-Konfiguration auf `pow`
oder `image` setzen. Sie müssen auch Ihre [Portaleinstellungen](https://portal.prosopo.io) entsprechend aktualisieren.

### Was bedeutet `Session not found`?
Dieser Fehler tritt auf, wenn die Sitzung nicht gefunden wird. Dies kann passieren, wenn die Sitzung abgelaufen ist oder wenn die Sitzungs-ID
nicht gültig ist. Um diesen Fehler zu beheben, warten Sie entweder, bis das Widget neu geladen wird (3s), oder aktualisieren Sie die Seite. Wenn der Fehler weiterhin besteht,
Expand Down
47 changes: 0 additions & 47 deletions src/content/docs/de/basics/invisible-captcha.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,50 +22,6 @@ Unsichtbares CAPTCHA funktioniert durch:
3. Anzeige einer sichtbaren Herausforderung nur, wenn der Benutzer verdächtig erscheint
4. Bereitstellung einer reibungslosen Erfahrung für legitime Benutzer

## CAPTCHA-Typen

### Unsichtbares Frictionless
Die intelligenteste Option, die sich dynamisch an das Benutzerverhalten anpasst:

```html
<button
class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="frictionless"
data-size="invisible"
data-callback="onCaptchaSuccess">
Submit
</button>
```

### Unsichtbarer Proof of Work
Führt eine Rechenherausforderung unsichtbar im Hintergrund aus:

```html
<button
class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="pow"
data-size="invisible"
data-callback="onCaptchaSuccess">
Submit
</button>
```

### Unsichtbares Bild
Zeigt sichtbare Herausforderungen an, um den Benutzer bei Formularübermittlung zu verifizieren:

```html
<button
class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="image"
data-size="invisible"
data-callback="onCaptchaSuccess">
Submit
</button>
```

## Implementierungsmethoden

### Implizites Rendering
Expand All @@ -85,7 +41,6 @@ Fügen Sie die `procaptcha`-Klasse und Datenattribute direkt zu Ihren Formularel
type="button"
class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="frictionless"
data-size="invisible"
data-callback="handleSubmit"
data-failed-callback="handleFailure">
Expand Down Expand Up @@ -144,7 +99,6 @@ Für mehr Kontrolle über den CAPTCHA-Lebenszyklus:
// Render invisible CAPTCHA
widgetId = render(document.getElementById('captcha-container'), {
siteKey: 'your_site_key',
captchaType: 'frictionless',
size: 'invisible',
callback: handleCaptchaSuccess,
'failed-callback': handleCaptchaFailure
Expand All @@ -167,7 +121,6 @@ Für mehr Kontrolle über den CAPTCHA-Lebenszyklus:
| Attribut | Wert | Beschreibung |
|----------|------|--------------|
| `data-size` | `"invisible"` | **Erforderlich.** Aktiviert den unsichtbaren Modus |
| `data-captcha-type` | `"frictionless"`, `"pow"`, `"image"` | Art der CAPTCHA-Herausforderung |
| `data-callback` | Funktionsname | Wird aufgerufen, wenn CAPTCHA erfolgreich verifiziert wurde |
| `data-failed-callback` | Funktionsname | Wird aufgerufen, wenn CAPTCHA-Verifizierung fehlschlägt |
| `data-sitekey` | Ihr sitekey | **Erforderlich.** Ihr Procaptcha sitekey |
Expand Down
53 changes: 2 additions & 51 deletions src/content/docs/en/basics/captcha-types.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: CAPTCHA Types
description: Serve different types of CAPTCHA by setting the `captchaType` to `frictionless`, `pow`, `image`.
description: Serve different types of CAPTCHA: `frictionless`, `pow`, `image`.
i18nReady: true
---
import {Image} from 'astro:assets';
Expand All @@ -9,7 +9,7 @@ import ImageCaptcha from '~/assets/image-captcha.png';
import PoWSettings from '~/assets/pow-settings.png';
import ImageSettings from '~/assets/image-settings.png';

Serve **different** types of CAPTCHA by setting the `captchaType` to `frictionless`, `pow`, `image`.
Serve **different** types of CAPTCHA: `frictionless`, `pow`, `image`.

## Frictionless CAPTCHA

Expand Down Expand Up @@ -38,52 +38,3 @@ An image CAPTCHA challenge requires the user to select the correct image(s) that
/>

The Image CAPTCHA type does not interrogate the user's browser environment, use `frictionless` for that (above).

## Set Type Implicitly

### 1. Set the type in the widget configuration

Here we are setting the `captchaType` to Proof-of-Work `pow`.

```html
<div class="procaptcha" data-sitekey="your_site_key" data-captcha-type="pow"></div>
```

### 2. Set the type in the portal

Navigate to the [Prosopo portal](https://portal.prosopo.io) and update the CAPTCHA type in the settings to `pow`.

<Image
src={PoWSettings}
alt="prosopo pow setting"/>

## Set Type Explicitly

### 1. Set the type in the widget configuration

Here we are setting the `captchaType` to Image `image`.

```javascript
document.getElementById('procaptcha-script').addEventListener('load', function () {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}
// Get the Element using elementId
const captchaContainer = document.getElementById('procaptcha-container')
window.procaptcha.render(captchaContainer, {
siteKey: 'YOUR_SITE_KEY',
theme: 'dark',
callback: onCaptchaVerified,
captchaType: 'image', // `pow` or leave blank for `frictionless`
})
})
```

### 2. Set the type in the portal

Navigate to the [Prosopo portal](https://portal.prosopo.io) and update the CAPTCHA type in the settings to `image`.

<Image
src={ImageSettings}
alt="prosopo image setting"/>

18 changes: 0 additions & 18 deletions src/content/docs/en/basics/client-side-rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,6 @@ following fields:
| siteKey | string | The site key of your application / website. This is required. | ✓ |
| callback | string or function | The name of the window function, or a 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 or function | The name of the window function, or a function, that will be called when the CAPTCHA challenge expires. | ✗ |
| error-callback | string or function | The name of the window function, or a function, that will be called when an error occurs. | ✗ |
| close-callback | string or function | The name of the window function, or a function, that will be called when the CAPTCHA is closed. | ✗ |
Expand All @@ -139,23 +138,6 @@ and define the callback function on the window object.
<div class="procaptcha" data-sitekey="your_site_key" data-callback="yourCallbackFunction"></div>
```

### `captchaType`

You can choose to implement any of the following types of captcha when rendering the Procaptcha component:

| Type | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `frictionless` | The default CAPTCHA type is `frictionless`. This type of CAPTCHA is invisible to the user, only requiring them to complete an invisible [Proof of Work challenge](https://en.wikipedia.org/wiki/Proof_of_work) (`pow`). Suspected bots are served image captcha challenges (`image`). |
| `pow` | The `pow` CAPTCHA type requires the user to solve a cryptographic puzzle. This puzzle simply requires a small amount of computational work to solve, and slows down bots significantly, making it difficult for them to scrape in high volumes. |
| `image` | The `image` CAPTCHA type requires the user to solve a simple image CAPTCHA. This is CAPTCHA type most people are familiar with, created by Google reCAPTCHA. |



**Please note**, if using `image` or `pow`, the client side [CAPTCHA type](/en/basics/captcha-types/) must be set to the same value as in the [portal](https://portal.prosopo.io):
- If your portal CAPTCHA Type is `image`, you must set the client side CAPTCHA Type to `image`.
- If your portal CAPTCHA Type is `pow`, you must set the client side CAPTCHA Type to `pow`.
- If your portal CAPTCHA Type is `frictionless`, you must set the client side CAPTCHA Type to `frictionless` or leave it blank.

### Framework Integrations

Various frameworks have been integrated with Procaptcha. You can find the documentation for each framework below:
Expand Down
5 changes: 0 additions & 5 deletions src/content/docs/en/basics/faq.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,6 @@ This error occurs when the domain of the site key does not match the domain of t
is being used. To resolve this error, ensure that the domain of the site key matches the domain of the website by
logging in to the [Prosopo portal](https://portal.prosopo.io) and updating the domain.

### What does `Incorrect CAPTCHA type` mean?
This error occurs when the [captcha type](/en/basics/captcha-types) is not set correctly. The default `captchaType` is
`frictionless`. If you wish to use `pow` or `image` you must set your `captchaType` in the widget configuration to `pow`
or `image`. You must also update your [portal settings](https://portal.prosopo.io) to match.

### What does `Session not found` mean?
This error occurs when the session is not found. This can happen if the session has expired or if the session ID is
not valid. To resolve this error, either wait for the widget to reload (3s) or refresh the page. If the error persists,
Expand Down
47 changes: 0 additions & 47 deletions src/content/docs/en/basics/invisible-captcha.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,50 +22,6 @@ Invisible CAPTCHA works by:
3. Only showing a visible challenge if the user appears suspicious
4. Providing a smooth experience for legitimate users

## CAPTCHA Types

### Invisible Frictionless
The most intelligent option that dynamically adapts based on user behavior:

```html
<button
class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="frictionless"
data-size="invisible"
data-callback="onCaptchaSuccess">
Submit
</button>
```

### Invisible Proof of Work
Runs a computational challenge invisibly in the background:

```html
<button
class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="pow"
data-size="invisible"
data-callback="onCaptchaSuccess">
Submit
</button>
```

### Invisible Image
Shows visible challenges to verify the user on form submission:

```html
<button
class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="image"
data-size="invisible"
data-callback="onCaptchaSuccess">
Submit
</button>
```

## Implementation Methods

### Implicit Rendering
Expand All @@ -85,7 +41,6 @@ Add the `procaptcha` class and data attributes directly to your form elements:
type="button"
class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="frictionless"
data-size="invisible"
data-callback="handleSubmit"
data-failed-callback="handleFailure">
Expand Down Expand Up @@ -144,7 +99,6 @@ For more control over the CAPTCHA lifecycle:
// Render invisible CAPTCHA
widgetId = render(document.getElementById('captcha-container'), {
siteKey: 'your_site_key',
captchaType: 'frictionless',
size: 'invisible',
callback: handleCaptchaSuccess,
'failed-callback': handleCaptchaFailure
Expand All @@ -167,7 +121,6 @@ For more control over the CAPTCHA lifecycle:
| Attribute | Value | Description |
|-----------|-------|-------------|
| `data-size` | `"invisible"` | **Required.** Enables invisible mode |
| `data-captcha-type` | `"frictionless"`, `"pow"`, `"image"` | Type of CAPTCHA challenge |
| `data-callback` | Function name | Called when CAPTCHA is successfully verified |
| `data-failed-callback` | Function name | Called when CAPTCHA verification fails |
| `data-sitekey` | Your site key | **Required.** Your Procaptcha site key |
Expand Down
Loading