pc端项目登陆方式

pc端项目登陆
方式一：微信扫码登陆
1、参考网站：

https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

2、前致条件
1、申请（微信开放平台的管理中心):选择对应的端（移动h5，网站pc，小程序，公众号等）填写基础信息（需要公司的信息填写）要注意回调的域名，授权回调的域名
2、申请成功之后：AppIdAppSecret====> 从接口里取	

使用参数

参数	说明
appid	应用唯一标识
redirect_uri	请使用urlEncode对链接进行处理
response_type	填code
scope	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login
state	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
lang	界面语言，支持cn（中文简体）与en（英文），默认为cn

3、展示
步骤1：在页面中先引入如下JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
步骤2：在需要使用微信登录的地方实例以下JS对象：

var obj = new WxLogin({
self_redirect:true,
id:“login_container”,
appid: “”,
scope: “”,
redirect_uri: “”,
state: “”,
style: “”,
href: “”
});

参数	说明
self_redirec	true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
id	第三方页面显示二维码的容器id
appid	应用唯一标识，在微信开放平台提交应用审核通过后获得
scope	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri	重定向地址，需要进行UrlEncode
state	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
style	提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
href	自定义样式链接，第三方可根据实际需求覆盖默认样式，stylelite不为1时有效。详见文档底部FAQ。注意：
stylelite	切换二维码登录样式，值为1时二维码登录将切换到新样式。详见文档底部FAQ。
fast_login	启用或禁用快速登录功能，值为0时将禁用快速登录。

将微信登录二维码内嵌到自己页面vue项目中
1、在body里创建一个script标签let scDom = document.createElement('script')
2、script标签的src 进行赋值scDom.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
3、通过appendChild添加到body里面去document.body.appendChild(scDom)
4、实例化：onloading: 保证这个script是加载完的
scDom.onload = async () =>{let res = await getLoginParam()let { appid, scope, redirectUri, state } = res.data// 这些关键参数我们是从参数里拿的var obj = new WxLogin({id:"wxCode", appid, scope, redirect_uri: decodeURIComponent(redirectUri),state,href:"data.text/css:base64,jghhjfiajsifdhbjkdhxgsj''});}//href参数如果需要传递Base64编码的字符串,可以var base64Str = btoa("你的字符串"); // 使用btoa进行Base64编码

如果是多端扫码登陆需要定时器300毫秒去调用接口轮循，

4、用户扫码之后的行为

拒绝：啥都不做
允许：正常来说（是有cookie）但是现在做演示，我们的后端就给我们放在了重定向的url里token1、解析url2、拿到token: 在hooks里做永久化存储const displayUrlParams = () => {const urlParams = new URLSearchParams(window.location.search)console.log(urlParams)if(urlParams.size){// 1、拿到了tokenconst token = urlParams.get('token')userInfo(token)}}

方式二：手机验证码登陆

手机验证码主要注意短信防止被刷
1、点击发送短信

​要先去看有没有输入 =====> 还要去看合法不合法（判断+正则：/^1[3-9]\d{9}$/）

2、展示插件：（网上有，如图片滑块）

1、前端向服务端请求接口（拿滑块图片等内容）

1、前端参数：验证方式类型type、前端生成uuid、时间戳：
2、后端要干啥？三个参数： 把三个参数进行一个整合 uuid  加密 生成了一个secretKey
3、后端返回的内容：1、一个大图：缺口是已经存在的2、一个小滑块的图3、又返回给我们加密后的key（基于我们给它的三个参数生成的）

2、展示插件：拿到后端给我们的图渲染到页面上，然后呢，把后端给我们的secretKey（加密过后）保存起来

3、用户的行为

1、鼠标按下2、鼠标滑动只有前端css的一些交互，没有什么逻辑行为3、鼠标松开（我们前端不知道正确位置在哪？所以我们要去把位置给到后端，让后端给我们结果）3.1 前端给后端传了什么内容？传的位置： ===》 是拿secretKey(是后端第一次加密之后返回给我们的一个值） + 位置  ======> 进行再次加密的值  ====> 后端3.2 后端做事？拿到我们的这个加密之后的值：对应去解密，解密之后就会有一个位置， 解密出来的一个位置 去和数据库的正确位置 进行匹配，3.2.1 不正确就返回失败， 失败之后 也应该出现一张新的图，再重新走一遍这个流程3.2.2 正确之后 发送短信进行了多次加密；安全性就非常高。

五、防刷开发流程

1、引入插件1.1 定义变量：从接口中拿的变量1.2 调接口****参数名称、接口名称、接口地址1.3 去拿位置再次请求接口，接口返回给我们是否正确，正确就发短信、不正确的话我们再次去走一遍以上的流程
2、输入手机号、验证码 去调登录接口成功之后会有token ====> 拿token请求用户信息：hooks去做一个永久化存储，token也需要存储

方式三：账号密码登陆

登录后操作

1、拿到token
2、token存储

存cookie还是存localStorage

3、拿token去换取用户信息

3.1 永久化存储
3.2 hooks

浏览器的四种本地存储方式-cookie,localStorage,sessionStorage,IndexedDB
存储问题：localStorag

1、localStorage1.1 不管存进去的是什么内容，取出来永远都是一个字符串一般用JSON.stringify()和JSON.parse1.2 localStorage浏览器不同，大小是不同，大概是5M
========>localStorage超过最大存储量怎么办？1、压缩存储字节的大小（lz-string)1.1： 下载npm install lz-string1.2 引入import LZString  from 'lz-string'1.3 使用方法存：localStorage.setItem('B', LZString.compress(a))取：LZString.decompress(localStorage.getItem('B'))优点：节省一定的空间缺点：需要额外引入一个库2、indexedDB =====> 2.1 首先这个东西比我们localStorage 大N多倍2.2 含义：这是一个内置于浏览器中的完整文档数据库2.3 下载安装（方便我们使用封装好的库）npm install localforage// 引入import localforage from 'localforage';// 配置localforage.config({name: 'my-app', // 数据库名称storeName: 'my-store', // 存储对象的名称})// 存localforage.setItem('myKey', {a: 123}).then(() => {console.log('数据保存成功');}).catch((error) => {console.error('数据保存失败:', error);});// 取localforage.getItem('myKey').then((value) => {console.log('获取到的数据:', value);}).catch((error) => {console.error('获取数据失败:', error);});优点：存储量很大缺点：兼容性不太好，相比之下使用起来有一点繁琐		

持久化存储

1、下载安装
cnpm install pinia-plugin-persist
2、main.ts配置
import piniaPluginPersist from 'pinia-plugin-persist'
// 配置
const store = createPinia()
store.use(piniaPluginPersist)
app.use(store)
3、对应模块使用
{
........
persist: {enabled: true,strategies: [{paths: ['userInfo'], /// 要存什么内容storage: localStorage // 存在哪里}]}
}

五、hooks

1、是什么？Hooks本质上就是一组可复用函数
2、为什么要用？当多个组件都共享这个函数中的逻辑，我们就可以将这些逻辑封装hooks,然后在需要的组件中去使用它。这样做就可以避免代码重复写，提高代码的复用性。
3、怎么用？export const userInfo(){}  //user开头的名称