前言
為了避免網站被 robot 掃模做重複性的動作,例如加入會員,申請忘記密碼等等,我們會放一個必須人為輸入的欄位並且讓 robot 難以辨識破解,常見的會有文字以及數字的圖像化輸入,但有的機器人如果拿到規律以及足夠的樣本,純文字的輸入方式是可能被破解的,Google 出的 reCaptcha 屬於圖像化的選擇驗證,不管是排列位置或是種類的多樣性都難以去破解,在這邊示範一下怎麼整合 ci 使用
實做
套件安裝
首先安裝 google/recaptcha 這個套件,我在 codeigniter 上有使用 composer,在 config/config.php 下可以打開,使用方法跟在 Laravel 上一樣
程式碼
application/controllers/Recaptcha.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Recaptcha extends CI_Controller { public function index() { $this->load->helper('form'); $this->load->helper('url'); $this->load->view('recaptcha/form'); } public function result() { $this->load->library('form_validation'); $status = 'done'; $message = 'done'; $secret = '6LfsIQ8UAAAAAOveAzcFb6A_3Yiv_QdfR-qo5qld'; try { $this->form_validation->set_rules('username', 'username', 'required'); $this->form_validation->set_rules('g-recaptcha-response', 'captcha', 'required'); if (!$this->form_validation->run()) { throw new Exception(validation_errors(null, null)); } $gRecaptchaResponse = $this->input->post('g-recaptcha-response'); $remoteIp = $this->input->ip_address(); $recaptcha = new \ReCaptcha\ReCaptcha($secret); $resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp); if (!$resp->isSuccess()) { $errors = $resp->getErrorCodes(); throw new Exception(current($errors)); } } catch (Exception $e) { $status = 'fail'; $message = $e->getMessage(); } $this->output ->set_content_type('application/json') ->set_output(json_encode(compact('status', 'message'))); } }
application/views/recaptcha/form.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>reCAPTCHA Demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src='https://www.google.com/recaptcha/api.js'></script> <script type="text/javascript" charset="utf-8"> var baseUrl = "<?php echo base_url(); ?>"; $(function() { $('#recaptcha_form').on('submit', function() { var data = $(this).serialize(); $.post(baseUrl + 'recaptcha/result', data, function(response) { alert(response.message); if (response.status === 'done') { grecaptcha.reset(); } }, 'json'); return false; }); }); </script> </head> <body> <?php echo form_open('recaptcha/result', ['id' => 'recaptcha_form']); ?> <div><?php echo form_input('uername', 'chan'); ?></div> <div class="g-recaptcha" data-sitekey="6LfsIQ8UAAAAAFmYCwSLpfKgWtqK1SlVfMcPn2Q6"></div> <div><?php echo form_submit('go', 'go'); ?></div> <?php echo form_close(); ?> </body> </html>
使用 reCAPTCHA 要先去申請 key 跟 secret,這部份我就不講解了,這份程式碼主要功能就是驗證是否有輸入 username 以及 reCAPTCHA,有的話再進一步驗證 captcha 正確性,如果你不想使用套件的錯誤訊息,那一旦報錯你只要顯示 captcha 錯誤即可,有些表單送出後不一定會換頁,所以我加了個 script 如果偵測到這次的行為正確的時候 refresh 一個新的 captcha,語法的使用時機可以看使用者的使用情況去調整搭配
沒有留言:
張貼留言