Ich versuche, Invisible reCAPTCHA mit dem React- und Redux-Formular zu implementieren. Im Allgemeinen ist der Invisible reCAPTCHA-Workflow:
grecaptcha.execute mit der ID des Widgets auf. Bei Bedarf wird der Benutzer aufgefordert, eine Challenge zu lösen. Das Ergebnis wird an eine Callback-Funktion übergeben, die beim Rendern des CAPTCHA angegeben wurde. Ich habe eine React-Komponente erstellt, die mit dem Field des Redux-Formulars verwendet werden soll, das den CAPTCHA rendert und den Formularstatus aktualisiert, nachdem grecaptcha.execute aufgerufen wurde:
Ich weiß jedoch nicht, wie oder wo man grecaptcha.execute zusammen mit der Widget-ID beim Senden des Formulars durch den Benutzer aufrufen soll. Ich kann es nicht in onSubmit aufrufen, weil die Widget-ID dort nicht erreichbar ist. Ich könnte es direkt nach dem Rendern des CAPTCHA in ReCaptcha aufrufen, aber wenn ein Benutzer das CAPTCHA lösen muss, wird er dazu aufgefordert, sobald das Formular gerendert ist.
Dieses minimale Arbeitsbeispiel zeigt, was ich bisher erreicht habe.
Verwenden Sie die Property onSubmit, um grecaptcha.execute () aufzurufen, und verweisen Sie den Datenrückruf auf die Funktion 'real' onSubmit.
%Vor%N.b. Ich habe diesen Code nicht getestet, aber er sollte mehr oder weniger richtig sein. Wenn Sie Probleme mit dem Laden von grecaptcha in die Seite / Formular bekommen, fand ich dies Code sehr hilfreich.
Ich musste unsichtbares reCAPTCHA für mich arbeiten lassen, weil das Sichtbare nicht reaktionsfähig ist. Hier ist das Beispiel, das ich implementiert habe.
Als erstes musst du dem Körper den Tag unterhalb des Tags hinzufügen (oder du kannst reaktiven Helm ) verwenden.
%Vor%Vereinfachte Version meines Arbeitscodes:
%Vor%Tags und Links reactjs redux-form recaptcha