前言
登录模块在日常项目开发是必不可少的。刚好最近有处理这块的业务需求,于是打算简单记录下来。本文在这里不做过多关于登录鉴权的相关描述,只简单叙述各类型登录过程的基本业务流程。如果这里想要了解鉴权问题的话,可以浏览我的 前端鉴权知识 这篇文章,虽然可能描述的并不是很到位,但相信阅读完还是会有一定的收获的!废话不多说,开整!
目录
账号密码登录
基本流程
- 输入账号、密码向后端发送登录请求
- 后端依据账号和密码判断用户是否存在
- 存在,验证密码是否正确,然后返回对应的信息
- 不存在,给出对应的类型提示。如:前往注册页面进行新用户注册
- 登录过程是否需要输入图形验证码【取决于项目采用的登录验证方式】
- 账号密码登录接口报错时,调用后端接口判断登录是否需要验证码信息【接口参数为帐号值】
- 通过接口返回值判断是否需要验证码信息并以此来控制验证码表单项的显隐
快捷登录
手机验证码
、邮箱验证码
等登录方式
快捷登录方式:若用户没有注册则默认进行注册操作,如果已经注册过的话则是进行登录操作【逻辑判断及操作在后端处理】
基本流程
- 输入手机号后,点击获取验证码按钮,调用后端接口
- 后端生成随机数,并将手机号及短信模版【包含随机数】发送给第三方短信平台【阿里云、腾讯云等等】
- 后端在第三方短信发送成功回调函数中将手机号和随机数存储到数据库中
- 用户收到短信验证码后,输入验证码信息,点击登录按钮请求后端登录接口
- 后端拿到手机号和验证码后与数据库中的信息进行对比验证,返回对应信息
扫码登录
基本流程
待扫码阶段
PC
端向服务器端发起请求,获取二维码ID
PC
端依据返回的ID
生成二维码 qrcode ; 然后轮询二维码是否失效
待确认阶段
- 移动端扫描二维码,获取二维码
ID
等信息,向服务器端发起请求,获取移动端确认授权时所需的临时token
信息 - 服务器端将移动端提供的二维码
ID
与登录态的token
请求参数关联【移动端退出登录,PC
端登录也会失效】 ,返回确认授权时所需的临时token
- 此时
PC
端轮询二维码时状态改变,更新为已扫描、待确认状态
已确认阶段
- 移动端携带临时
token
发送确认登陆请求 - 服务端校对完成后,更新二维码状态,并返回一个正式的
token
给到PC
端 PC
端的定时器,轮询到了二维码状态为登录状态,并且会获取到了生成的token
,完成登录,后续访问都基于token
完成
三方登录
小程序(一键授权登录)
这里以 微信 小程序一键授权登录为例,其他小程序可以依据官方文档类似操作即可
流程图
基本流程
-
微信用户信息授权 wx.getUserProfile,获取微信用户相关信息【视具体业务需求而定】
-
微信登录 wx.login ,获取登录凭证
code
-
调用后端依据 auth.code2Session 封装好的登录接口,获取登录态
token
等相关信息 -
依据登录接口返回信息视情况进行下列操作【视具体业务需求而定,是否关联
APP
账号信息】
登陆成功操作
- 绑定用户信息(头像、昵称)【视具体业务需求而定】
- 跳转指定页面【用户中心、首页等】
登陆失败操作
- 依据登录错误信息看是否需要绑定
APP
账号【视具体业务需求而定】- 是,进行
APP
账号绑定- 跳转 微信手机号授权 页面进行手机号授权操作
- 授权,发送绑定
APP
账号请求【接口判断APP
账号是否已绑定其他微信账号】- 绑定,前往
APP
端进行解绑后再进行操作 - 未绑定,后端进行账号绑定操作
- 绑定,前往
- 不授权,前往账号绑定页面进行账号绑定【接口判断
APP
账号是否已绑定其他微信账号】
- 授权,发送绑定
- 跳转 微信手机号授权 页面进行手机号授权操作
- 否,提示错误信息
- 是,进行
APP
说明:虽然日常使用过 RN
,但对于一些原生的一些东西还并没有过多的去了解。这块的话日常也是直接内部封装好的三方库进行业务处理。库的基本方法:isInstall
是否安装对应的第三应用、login
登录方法获取后端登录接口所需的 code
参数
基本流程:
- 通过
isInstall
判断系统是否安装相应的三方应用【微信、支付宝等等】,未安装看是否跳转应用商店进行安装处理 - 通过
login
登录获取code
,将code
作为后端三方登录接口参数并调用改登录接口,返回成功后调用获取用户信息接口并存储信息,之后进行登录成功后的页面跳转
H5
微信官方文档:代公众号发起网页授权
请求 URL
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE&component_appid=component_appid#wechat_redirect
所需参数
APPID:公众号的 appid
REDIRECT_URI:重定向地址链接
SCOPE:授权作用域【snsapi_base
、 snsapi_userinfo
】
用户允许授权后,将会重定向到 redirect_uri
的网址上,并且带上 code
, state
以及 appid
redirect_uri?code=CODE&state=STATE&appid=APPID
若用户禁止授权,则重定向后不会带上 code
参数,仅会带上 state
参数
redirect_uri?state=STATE
授权成功后将 code
作为参数,调用后端依据 auth.code2Session 封装好的登录接口,获取登录态 token
等相关信息,然后依据接口返回值进行后面的相应操作