在Angular2中實現Google ReCaptcha

我目前正在開發一個Angular 2應用程序，並希望使用Google的ReCaptcha進行用戶驗證。但是，迄今爲止我看到的所有社區創建的模塊似乎都沒有使用服務器端身份驗證，只需註冊API即可提供密鑰。在Angular2中實現Google ReCaptcha

我以前使用Javascript實現了使用顯式渲染功能的ReCaptcha。但是，我不確定如何在我的Angular 2 Typescript代碼中實現相同的功能。理想情況下，我希望讓用戶點擊ReCaptcha，一旦ReCaptcha完成後會出現一個提交按鈕，允許用戶提交表單，然後我的後端服務器將完成包含密鑰的最終驗證。這將通過http.post調用完成。然而，提交通常不向我提供的，我應該會得到通過http.post發送當用戶提交作爲驗證碼指南描述的形式「G-reCAPTCHA的響應」：

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

如果有人有任何提示或經驗，請讓我知道。如果還有其他需要的信息，請詢問，我在這裏發佈問題相對較新。

來源

2017-02-15 landesko

如果您正在尋找方程的PHP端你可以看看[這個答案]（http://stackoverflow.com/a/27439796/648350）。對於ng2方面，您需要明確地將您的帖子中的recaptcha值包含到您的服務器中。（[angular2-google-recaptcha]（https://github.com/rajan-g/angular2-google-recaptcha/tree/master/example）提供了有關如何執行此操作的演示） – haxxxton

有一個很棒的文章，在angular2中解釋這個。我認爲這可能會讓你知道如何解決這個問題。
您必須在用戶點擊您的驗證碼按鈕後打電話給您的後端服務器。在此之後，您可以將您的網站密鑰發送至Google Recaptcha api進行驗證。

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(() => {}); 

    });

這將幫助你透過後端側。
正如本文或文檔所述，您將在前端獲得grecaptcha-response。
看這個鏈接recaptcha

來源

2017-09-21 02:07:44 abby37

在Angular2中實現Google ReCaptcha

回答

相關問題