Skip to content

Commit 9093a81

Browse files
forgetsoforgetso
authored
feat/docs translations (#37)
1 parent a6b9c83 commit 9093a81

File tree

175 files changed

+9401
-405
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

175 files changed

+9401
-405
lines changed

‎astro.config.ts‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import rehypeSlug from 'rehype-slug';
99
import remarkSmartypants from 'remark-smartypants';
1010
import starlight from '@astrojs/starlight';
1111
import tailwind from '@astrojs/tailwind';
12-
import json5Plugin from 'vite-plugin-json5'
12+
import json5Plugin from 'vite-plugin-json5';
1313
import { builtinModules } from 'module';
1414

1515
/* https://vercel.com/docs/projects/environment-variables/system-environment-variables#system-environment-variables */
@@ -107,8 +107,42 @@ export default defineConfig({
107107
directRenderScript: true,
108108
},
109109
vite: {
110-
111-
plugins: [json5Plugin()],
110+
plugins: [
111+
json5Plugin(),
112+
{
113+
name: 'raw-jsonc-loader',
114+
transform(code, id) {
115+
// Handle .jsonc files (with or without ?raw suffix)
116+
if (id.includes('.jsonc')) {
117+
const json = JSON.stringify(code)
118+
.replace(/\u2028/g, '\\u2028')
119+
.replace(/\u2029/g, '\\u2029');
120+
return {
121+
code: `export default ${json}`,
122+
map: null
123+
};
124+
}
125+
return null;
126+
}
127+
}
128+
],
129+
optimizeDeps: {
130+
esbuildOptions: {
131+
loader: {
132+
'.jsonc': 'text',
133+
},
134+
},
135+
},
136+
ssr: {
137+
noExternal: ['@astrojs/starlight'],
138+
esbuild: {
139+
options: {
140+
loader: {
141+
'.jsonc': 'text',
142+
},
143+
},
144+
},
145+
},
112146
build: {
113147
modulePreload: { polyfill: true },
114148
rollupOptions: {

‎src/content/docs/de/basics/captcha-types.mdx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: "CAPTCHA-Typen"
3+
description: "Stellen Sie verschiedene CAPTCHA-Typen bereit, indem Sie `captchaType` auf `frictionless`, `pow` oder `image` setzen."
4+
i18nReady: true
5+
---
6+
import {Image} from 'astro:assets';
7+
import ProcaptchaGIF from '~/assets/procaptcha-pow.gif';
8+
import ImageCaptcha from '~/assets/image-captcha.png';
9+
import PoWSettings from '~/assets/pow-settings.png';
10+
import ImageSettings from '~/assets/image-settings.png';
11+
12+
Stellen Sie **verschiedene** CAPTCHA-Typen bereit, indem Sie `captchaType` auf `frictionless`, `pow` oder `image` setzen.
13+
14+
## Frictionless CAPTCHA
15+
16+
Die standardmäßige `frictionless`-Funktion von Procaptcha erkennt dynamisch, ob der Benutzer einen normalen Browser oder automatisierte,
17+
headless Browser wie [playwright](https://playwright.dev/) oder [selenium](https://www.selenium.dev/) verwendet. Wenn der Benutzer
18+
wahrscheinlich ein Bot ist, wird dem Benutzer eine Bild-CAPTCHA-Herausforderung präsentiert. Wenn der Benutzer wahrscheinlich ein *Mensch* ist, wird
19+
dem Benutzer *keine* Bild-CAPTCHA-Herausforderung präsentiert und stattdessen wird eine einfache, unsichtbare Proof of Work
20+
(PoW)-Herausforderung gelöst.
21+
22+
## Proof of Work (PoW) CAPTCHA
23+
24+
Eine Proof of Work (`pow`) CAPTCHA-Herausforderung erfordert, dass der Benutzer ein Rechenpuzzle löst, bevor das Formular übermittelt wird. Es ist für Menschen einfach zu lösen, aber rechnerisch teuer für Bots.
25+
26+
<Image src={ProcaptchaGIF} alt={'prosopo procaptcha pow captcha challenge'} style="margin: 20px auto;"/>
27+
28+
Der Proof of Work CAPTCHA-Typ untersucht nicht die Browserumgebung des Benutzers, verwenden Sie dafür `frictionless` (siehe oben).
29+
30+
## Bild-CAPTCHA
31+
32+
Eine Bild-CAPTCHA-Herausforderung erfordert, dass der Benutzer das/die richtige(n) Bild(er) auswählt, das/die der gegebenen Aufforderung entspricht/entsprechen.
33+
34+
<Image
35+
src={ImageCaptcha}
36+
alt="prosopo procaptcha image captcha challenge"
37+
style="margin: 0 auto;"
38+
/>
39+
40+
Der Bild-CAPTCHA-Typ untersucht nicht die Browserumgebung des Benutzers, verwenden Sie dafür `frictionless` (siehe oben).
41+
42+
## Typ implizit setzen
43+
44+
### 1. Setzen Sie den Typ in der Widget-Konfiguration
45+
46+
Hier setzen wir `captchaType` auf Proof-of-Work `pow`.
47+
48+
```html
49+
<div class="procaptcha" data-sitekey="your_site_key" data-captcha-type="pow"></div>
50+
```
51+
52+
### 2. Setzen Sie den Typ im Portal
53+
54+
Navigieren Sie zum [Prosopo Portal](https://portal.prosopo.io) und aktualisieren Sie den CAPTCHA-Typ in den Einstellungen auf `pow`.
55+
56+
<Image
57+
src={PoWSettings}
58+
alt="prosopo pow setting"/>
59+
60+
## Typ explizit setzen
61+
62+
### 1. Setzen Sie den Typ in der Widget-Konfiguration
63+
64+
Hier setzen wir `captchaType` auf Bild `image`.
65+
66+
```javascript
67+
document.getElementById('procaptcha-script').addEventListener('load', function () {
68+
function onCaptchaVerified(output) {
69+
console.log('Captcha verified, output: ' + JSON.stringify(output))
70+
}
71+
// Get the Element using elementId
72+
const captchaContainer = document.getElementById('procaptcha-container')
73+
window.procaptcha.render(captchaContainer, {
74+
siteKey: 'YOUR_SITE_KEY',
75+
theme: 'dark',
76+
callback: onCaptchaVerified,
77+
captchaType: 'image', // `pow` or leave blank for `frictionless`
78+
})
79+
})
80+
```
81+
82+
### 2. Setzen Sie den Typ im Portal
83+
84+
Navigieren Sie zum [Prosopo Portal](https://portal.prosopo.io) und aktualisieren Sie den CAPTCHA-Typ in den Einstellungen auf `image`.
85+
86+
<Image
87+
src={ImageSettings}
88+
alt="prosopo image setting"/>
89+

‎src/content/docs/de/basics/client-side-rendering.mdx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
---
2+
title: "Clientseitiges Rendering"
3+
description: "Rendern Sie das Procaptcha Widget auf Ihrer Website mit der Procaptcha JavaScript-Ressource."
4+
i18nReady: true
5+
---
6+
7+
Zuerst müssen Sie die Procaptcha JavaScript-Ressource irgendwo in Ihrer HTML-Seite einbinden. Das `<script>` muss
8+
über HTTPS geladen werden und kann überall auf der Seite platziert werden. Innerhalb des `<head>`-Tags oder unmittelbar nach dem `.procaptcha`-Container
9+
sind beide in Ordnung.
10+
11+
```html
12+
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
13+
```
14+
15+
Nun können Sie das Procaptcha Widget entweder implizit oder explizit rendern.
16+
17+
## Implizites Rendering
18+
19+
Fügen Sie einen leeren DOM-Container hinzu, in den das Procaptcha Widget automatisch eingefügt wird. Der Container ist
20+
typischerweise ein `<div>` (kann aber jedes Element sein) und muss die Klasse `procaptcha` und ein `data-sitekey`-Attribut haben, das auf Ihren
21+
öffentlichen
22+
sitekey gesetzt ist.
23+
24+
```html
25+
<body>
26+
<div class="procaptcha" data-sitekey="your_site_key"></div>
27+
</body>
28+
```
29+
30+
Normalerweise möchten Sie den leeren `.procaptcha`-Container in ein HTML-Formular einfügen. Wenn ein CAPTCHA erfolgreich
31+
gelöst wird, wird automatisch eine versteckte JSON-Payload zu Ihrem Formular hinzugefügt, die Sie dann per POST an Ihren Server zur
32+
Verifizierung senden können. Sie können sie serverseitig mit dem POST-Parameter `procaptcha-response` abrufen.
33+
34+
Hier ist ein vollständiges Beispiel, bei dem Procaptcha verwendet wird, um ein Anmeldeformular vor automatisiertem Missbrauch zu schützen. Wenn das Formular
35+
übermittelt wird, wird das `procaptcha-response`-Token zusammen mit den E-Mail- und Passwort-POST-Daten eingefügt, nachdem das CAPTCHA
36+
gelöst wurde.
37+
38+
### Beispiel für implizites Rendering
39+
40+
```html
41+
<html>
42+
<head>
43+
<title>Procaptcha Demo</title>
44+
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
45+
</head>
46+
<body>
47+
<form action="" method="POST">
48+
<input type="text" name="email" placeholder="Email" />
49+
<input type="password" name="password" placeholder="Password" />
50+
<div class="procaptcha" data-sitekey="your_site_key"></div>
51+
<br />
52+
<input type="submit" value="Submit" />
53+
</form>
54+
</body>
55+
</html>
56+
```
57+
58+
## Explizites Rendering
59+
60+
Wenn Sie das Widget lieber selbst rendern möchten, können Sie die `Procaptcha.render()`-Methode verwenden. Die `Procaptcha.render()`-Methode
61+
muss aufgerufen werden, nachdem das procaptcha.bundle.js-Skript geladen wurde.
62+
63+
### Beispiel für explizites Rendering
64+
65+
Das Skript wird im Head des Dokuments geladen und erhält die ID `procaptcha-script`. Ein Container wird mit der
66+
ID `procaptcha-container` erstellt, in dem das Widget gerendert wird.
67+
68+
```html
69+
<html>
70+
<head>
71+
<script
72+
type="module"
73+
id="procaptcha-script"
74+
src="https://js.prosopo.io/js/procaptcha.bundle.js"
75+
async
76+
defer
77+
></script>
78+
</head>
79+
<body>
80+
<div id="procaptcha-container"></div>
81+
</body>
82+
</html>
83+
```
84+
85+
Ein `onload`-Event wird dem Script-Tag hinzugefügt, um die Render-Funktion aufzurufen, wenn das Skript geladen wurde.
86+
87+
```javascript
88+
// A function that will call the render Procaptcha function when the procaptcha script has loaded
89+
document.getElementById('procaptcha-script').addEventListener('load', function () {
90+
// Define a callback function to be called when the CAPTCHA is verified
91+
function onCaptchaVerified(output) {
92+
console.log('Captcha verified, output: ' + JSON.stringify(output))
93+
}
94+
95+
// Get the Element using elementId
96+
const captchaContainer = document.getElementById('procaptcha-container')
97+
// Render the CAPTCHA explicitly on a container with id "procaptcha-container"
98+
window.procaptcha.render(captchaContainer, {
99+
siteKey: 'YOUR_SITE_KEY',
100+
theme: 'dark',
101+
callback: onCaptchaVerified,
102+
})
103+
})
104+
```
105+
106+
## Procaptcha-Optionen
107+
108+
Die `Procaptcha.render()`-Funktion nimmt ein Optionsobjekt als zweites Argument. Das Optionsobjekt kann die
109+
folgenden Felder enthalten:
110+
111+
| Key | Type | Beschreibung | Erforderlich |
112+
|----------------------|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------|
113+
| siteKey | string | Der sitekey Ihrer Anwendung / Website. Dies ist erforderlich. | ✓ |
114+
| callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA verifiziert wurde. | ✗ |
115+
| theme | string | Das Theme des CAPTCHA-Widgets. Der Standard ist `light`. Die andere Option ist `dark`. | ✗ |
116+
| captchaType | string | Der Typ des zu rendernden CAPTCHA. Der Standard ist `frictionless`. Andere Optionen sind `image`, `pow`. | ✗ |
117+
| chalexpired-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn die CAPTCHA-Herausforderung abläuft. | ✗ |
118+
| error-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn ein Fehler auftritt. | ✗ |
119+
| close-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA geschlossen wird. | ✗ |
120+
| open-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA geöffnet wird. | ✗ |
121+
| expired-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn die CAPTCHA-Lösung abläuft. | ✗ |
122+
| failed-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn die CAPTCHA-Herausforderung fehlschlägt. | ✗ |
123+
| reset-callback | string or function | Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA zurückgesetzt wird. | ✗ |
124+
| language | string | Die Sprache des CAPTCHA-Widgets. Der Standard ist `en`. Alle Sprachen finden Sie [hier](https://github.com/prosopo/captcha/tree/main/packages/locale/src/locales). | ✗ |
125+
126+
### Datenattribute
127+
128+
Die gleichen Optionen können der impliziten Rendering-Methode übergeben werden, indem sie als Datenattribute zum `.procaptcha`-Container hinzugefügt werden.
129+
Um beispielsweise das Theme auf dark zu setzen, würden Sie `data-theme="dark"` zum `.procaptcha`-Container hinzufügen.
130+
131+
```html
132+
<div class="procaptcha" data-sitekey="your_site_key" data-theme="dark"></div>
133+
```
134+
135+
Um einen Callback mit einem Daten-Tag zu setzen, würden Sie `data-callback="yourCallbackFunction"` zum `.procaptcha`-Container hinzufügen
136+
und die Callback-Funktion am Window-Objekt definieren.
137+
138+
```html
139+
<div class="procaptcha" data-sitekey="your_site_key" data-callback="yourCallbackFunction"></div>
140+
```
141+
142+
### `captchaType`
143+
144+
Sie können beim Rendern der Procaptcha-Komponente jeden der folgenden CAPTCHA-Typen implementieren:
145+
146+
| Type | Beschreibung |
147+
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
148+
| `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`). |
149+
| `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. |
150+
| `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. |
151+
152+
153+
154+
**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:
155+
- Wenn Ihr Portal-CAPTCHA-Typ `image` ist, müssen Sie den clientseitigen CAPTCHA-Typ auf `image` setzen.
156+
- Wenn Ihr Portal-CAPTCHA-Typ `pow` ist, müssen Sie den clientseitigen CAPTCHA-Typ auf `pow` setzen.
157+
- Wenn Ihr Portal-CAPTCHA-Typ `frictionless` ist, müssen Sie den clientseitigen CAPTCHA-Typ auf `frictionless` setzen oder ihn leer lassen.
158+
159+
### Framework-Integrationen
160+
161+
Verschiedene Frameworks wurden mit Procaptcha integriert. Die Dokumentation für jedes Framework finden Sie unten:
162+
163+
- [React Integration](/de/framework-integrations/angular-integration/)
164+
- [Vue Integration](/de/framework-integrations/vue-integration/)
165+
- [Angular Integration](/de/framework-integrations/angular-integration/)
166+
- [Svelte Integration](/de/framework-integrations/svelte-integration/)
167+
168+

‎src/content/docs/de/basics/context-awareness.mdx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: "Kontextbewusstsein"
3+
description: "Schützen Sie die CAPTCHA-Verifizierung durch Anwendung umgebungssensibler Prüfungen und konfigurierbarer Kontextschwellenwerte, um betrügerische oder unerwartete Origin-Nutzung zu reduzieren."
4+
i18nReady: true
5+
---
6+
7+
Kontextbewusstsein hilft zu verhindern, dass Ihr CAPTCHA auf gefälschten oder unerwarteten Origins verwendet wird, indem umgebungssensible Prüfungen und ein konfigurierbarer Sensitivitätsschwellenwert angewendet werden. Es erhöht die Schwierigkeit von Herausforderungen für verdächtige Kontexte, während legitimer Traffic mit minimaler Reibung passieren kann.
8+
9+
## Was ist Kontextbewusstsein?
10+
11+
Kontextbewusstsein vergleicht Laufzeitsignale aus eingehenden Anfragen (Origin, Frame/Embedding-Kontext, Umgebung) mit Ihrem erwarteten Website-Kontext. Wenn Diskrepanzen erkannt werden, kann das System die Verifizierungsschwierigkeit erhöhen oder die Verifizierung fehlschlagen lassen, um Missbrauch von eingebetteten oder gefälschten Origins zu reduzieren.
12+
13+
## Wie Kontextbewusstsein funktioniert
14+
15+
### Erkennungsablauf
16+
17+
1. **Anfrage trifft ein** - Das System sammelt Umgebungssignale wie Origin, Embedding/Frame-Status und Client-Indikatoren.
18+
2. **Kontextvergleich** - Signale werden mit dem konfigurierten erwarteten Website-Kontext verglichen.
19+
3. **Bewertung & Entscheidung** - Ein kontextbezogener Risiko-Score wird abgeleitet und anhand des ausgewählten Sensitivitätsschwellenwerts bewertet.
20+
4. **Aktion ergriffen**:
21+
- **Unter Schwellenwert**: Normale Verifizierung (unsichtbarer PoW oder leichte Verifizierung).
22+
- **Am oder über Schwellenwert**: CAPTCHA-Schwierigkeit erhöhen oder Verifizierung fehlschlagen lassen (abhängig von Steuerungen).
23+
24+
## Steuerungen
25+
26+
- Webview verbieten
27+
Verhindert erfolgreiche Verifizierung aus In-App-Webviews. Benutzer können CAPTCHAs weiterhin durchführen, aber die Verifizierung schlägt fehl, wenn die Anfrage von einer Webview stammt.
28+
29+
- Kontextbewusstsein (Umschalter)
30+
Aktiviert kontextbezogene Prüfungen, die Anforderungsumgebungssignale mit Ihrem erwarteten Website-Kontext vergleichen. Wenn aktiviert, kann das System die Herausforderungsschwierigkeit für verdächtige Kontexte erhöhen.
31+
32+
- Schwellenwert-Schieberegler (Niedrig / Mittel / Hoch)
33+
Drei-Positionen-Schieberegler zur Steuerung der Sensitivität. Mittel wird empfohlen; Niedrig ist freizügig, Hoch ist streng.
34+
35+
### Schwellenwertbereiche
36+
37+
| Bereich | Bezeichnung | Beschreibung |
38+
|---------|-------------|--------------|
39+
| Niedrig | Freizügig | Erlaubt mehr Lösungen; kann betrügerische oder eingebettete Origins zulassen. |
40+
| Mittel | Ausgewogen | Empfohlener Standard — guter Kompromiss zwischen UX und Sicherheit. |
41+
| Hoch | Streng | Blockiert mehr verdächtige Kontexte; kann falsch-positive Ergebnisse erhöhen. |
42+
43+
## Berechtigungen & Verhalten
44+
45+
- Benutzer der kostenlosen Stufe können weder `Webview verbieten` noch `Kontextbewusstsein` aktivieren. Ein Umschaltversuch zeigt den Upgrade-CTA an.
46+
- Der Betrachter-Modus macht Steuerungen schreibgeschützt und zeigt einen informativen Hinweis an.
47+
48+
## Praxisbeispiele
49+
50+
- E-Commerce: Beginnen Sie mit Mittel. Überwachen Sie während Werbeaktionen den Traffic, bevor Sie die Sensitivität senken, um Reibung zu reduzieren. Bei Angriffen vorübergehend auf Hoch erhöhen.
51+
- Eingebettetes Widget: Wenn Ihre Website eingebettet werden soll, vermeiden Sie hohe Sensitivität oder setzen Sie Integrationskontexte explizit auf die Whitelist.
52+
53+
## Konfiguration des Kontextbewusstseins
54+
55+
1. Melden Sie sich beim Prosopo Portal an.
56+
2. Navigieren Sie zu Ihren Website-Einstellungen.
57+
3. Suchen Sie den Abschnitt "Kontextbewusstsein".
58+
4. Aktivieren Sie die Funktion und setzen Sie den Schwellenwert-Schieberegler auf Niedrig / Mittel / Hoch.
59+
5. Speichern Sie die Änderungen und überwachen Sie die Analysen, um das Verhalten zu validieren.
60+
61+
## Hilfe erhalten
62+
63+
- Kontaktieren Sie den Prosopo-Support über [Discord](https://discord.com/invite/dwQx2w9Tgm).
64+
- Überprüfen Sie Analysedaten mit unserem Team, um die Einstellungen feinabzustimmen.

0 commit comments

Comments
 (0)