preloader
軟體工程

PHP Laravel 5.5 和 Vuejs 2.4 使用 Google invisible recaptcha

Laravel 5.5 請用 composer 安裝 albertcht/invisible-recaptcha,安裝指令是

composer require albertcht/invisible-recaptcha

,設定 invisible recaptcha 的變數值在 .env 檔案,請參考這個網頁 https://github.com/albertcht/invisible-recaptcha

  1. Laravel controller 端:

a) 請在 config/services.php 設定讀取 .env 檔的變數,並在 controller 的函式內讀取 config/services.php 檔案內的 invisible-recaptcha 服務相對應值,例如:

$sitekey = config('services.recaptcha.key');
$badge = config('services.recaptcha.databadge');

b) 在該函式內傳變數和值給 view blade:

return view('home.index', compact('sitekey', 'badge'));

c) 在 接收表單參數的方法中,使用 Laravel 帶的 Validator 類別,驗證表單參數,例如:


$validate = Validator::make($req->all(), [
 'gRecaptchaResponse' => 'required|captcha',
 'param1' => 'required|email',
 'param2' => 'required|string'
]);

 

  1. Laravel view blade端:
<script>
window.sitekey = '{{$sitekey}}';
window.badge = '{{$badge}}';
</script>

  3. Vuex 端:

假設檔名是 my_test_store.js

export default
{
  state: {
    sitekey: sitekey,
    badge: badge,
  }
}

 

  1. Vue 初始設定端:

假設檔名是 my_test.js


...

...

...

(已省略一些 Vuejs 和Vuex初始設定的程式碼)

import myTestStore from './my\_test\_store.js';

const store = new Vuex.Store(myTestStore);
const app = new Vue({el: "#app", store, });
  1. Vue component 端:
<template>

// 省略表單大部分元件

<div class="g-recaptcha" id="g-recaptcha" :data-sitekey="invisibleSiteKey" :data-callback="sendData" :data-size="invisible"></div>

<input type="submit" class="yoyo-button" id="my-test-button" @click.prevent="loadMyInvisibleRecaptcha" />

</template>
<script>

  export default
  {
    components: {
    },
    props: {
    },
    data() {
       ajaxData: {},
       account: '',
       password: '',
    },

    computed: {

        invisibleSiteKey() {
           return this.$store.state.sitekey;
        },
        widgetId() {
           return window.grecaptcha.render(document.getElementById('my-test-button'), {
            sitekey: this.invisibleSiteKey, badge: this.badge, size: 'invisible', callback: this.sendData
           });
        },
    },
    methods: {
       loadMyInvisibleRecaptcha() {
          // 使用vue驗證欄位套件, 例如 vee-validate

          this.$validator.validateAll({
              // 省略內容
          }).then((result) => {
              // 省略一些內容
              // 如果驗證不通過應該如何處理 blahblah, 省略內容
              // 如果驗證通過應該如何處理 blahblah, 省略一些內容

              grecaptcha.reset(this.widgetId);
              grecaptcha.execute(this.widgetId);
          });

       },

       sendData(token) {
           let responseOfRecaptcha = token;

           this.ajaxData = _.assign(this.ajaxData, {account: this.account, pwd: this.password, })

           axios.post('/my-url', this.ajaxData).then(
            // 以下省略
           );
       },
    },
  }

</script>