H5 微信授权登录功能实现

背景

最近几周面试复习以前知识库，刚好博客从国外迁移到国内CSND，同步坐下笔记，梳理之前开发H5 微信授权登录功能获取用户信息数据。

H5页面微信授权登录，使用微信官方JSSDK，微信网页授权较为复杂，需要前后端开发。

上一篇《微信小程序 授权登录功能实现》

 

 

技术栈

 

• 前端：微信小程序
• 后端：Nodejs
• IDE：微信开发者工具
• 开放平台：微信开发者平台

 
微信授权类型

原生APP微信授权、H5微信授权（JSSDK）、微信小程序、PC web 微信授权

 
采坑

• access_token有两个：一个是公众号维度access_token（权限最大），另一个是用户自有access_token
• 重定向地址：用于微信官方接口返回code，需要页面接收这个code参数。（页面声明周期中）
• url微信公众号白名单、安全配置

 

 

思路：

客户端：用户主动触发，请求微信授权接口（带上appid+redirect_url）

微信官方：返回code，传参返回给redirect_url

客户端：重定向页面接收参数code，请求后端getCode接口（带上code）

服务端：判断当前access_token是否存在、是否过期，不存存在、已过期则调用getOpenId请求微信官方接口（带上code+appId+appScret），获取用户OpenId

服务端：请求获取access_token（带上OpenId），并存储

服务端：请求获取userInfo（带上access_token+OpenId），返回用户信息给前端

客户端：登录成功、个人中心展示用户信息、LocalStorage存储用户信息

 

 

流程图

 

效果

H5登录页

同意授权

登录成功

获取用户信息、定位信息等