一、pc端登录(Vue)
1. 账号密码登录
无非就是调后端接口。
2. 短信验证码登录
// 步骤如下:
1.用户输入手机号,点击发送验证码
(1)前端要进行正则校验手机号
(2)如果合法就弹出滑块组件。
2.展示滑块组件(插件):插件本身做的事
(1)发请求:
前端给后端传递:验证码 + 随机数uuid + 当前时间戳,
后端给前端响应:背景图 + 小滑块 + 加密的校验码(根据:验证码 + 随机数uuid + 当前时间戳)
(2)前端拿到数据后,要干的活:
把背景图、小滑块渲染到页面,
把后端给的'加密校验码'存储起来(存储到一个变量或者存储到本地都行)
(3)用户交互行为:
鼠标按下:没有跟后端交互。
鼠标滑动:没有跟后端交互。
鼠标松开:与后端交互,看(4)
(4)发请求:
前端给后端传递:小滑块的位置 + 之前后端给的加密校验码
后端给前端响应:提示成功或者失败 + 第二次加密的校验码(根据:滑块位置 + 第一次加密校验码)
3.前端调用短信验证码API
(1)发请求:
前端给后端传递:手机号 + 之前后端第二次加密的加密校验码
后端给前端响应:成功就发短信,失败就提示错误就行了
3. 微信扫码登录
步骤1:思路分析。
(1)后端已经把所需的参数提供给前端了。(参数看下图)
(2)前端调API接口,拿到全部参数,并动态的创建一个script标签来加载微信二维码,
通过new WxLogin({...}),然后把后端给的参数一一传进去,就会自动生成一个二维码
(3)注意一下回调地址的填写:前端要写一个回调地址,后端也要写一个回调地址,
微信开放平台也有一个回调地址,必须三者同时一致,登录成功后才能进行页面重定向。
步骤2:参数列表说明。
步骤3:代码实现。
// 代码实现:
<script setup lang="ts">
import { onMounted } from 'vue'
import { getLoginParamsApi } from '@/api/login.js'
// 总结:加载JS脚本、发请求拿到密钥、创建WxLogin对象并传入密钥,生成微信二维码图片。
onMounted(() => {
const scriptDom = document.createElement('script')
scriptDom.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
document.body.appendChild(scriptDom)
// JS加载完成后要做的事:
scriptDom.onload = async () => {
// 发请求拿参数
const resp = await getLoginParamsApi()
const { appid, redirectUri, scope, state } = resp.data
console.log(resp)
// 填入参数,生成微信二维码
let obj = new WxLogin({
self_redirect: false,
id: 'wxLogin',
appid,
scope, // 网页直接写死即可:'snsapi_login'
redirect_uri: decodeURIComponent(redirectUri),
state
})
}
})
</script>
<template>
<div class="login-form">
<div id="wxLogin" class="qrcode">二维码</div>
</div>
</template>
<style lang="scss" scoped>
// 扫码登录
.login-form {
.qrcode {
text