本文主要是介绍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登录页
同意授权
登录成功
获取用户信息、定位信息等
这篇关于H5 微信授权登录功能实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
