Laravel 5.5 請用 composer
安裝 albertcht/invisible-recaptcha
,安裝指令是
composer require albertcht/invisible-recaptcha
,設定 invisible recaptcha 的變數值在 .env 檔案,請參考這個網頁 https://github.com/albertcht/invisible-recaptcha
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'
]);
<script>
window.sitekey = '{{$sitekey}}';
window.badge = '{{$badge}}';
</script>
3. Vuex 端:
假設檔名是 my_test_store.js
export default
{
state: {
sitekey: sitekey,
badge: badge,
}
}
假設檔名是 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, });
<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>