Punktebasierte Schlüssel auf Websites installieren

Auf dieser Seite wird erläutert, wie Sie einen punktebasierten Schlüssel ohne Herausforderung auf Ihrer Website installieren. Mit einem punktebasierten Schlüssel können Sie reCAPTCHA in Ihre Website einbinden, ohne dass Nutzer CAPTCHA-Herausforderungen lösen müssen.

Wenn ein punktebasierter Schlüssel installiert ist, sendet reCAPTCHA eine verschlüsselte Antwort, das reCAPTCHA-Antworttoken (auch als Token bezeichnet), wenn ein Endnutzer eine Interaktion auslöst. Nachdem das Token generiert wurde, müssen Sie innerhalb von zwei Minuten eine Bewertung erstellen, um eine Punktzahl für jede Anfrage zu erhalten. Basierend auf der Punktzahl können Sie das Risiko, das Nutzerinteraktionen verursachen, verstehen und eine entsprechende Antwort (oder Antworten) konfigurieren. Mit dem punktebasierten Schlüssel kann außerdem Telemetrie zur Bot-Aktivität erfasst werden, um Frühwarnhinweise für neue Angriffe oder Ziele zu erhalten.

Damit Sie das Risikomodell von reCAPTCHA verbessern können, sollten Sie reCAPTCHA auf jeder Seite Ihrer Website einfügen, da es hilft, zu verstehen, wie echte Nutzer und Bots zwischen verschiedenen Seiten und Aktionen wechseln.

Hinweis

  1. Bereiten Sie Ihre Umgebung für reCAPTCHA vor.

  2. Erstellen Sie einen punktebasierten Schlüssel.

    Alternativ können Sie die ID eines vorhandenen punktebasierten Schlüssels kopieren, indem Sie einen der folgenden Schritte ausführen:

    • So kopieren Sie die ID eines vorhandenen Schlüssels aus der Google Cloud Konsole, gehen Sie wie folgt vor:

      1. Rufen Sie die Seite reCAPTCHA auf.

        Zu reCAPTCHA

      2. Halten Sie in der Liste der reCAPTCHA-Schlüssel den Mauszeiger auf den Schlüssel, den Sie kopieren möchten, und klicken Sie dann auf .
    • Verwenden Sie die Methode projects.keys.list, um die ID eines vorhandenen Schlüssels mithilfe der REST API zu kopieren.
    • Verwenden Sie den Befehl gcloud recaptcha keys list, um die ID eines vorhandenen Schlüssels mithilfe der gcloud CLI zu kopieren.

Schlüssel auf Ihrer Website platzieren

reCAPTCHA funktioniert am besten, wenn es Kontext zu den Interaktionen auf Ihrer Website hat. reCAPTCHA überwacht sowohl legitimes als auch missbräuchliches Verhalten, um mehr über die Interaktionen auf Ihrer Website zu erfahren.

Die besten Ergebnisse erzielen Sie, wenn Sie punktebasierte Schlüssel an den folgenden Stellen auf Ihrer Website installieren:

  • Formulare
  • Aktionen (Nutzerinteraktionen)
  • Im Hintergrund aller Webseiten

Punktebasierte Schlüssel unterbrechen Ihre Nutzer nicht, sodass Sie reCAPTCHA bei Bedarf mit punktebasierten Schlüsseln ausführen können, ohne die Conversion zu beeinträchtigen.

Schlüssel in das Frontend einbinden

Wir empfehlen, die reCAPTCHA-Überprüfung für eine Nutzerinteraktion hinzuzufügen, die überprüft werden muss. Wenn Sie beispielsweise die Sendeaktion eines Formulars überprüfen möchten, müssen Sie die reCAPTCHA-Überprüfung für die Sendeaktion hinzufügen.

Wählen Sie je nachdem, wo Sie die reCAPTCHA-Überprüfung hinzufügen möchten, die entsprechende Option aus:

Ein Beispiel für jede Option finden Sie im Quellcode der Demowebsite.

Überprüfung für eine Nutzerinteraktion hinzufügen

  1. Wenn Sie reCAPTCHA auf Ihre Webseite laden möchten, fügen Sie die JavaScript API mit Ihrem punktebasierten Schlüssel im <head></head> Element Ihrer Webseite hinzu.

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    Standardmäßig verwendet reCAPTCHA die Sprache des Browsers. Wenn Sie eine andere Sprache angeben möchten, verwenden Sie das Attribut hl=LANG in Ihrem Skript. Wenn Sie beispielsweise Französisch verwenden möchten, geben Sie Folgendes an: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Informationen zu den unterstützten Sprachen finden Sie unter Sprachcodes für reCAPTCHA.

    Wenn Sie eine Position für das Badge angeben möchten, verwenden Sie badge=LOCATION als Abfrageparameter im Skript-Tag. Beispiel: www.google.com/recaptcha/enterprise.js?render=KEY_ID&badge=bottomleft. Standardmäßig ist die Position auf bottomright festgelegt. Die anderen möglichen Werte sind inline und bottomleft.

  2. So fügen Sie die reCAPTCHA-Überprüfung für eine Nutzerinteraktion hinzu:

    1. Verwenden Sie grecaptcha.enterprise.ready(), damit grecaptcha.enterprise.execute() nach dem Laden der reCAPTCHA-Bibliothek ausgeführt wird.

    2. Rufen Sie grecaptcha.enterprise.execute() für jede Interaktion auf, die Sie mit Ihrem punktebasierten Schlüssel schützen möchten. Geben Sie im Parameter action einen aussagekräftigen Namen für eine Nutzerinteraktion an. Weitere Informationen finden Sie unter Aktionen.

      Das folgende Beispiel zeigt, wie grecaptcha.enterprise.execute() bei einer Anmeldeaktion aufgerufen wird:

      <script>
function onClick(e) {
  e.preventDefault();
  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute('KEY_ID', {action: 'LOGIN'});
    // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
    // reCAPTCHA to the end user's browser.
    // This token must be validated by creating an assessment.
    // See https://cloud.google.com/recaptcha/docs/create-assessment
  });
}
</script>

      grecaptcha.enterprise.execute() generiert ein Token, wie im folgenden Beispiel gezeigt: 

      03AGdBq27tvcDrfiRuxQnyKs-SarXVzPODXLlpiwNsLqdm9BSQQRtxhkD-Wv6l2vBSnL_JQd80FZp3IeeF_TxNMrqhyQchk7hmg_ypDctt_F5RTr9zNO9TSDX3Fy0qHQTuaM9E3hrAkA1v1l7D-fCreg7uq8zoudfh1ZRmN49-2iAMAn4E8_ff-nmlLTNGVZmCSyeze-5xM24pM_JhhUVcCMIDKYtDUnr2imxg2ubIqMscCZGUtdXNUO_LRSzuwWDlLyAr3V2nVn29Z48PQa2QzbymEXzO9pCtoGQmY7kiZ8ILfD9DAJSSyUTMwJXVJptUeBmLM341fq_STYZBbPQJ0zYOEDvJoFsIwGMfuphkDet0nK56b0mkzaL8RCRy2oK31Mcx6n3PhGkCnQ6QIhiV5ZVmV1Hz9M3w99zYw6ekc3wPCNMZ6V6x1ApVpIk3reFfByRQ0C0_pRWwbKZHLXQ_oSTI1UI7kyH1VeXngsJAx2l7zcp0hQNipajC4YwL7Jb8X4cCD0NeiaY1YCrI5j87mK5axcMikq460I4niIFeDBlHGF-ndqu3CJstosAur-C_x827f-dPPjA9Vrw8MDb3x4KUb0vbA8xE9mJxPYGY0rPCR27vJ38Voa7DjEBGX9c-iufv5_wfj-yIfIAHy0iijnRLI0CVkWF2-iPdWv7LnkTwL3WKbF_MrEGZXmtyLX9dEZArfxmToeMuSdYkfikkgR2-k4Xzxlz15RbHJuWSAYqEyTTnpUXmOvDuTN92b0kYqbRelcLUI_Shm-8dq9e-L7K6YWQv32gV6NukZKY15dyrJaW10frBgTOGSTTpIyB7MNEL8S27WjWtOb-zWsgimIhoRNfS8BiJWkmK4gTj51m7Wur-qsDbHgV6gXlMvjJs_B7oXX-mKsKhY9ACtwukotBelGYQOvf1RDHjH3Yi1RDfELBY6AkwUK4tq8cACVGpCwa0gKUo-sbORTsGu_r7VTzYo1AaZD5HV4XUm8yoqszel6DmIfkJcI7PfzzvfUJuvMQ1itZSzpzuth3glbKBYsIjbKqG-q8cxtZ7u0l32j46ASo2zlCJWUjwP3W1P7MUenEoIZtjlyTB_tT6Fk8RxGgRv3oLP7NPFJGs9ZGOAl6tBHpZF8Y_FqEOCMKtBl2JYOE5h6_Es3buSdiMm7mtLr64pboGiEColF1vbVvYpyaaqGFPXBM6ekZSXEXLAI0_7rj_fCLgnB21KXfac95vZbM9vyJCASvDcWKwqajQwy5aGMNe9GtbMogYbZfz5UGWAIi24Vd8KSv3qKOOwvzbcw4H0HYdsBXA

  3. Nachdem das Token generiert wurde, senden Sie das reCAPTCHA-Token an Ihr Backend und erstellen Sie innerhalb von zwei Minuten eine Bewertung.

    Bei WAF-Integrationen müssen Sie das Token an einen vordefinierten Anfrageheader anhängen, wenn Sie einen Aktionstoken-Schlüssel einbinden. Eine Bewertung ist nicht erforderlich. Weitere Informationen finden Sie unter reCAPTCHA-Aktionstokens implementieren.

reCAPTCHA auf einer HTML-Schaltfläche hinzufügen

  1. Wenn Sie reCAPTCHA auf Ihre Webseite laden möchten, fügen Sie die JavaScript API mit Ihrem punktebasierten Schlüssel im <head></head> Element Ihrer Webseite hinzu.

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    Standardmäßig verwendet reCAPTCHA die Sprache des Browsers. Wenn Sie eine andere Sprache angeben möchten, verwenden Sie das Attribut hl=LANG in Ihrem Skript. Wenn Sie beispielsweise Französisch verwenden möchten, geben Sie Folgendes an: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Informationen zu den unterstützten Sprachen finden Sie unter Sprachcodes für reCAPTCHA.

  2. Wenn Sie reCAPTCHA auf einer einfachen HTML-Schaltfläche hinzufügen möchten, gehen Sie so vor:

    1. Definieren Sie eine Callback-Funktion, um das Token zu verarbeiten.

      <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   } // Use `requestSubmit()` for extra features like browser input validation.
</script>

      Weitere Informationen finden Sie unter requestSubmit().

    2. Fügen Sie der HTML-Schaltfläche Attribute hinzu.

      <button class="g-recaptcha"
data-sitekey="KEY_ID"
data-callback="onSubmit"
data-action="submit">Submit</button>

      Wenn Sie eine Position für das Badge angeben möchten, verwenden Sie das data-badge=LOCATION Attribut für das Element mit class=g-recaptcha. Standardmäßig ist die Position auf bottomright festgelegt. Die anderen möglichen Werte sind inline und bottomleft.

    3. Wenn diese Schaltfläche verwendet wird, um ein Formular auf Ihrer Website zu senden, enthält der POST-Parameter g-recaptcha-response das Antworttoken.

  3. Nachdem das Token generiert wurde, senden Sie das reCAPTCHA-Token an Ihr Backend und erstellen Sie innerhalb von zwei Minuten eine Bewertung.

    Bei WAF-Integrationen müssen Sie das Token an einen vordefinierten Anfrageheader anhängen, wenn Sie einen Aktionstoken-Schlüssel einbinden. Eine Bewertung ist nicht erforderlich. Weitere Informationen finden Sie unter reCAPTCHA-Aktionstokens implementieren.

Nächste Schritte