Punktebasierte Schlüssel auf Websites installieren

Auf dieser Seite wird erläutert, wie Sie einen bewertungsbasierten Schlüssel ohne Challenge auf Ihrer Website installieren. Mit einem punktzahlbasierten Schlüssel können Sie reCAPTCHA auf Ihrer gesamten Website einbinden, ohne dass Nutzer CAPTCHA-Aufgaben lösen müssen.

Wenn ein punktbasierter 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 für jede Anfrage eine Punktzahl zu erhalten. Anhand des Scores können Sie das Risiko von Nutzerinteraktionen einschätzen und eine oder mehrere geeignete Antworten konfigurieren. Außerdem kann der punktbasierte Schlüssel Telemetriedaten zu Bot-Aktivitäten erfassen, um frühzeitig vor neuen Angriffen oder Zielen zu warnen.

Um das Risikomodell von reCAPTCHA zu verbessern, empfehlen wir, reCAPTCHA auf jeder Seite Ihrer Website einzubinden. So lässt sich besser nachvollziehen, wie echte Nutzer und Bots zwischen verschiedenen Seiten und Aktionen wechseln.

Hinweis

  1. Umgebung für Google Cloud Fraud Defense vorbereiten

  2. Erstellen Sie einen punktzahlbasierten Schlüssel.

    Alternativ können Sie die ID eines vorhandenen punktbasierten Schlüssels kopieren. Führen Sie dazu einen der folgenden Schritte aus:

    • So kopieren Sie die ID eines vorhandenen Schlüssels aus der Google Cloud Console:

      1. Rufen Sie die Seite Google Cloud Fraud Defense auf.

        Zu Google Cloud Fraud Defense

      2. Wählen Sie den Tab Keys aus.
      3. Suchen Sie in der Liste der reCAPTCHA-Schlüssel den Schlüssel, den Sie kopieren möchten, und klicken Sie dann auf .
    • Wenn Sie die ID eines vorhandenen Schlüssels mit der REST API kopieren möchten, verwenden Sie die Methode projects.keys.list.
    • Wenn Sie die ID eines vorhandenen Schlüssels mit der gcloud CLI kopieren möchten, verwenden Sie den Befehl gcloud recaptcha keys list.

Fügen Sie den Schlüssel auf Ihrer Website ein.

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.

Für optimale Ergebnisse sollten Sie auf Punktzahlen basierende Schlüssel an den folgenden Stellen auf Ihrer Website installieren:

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

Punktbasierte Schlüssel unterbrechen Ihre Nutzer nicht. Sie können reCAPTCHA also bei Bedarf mit punktbasierten Schlüsseln ausführen, ohne dass sich dies auf die Conversion auswirkt.

Schlüssel in das Frontend einbinden

Wir empfehlen, die reCAPTCHA-Überprüfung für Nutzerinteraktionen hinzuzufügen, die überprüft werden müssen. 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.

Bestätigung bei einer Nutzerinteraktion hinzufügen

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

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

    reCAPTCHA verwendet standardmäßig 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 einen Ort für das Logo angeben möchten, verwenden Sie badge=LOCATION als Suchparameter im Script-Tag. Beispiel: www.google.com/recaptcha/enterprise.js?render=KEY_ID&badge=bottomleft. Standardmäßig ist der Standort auf bottomright festgelegt. Die anderen möglichen Werte sind inline und bottomleft.

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

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

    2. Rufen Sie grecaptcha.enterprise.execute() für jede Interaktion auf, die Sie mit Ihrem punktbasierten 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() für eine 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 einen 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, wird das reCAPTCHA-Token an Ihr Backend gesendet und es wird innerhalb von zwei Minuten eine Bewertung erstellt.

    Wenn Sie bei WAF-Integrationen einen Aktions-Token-Schlüssel integrieren, müssen Sie das Token an einen vordefinierten Anfrageheader anhängen. Sie müssen keine Bewertung erstellen. Weitere Informationen finden Sie unter reCAPTCHA-Aktionstokens implementieren.

reCAPTCHA auf einem HTML-Button hinzufügen

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

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

    reCAPTCHA verwendet standardmäßig 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. So fügen Sie reCAPTCHA auf einem HTML-Button hinzu:

    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 dem HTML-Button Attribute hinzu.

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

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

    3. Wenn dieser Button verwendet wird, um ein Formular auf Ihrer Website einzureichen, enthält der POST-Parameter g-recaptcha-response das Antworttoken.

  3. Nachdem das Token generiert wurde, wird das reCAPTCHA-Token an Ihr Backend gesendet und es wird innerhalb von zwei Minuten eine Bewertung erstellt.

    Wenn Sie bei WAF-Integrationen einen Aktions-Token-Schlüssel integrieren, müssen Sie das Token an einen vordefinierten Anfrageheader anhängen. Sie müssen keine Bewertung erstellen. Weitere Informationen finden Sie unter reCAPTCHA-Aktionstokens implementieren.

Nächste Schritte