如果要在網站上加裝防機器人的機制，google 提供的這個 reCAPTCHA 是一個很方便的套件，如果有投票、留言板之類的功能怕被灌票的話，可以透過裝上這個來防治。
1. 申請認證
要使用的話首先要到 google reCAPTCHA 去申請一個帳號，簡單填一下網域跟管理員 email 就好了。
接下來會拿到像這樣一組 key
接下來在你要做認證的網頁上貼上兩組 html，第二行那個是要貼在你要認證的表單 form 標籤內。
這樣就會自動產生認證的區塊了。
2. 使用 CodeIgniter
前端設置好了之後，介紹後端驗證的部分，這邊用 CodeIgniter 來介紹，首先可以先去下載 CodeIgniter-reCAPTCHA 這個套件。
在 config/recaptcha.php 填入申請到的 key
- $config['recaptcha_site_key'] = '';
- $config['recaptcha_secret_key'] = '';
使用
- $this->load->library('recaptcha');
如果是 form post 的話，直接這樣就可以接到值並做驗證了。
- $recaptcha = $this->input->post('g-recaptcha-response');
- $response = $this->recaptcha->verifyResponse($recaptcha);
- if (isset($response['success']) and $response['success'] === true) {
- echo "You got it!";
- }
3. AJAX 驗證
如果要使用 AJAX 的話，讀 api 要變成這樣寫。
- <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onReCaptchaLoad"></script>
要生成驗證碼的地方取一個 id
- <div id="myCaptcha"></div>
接下來就可以一下面的程式碼接到回傳值
- var captchaWidgetId;
- var onReCaptchaLoad = function() {
- captchaWidgetId = grecaptcha.render( 'myCaptcha', {
- 'sitekey' : 'your_site_key', // required
- 'theme' : 'light', // optional
- 'callback': 'verifyCallback' // optional
- });
- };
- var verifyCallback = function( recaptcha ) {
- //接到回傳值
- };
在其他地方要拿到 reCAPTCHA 的值的話用這個方法
- var recaptcha = grecaptcha.getResponse(captchaWidgetId);
然後就可以用 AJAX 傳到 server 後再處理了。
參考:
google reCAPTCHA
CodeIgniter-reCAPTCHA
Google reCAPTCHA v2.0 on a Dynamic Page
![[Facebook] 客製化 facebook 登入](/assets/upload/1597306986824_0.jpg)
![[Vue.js] 計算選取的 checkbox 數量](/assets/upload/1583563899683_0.jpg)
![[jQuery] 使用 .on 將事件綁到動態產生的元素上](/assets/upload/1588088792122_0.jpg)
