Implementierung von Google ReCaptcha In Angular2

Question

Ich entwickle gerade eine Anwendung mit Angular 2 und möchte Google ReCaptcha zur Benutzerüberprüfung verwenden. Alle von der Community erstellten Module, die ich bisher gesehen habe, scheinen jedoch keine serverseitige Authentifizierung mit dem geheimen Schlüssel zu verwenden, der nach der Anmeldung für die API bereitgestellt wird.

Ich habe das ReCaptcha zuvor mit der expliziten Renderfunktionalität mit Javascript implementiert. Ich bin mir jedoch nicht sicher, wie ich die gleiche Funktionalität in meinem Angular 2 Typescript Code implementieren kann. Idealerweise möchte ich, dass der Benutzer auf ReCaptcha klickt, eine Übergabeschaltfläche angezeigt wird, sobald der ReCaptcha abgeschlossen ist, und der Benutzer das Formular abschicken kann. Dann würde mein Backend-Server die abschließende Verifizierung mit dem geheimen Schlüssel abschließen. Dies würde über einen http.post-Aufruf erfolgen. Allerdings ist die Einreichung der Regel geben Sie mir nicht mit dem „g-recaptcha-Reaktion“, die soll ich werden immer über http.post zu senden, wenn ein Benutzer das Formular sendet, wie in den ReCaptcha Führern beschrieben:

https://developers.google.com/recaptcha/docs/verify

Wenn jemand irgendwelche Tipps oder Erfahrungen hat, lass es mich wissen. Auch wenn weitere Informationen benötigt werden, fragen Sie bitte, ich bin relativ neu beim Posten von Fragen hier.

Answer 1

Es gibt einen fantastischen Beitrag, der dies in angular2 erklärt. Ich denke, das könnte Ihnen eine Idee geben, wie Sie das angehen können.
Sie müssen Ihren Backend-Server anrufen, nachdem Sie auf die Schaltfläche Recaptcha geklickt haben. Danach können Sie Ihren Site-Schlüssel zur Überprüfung an Google recaptcha api senden.

app.get('/validate_captcha', (req, res) => { 
     const options = { 
     method: 'POST', 
     uri: 'https://www.google.com/recaptcha/api/siteverify', 
     qs: { 
      secret, 
      response: req.query.token 
     }, 
     json: true 
     }; 

     rp(options) 
     .then(response => res.json(response)) 
     .catch(() => {}); 

    }); 

Dies wird Ihnen durch die Backend-Seite helfen.
Wie in diesem Artikel oder Dokument erwähnt, erhalten Sie grecaptcha-response im Frontend.
Schauen Sie in diesen Link recaptcha