Vue.js CAPTCHA-Integration

Erstellen Sie ein Benutzerkonto oder melden Sie sich mit einem bestehenden Konto an. Anschließend erstellen Sie ein neues CAPTCHA oder wählen Sie ein bereits vorhandenes aus. Wenn Sie sich nicht sicher sind, ob TrustCaptcha das Richtige für Sie ist, können Sie unseren CAPTCHA-Service 14 Tage lang kostenlos und ohne Risiko testen.

Auf der CAPTCHA-Übersichtsseite finden Sie alle wichtigen Informationen wie den site-key, den secret-key und den license-key. Ermöglichen Sie Ihren Websites den Zugriff auf Ihr CAPTCHA, indem Sie diese einfach zur Liste der autorisierten Domains in den CAPTCHA-Sicherheitsregeln hinzufügen.

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-vue

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!