验证码登录?"/>
Vue项目:如何实现短信验证码登录?
1.选择一个短信平台,这里选择网建短信通,在该平台进行注册。
.shtml
2.在该平台进行登录,点开接口设置功能可以看到用户名,安全密钥以及短信签名,如果发送的短信内容是验证码的话,最好加上短信签名,如在短信签名输入框中写:安全公司
3.在项目中进行功能的实现
Step1:安装axios依赖
方法:
1.在package.json中的dependencies中添加"axios": "^0.21.1",
2.在终端命令行中输入npm install
,进行安装
Step2:在vue.config.js中配置跨域
devServer: {proxy: {'/note': {target: '/',changeOrigin: true,pathRewrite: {'^/note': ''}}}},
tips:此处target是短信网站的url,采用utf-8编码,可以在该网站更换编码方式
Step3:在登陆页面实现功能
在本项目中要实现点击获取验证码的链接,就能收到验证码短信
<el-link class="get-code-link" type="primary" @click="createCodeAndSend">获取验证码</el-link>
// 生成六位的数字验证码并发送短信createCodeAndSend() {if (this.loginForm.phone != null) {// this.$refs.loginFormRef.validate(async valid => {// if (!valid) return// 生成六位数字验证码var codeLength = 6var createPhoneCode = ''// foreach循环,六次for (var i = 0; i < codeLength; i++) {var index = Math.floor(Math.random() * (9))index = index.toString()createPhoneCode += index}// 发送验证码短信给用户const text = '【验证码】' + createPhoneCode + '\n【您正在使用登陆功能,该验证码仅用于身份验证,在五分钟之内有效,请勿泄露给其他人使用。】' const param = new URLSearchParams()param.append('Uid', 之前登录后看到的用户名(字符串))param.append('Key', 之前登录后看到的安全密钥(字符串))param.append('smsMob', this.loginForm.phone)param.append('smsText', text)this.$http.post('/note/', param, {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}}).then(function (response) {console.log(response)})// })} else {this.$message.warning('清输入手机号!')}}
实现效果:
点击获取验证码后收到短信
感谢收阅
更多推荐
Vue项目:如何实现短信验证码登录?
发布评论