前言:
由于公司需要使用goole人机验证功能。
前期准备
- 前往注册goole 账号
- 前往注册账号 (https://www.google.com/recaptcha/admin)
- 设置域名、获取秘钥
详细教程前往(https://www.mmuaa.com/post/a0...
由于是在vue项目中使用reCaptcha所以这里只说在vue中的用法
- 子组件: reCaptcha.vue
<template>
<div ref="grecaptcha"></div>
</template>
<script>
export default {
props: ["sitekey"], // 所要传的秘钥
methods: {
loaded() {
window.grecaptcha.render(this.$refs.grecaptcha, {
sitekey: this.sitekey,
/**
* res返回的是goole的验证情况,
* 成功返回字符串
* 失败不返回字符串
* 所以根据字符串判断验证情况
*/
callback: res => {
res.length > 0 ?
// true - 验证成功
// false - 验证失败
this.$emit("getValidateCode", true) :
this.$emit("getValidateCode", false)
}
});
}
},
mounted() {
window.ReCaptchaLoaded = this.loaded;
var script = document.createElement("script");
script.src =
"https://recaptcha.net/recaptcha/api.js?onload=ReCaptchaLoaded&render=explicit";
document.head.appendChild(script);
}
};
</script>
- 父组件
<template>
<el-form class="login-form"
status-icon
:rules="loginRules"
ref="loginForm"
:model="loginForm"
label-width="0">
<el-form-item prop="username">
<el-input size="small"
@keyup.enter.native="handleLogin"
v-model="loginForm.username"
auto-complete="off"
placeholder="请输入用户名">
<i slot="prefix"
class="icon-yonghu"></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input size="small"
@keyup.enter.native="handleLogin"
:type="passwordType"
v-model="loginForm.password"
auto-complete="off"
placeholder="请输入密码">
<i class="el-icon-view el-input__icon"
slot="suffix"
@click="showPassword"></i>
<i slot="prefix"
class="icon-mima"></i>
</el-input>
</el-form-item>
<el-form-item prop='validateCode'>
<el-row :span="24">
<el-col :span="24">
<!-- reCaptcha -->
<reCaptcha :sitekey="key" @getValidateCode='getValidateCode' v-model="loginForm.validateCode"></reCaptcha>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary"
size="small"
@click.native.prevent="handleLogin"
class="login-submit">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
import reCaptcha from './reCaptcha'
import { randomLenNum } from "@/util/util";
import { validateReCode } from "@/util/validate"
import { mapGetters } from "vuex";
export default {
name: "userlogin",
components: {
reCaptcha
},
data () {
var checkCode = (rule, value, callback) => {
if (value == false) {
callback(new Error('请进行人机验证'));
} else {
callback();
}
};
return {
key: '6LfJF-QUAAAAAOl_ddwGTfQM5terhXJGOs0_WBiQ',
loginForm: {
username: "admin",
password: "123456",
redomStr: "",
validateCode: false,
},
checked: false,
loginRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "密码长度最少为6位", trigger: "blur" }
],
validateCode: [
{ validator: checkCode, trigger: 'change' }
]
},
passwordType: "password"
};
},
mounted(){
console.log(this.$refs.recaptcha)
},
computed: {
...mapGetters(["tagWel"])
},
methods: {
getValidateCode(value) {
this.loginForm.validateCode = value
},
showPassword () {
this.passwordType == ''
? (this.passwordType = 'password')
: (this.passwordType = '')
},
handleLogin () {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
this.$router.push({ path: this.tagWel.value });
}).catch(()=>{
this.refreshCode()
})
}
});
}
}
};
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。