Vue项目:如何实现短信验证码登录?
1.选择一个短信平台,这里选择网建短信通,在该平台进行注册。2.在该平台进行登录,点开接口设置功能可以看到用户名,安全密钥以及短信签名,如果发送的短信内容是验证码的话,最好加上短信签名,如在短信签名输入框中写:安全公司3.在项目中进行功能的实现Step1:安装axios依赖方法:1.在package.json中的dependencies中添加"axios": "^0.21.1",2.在终端命令行中
·
1.选择一个短信平台,这里选择网建短信通,在该平台进行注册。
http://sms.webchinese.cn/index.shtml
2.在该平台进行登录,点开接口设置功能可以看到用户名,安全密钥以及短信签名,如果发送的短信内容是验证码的话,最好加上短信签名,如在短信签名输入框中写:安全公司
3.在项目中进行功能的实现
Step1:安装axios依赖
方法:
1.在package.json中的dependencies中添加"axios": "^0.21.1",
2.在终端命令行中输入npm install
,进行安装
Step2:在vue.config.js中配置跨域
devServer: {
proxy: {
'/note': {
target: 'http://utf8.api.smschinese.cn/',
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 = 6
var 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('清输入手机号!')
}
}
实现效果:
点击获取验证码后收到短信
感谢收阅
更多推荐
已为社区贡献5条内容
所有评论(0)