Vue.js

Wenn Sie noch kein Konto bei uns haben, registrieren Sie sich bitte hier. Wenn Sie bereits ein Konto haben, melden Sie sich bitte an.

Erstellen Sie ein neues CAPTCHA oder wählen Sie ein bestehendes CAPTCHA aus. Auf Ihrem Dashboard sehen Sie eine Übersicht über alle bestehenden CAPTCHAs, auf die Sie Zugriff haben.

Wenn Sie noch unsicher sind, ob TrustCaptcha das Richtige für Sie ist, können Sie unseren Service 14 Tage lang risikofrei und kostenlos testen.

In der CAPTCHA-Übersicht finden Sie alle wichtigen Informationen, Statistiken und Einstellmöglichkeiten. Hier finden Sie auch Ihren Site-Key, den Secret-Key und – falls verfügbar – den License-Key. Diese benötigen Sie später bei der Integration Ihres CAPTCHAs.

Fügen Sie Ihre Websites hinzu
Auf Ihr CAPTCHA darf nur von Websites zugegriffen werden, die Sie ausdrücklich autorisieren. Um Websites für den Zugriff auf das CAPTCHA freizuschalten, tragen Sie alle Websites, auf denen Sie das CAPTCHA-Widget integrieren möchten, in den CAPTCHA-Sicherheitsregeln ein.

Die folgenden Schritte geben Ihnen einen groben Überblick, wie Sie das TrustCaptcha CAPTCHA-Widget in ein Vue.js-Frontend integrieren. Für genaue, detaillierte Anweisungen lesen Sie bitte die CAPTCHA-Integrationsanleitung für Vue.js in unserer Dokumentation.

Installieren Sie zunächst unser TrustCaptcha Vue.js-Paket:

npm i @trustcomponent/trustcaptcha-vuejs

Registrieren Sie das TrustCaptcha-Element als Custom Element:

export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('trustcaptcha'),
}
}
}),
],
})

Fügen Sie die TrustCaptcha-Komponente zu Ihrer Anwendung hinzu:

import {TrustcaptchaComponent} from "@trustcaptcha/trustcaptcha-vue";

createApp(App).use(TrustcaptchaComponent).mount('#app')

Fügen Sie nun das CAPTCHA-Widget – den sogenannten trustcaptcha-component-HTML-Tag – in ein beliebiges HTML-Formular ein:

<form>
  <!-- your input fields -->
  <trustcaptcha-component
    sitekey="<your_site_key>"
    @captchaSolved="handleSuccess($event.detail)"
    @captchaFailed="handleError($event.detail)"
  ></trustcaptcha-component>
  <!-- further input fields / submit button -->
</form>

Das CAPTCHA-Widget wird nun auf Ihrer Vue.js-Website angezeigt:

Benötigen Sie detaillierte Informationen zur Vue.js-CAPTCHA-Integration?
Detaillierte Anweisungen zur Integration von TrustCaptcha finden Sie in unserer Vue.js CAPTCHA-Integrationsanleitung. Ein vollständiges Integrationsbeispiel für das Vue.js CAPTCHA finden Sie in unserem CAPTCHA-Samples-Repository auf Github.

Andere Frontend-Technologie statt Vue.js?
Wenn Sie Vue.js nicht verwenden möchten oder mehrere Websites bzw. Anwendungen haben, können Sie hier ein anderes Framework oder eine andere Plattform auswählen. Wenn es von uns keine vorgefertigte Integration für Ihre bevorzugte Frontend-Technologie gibt, können Ihre Softwareentwickler das CAPTCHA selbst integrieren – mithilfe unserer Dokumentation – oder unser Support-Team nach einer vorgefertigten Integrationslösung fragen.

Sobald das CAPTCHA abgeschlossen ist, nehmen Sie das Verifikationstoken und senden es an Ihr Backend. Rufen Sie in Ihrem Backend das CAPTCHA-Verifikationsergebnis von unseren Servern ab und validieren Sie das Ergebnis. Abhängig davon, wie hoch das Bot-Risiko ist, entscheiden Sie, wie Sie weiter vorgehen. Detaillierte Informationen zur Backend-Integration und Ergebnisvalidierung finden Sie in unserer Dokumentation.

Vorgefertigte Backend-Integrationen
Sie können eine unserer vorgefertigten Integrationen nutzen, um den CAPTCHA-Validierungsprozess in Ihren Backend-Service zu integrieren. Wenn es von uns keine vorgefertigte Integration für Ihre bevorzugte Backend-Technologie gibt, können Ihre Softwareentwickler das CAPTCHA selbst integrieren – mithilfe unserer Dokumentation – oder unser Support-Team nach einer vorgefertigten Integrationslösung fragen.

Sie sind jetzt durch TrustCaptcha geschützt – Glückwunsch!