登录基本业务流程

2023-03-21 12:06| 来源: 网络整理| 查看: 265

前言

登录模块在日常项目开发是必不可少的。刚好最近有处理这块的业务需求，于是打算简单记录下来。本文在这里不做过多关于登录鉴权的相关描述，只简单叙述各类型登录过程的基本业务流程。如果这里想要了解鉴权问题的话，可以浏览我的前端鉴权知识这篇文章，虽然可能描述的并不是很到位，但相信阅读完还是会有一定的收获的！废话不多说，开整！

目录账号密码登录快捷登录扫码登录三方登录小程序（一键授权登录） APP H5

账号密码登录基本流程输入账号、密码向后端发送登录请求后端依据账号和密码判断用户是否存在存在，验证密码是否正确，然后返回对应的信息不存在，给出对应的类型提示。如：前往注册页面进行新用户注册登录过程是否需要输入图形验证码【取决于项目采用的登录验证方式】账号密码登录接口报错时，调用后端接口判断登录是否需要验证码信息【接口参数为帐号值】通过接口返回值判断是否需要验证码信息并以此来控制验证码表单项的显隐

快捷登录

手机验证码、邮箱验证码等登录方式

快捷登录方式：若用户没有注册则默认进行注册操作，如果已经注册过的话则是进行登录操作【逻辑判断及操作在后端处理】

基本流程输入手机号后，点击获取验证码按钮，调用后端接口后端生成随机数，并将手机号及短信模版【包含随机数】发送给第三方短信平台【阿里云、腾讯云等等】后端在第三方短信发送成功回调函数中将手机号和随机数存储到数据库中用户收到短信验证码后，输入验证码信息，点击登录按钮请求后端登录接口后端拿到手机号和验证码后与数据库中的信息进行对比验证，返回对应信息

扫码登录基本流程

待扫码阶段 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 作为后端三方登录接口参数并调用改登录接口，返回成功后调用获取用户信息接口并存储信息，之后进行登录成功后的页面跳转

微信官方文档：代公众号发起网页授权

请求 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 等相关信息，然后依据接口返回值进行后面的相应操作

参考

登录业务几种方式的完整流程微信小程序登录聊一聊二维码扫描登录原理

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章