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 微信授权登录功能实现相关推荐
- uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录 文章目录 uniapp开发h5微信授权登录 前言 一.前期准备--申请测试账号 二.正式开发--前端代码 三.打包发布 总结 前言 我也是第一次做h5授权微信登录,网 ...
- H5微信授权登录后点击返回出现循环登录无法退出问题
简单介绍h5微信授权流程 1.入口页跳转到我们自己创建的空白授权页 2.在空白授权页判断url上是否包含code,没有code拼接微信授权链接,通过location.href进行跳转 location ...
- pc、h5微信授权登录
pc登录 微信登录(通过后端返回一个qrcode重定向到页面上,进行扫码授权,获取code即可,再根据code获取登录信息) h5登录 微信授权登录:(支持微信浏览器,其它浏览器无法拉起微信的授权): ...
- 【微信授权登录】uniapp开发小程序，实现获取微信授权登录功能
一.解题思路: 微信授权登录(获取用户信息) 1.先获取用户信息--用户授权允许后,通过调用uni.login 可以获取到code. 2.拿着获取到的code去调用--登录接口,可以获取到token. ...
- 微信授权登录功能(第三方网站登录)
写这篇博客的目的呢,一个是在于记录自己的开发过程,另一个目的就是将自己踩到的坑贴出来,供大家借鉴. 由于公司近期在做一个项目,在网页中使用微信扫码登录的功能,就开始了研究尝试,直到功能实现,从一脸懵逼 ...
- H5微信授权登录弹窗提示
如下图:用户授权登录前,先通过静默授权,拿到token,展示部分信息,用户通过授权后拿到头像昵称,该弹窗让用户有个比较好的体验 请求过程如下: 1.首次在没有UID.code的情况下:静默授权(&am ...
- uni-app - 最详细 H5 网页接入微信登录功能，提供公众号配置与详细注释示例代码（移动端网页实现点击登录按钮后 调用微信公众号授权登录功能 详细讲解接入流程与详细示例代码）官方最新超级详细教程
前言 关于 uni-app 项目中接入微信授权登录的文章鱼龙混杂,各种乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现微信授权登录功能,详细讲解接 ...
- uniapp - 超详细的 H5 公众号网页微信登录示例代码，提供从 0-1 公众号配置及详细注释代码（站在新手小白的角度）第三方微信授权登录的实现！！
介绍 目前示例是 "点击按钮登录",你也可以改为 "一进页面就登录" ,可随意改造. 百度的教程都太乱了,而且功能都有一定问题.本文主要讲解 uniapp H5 ...
- ios微信登录不上服务器,iOS微信授权登录
首先需要确保你的App应用在微信开发平台上注册创建并获得对应的接口,对应登录.支付等功能还涉及付费,具体申请流程就不再这里说了.到开放平台->管理中心->移动应用->查看应用,确认你 ...
最新文章
- HPE谢少毅：更敏捷的企业服务，做有生命力的落地实践
- 事务配置_SSH（五）- 使用注解方式配置事务管理
- 一本通1655数三角形
- 【Android 逆向】Android 逆向通用工具开发 ( adb forward 网络端口重定向命令 | PC 端逆向程序主函数分析 )
- button 和input 的区别及在表单form中的用法
- 非vue子页面 调用vue父页面方法
- “稳拿高薪”三个专业？实际市场竞争压力大，就业困难！
- 用了这么多年的 Java 泛型，你对它到底有多了解？
- Java-泛型-ArrayList
- chrome浏览器导出书签 如何导入收藏夹
- mysql config type_mysql_config_editor用法举例
- 设计模式—原型模式及其扩展（思维导图）
- DMA映射 dma_addr_t
- Java中的 BigDecimal，80%的人都用错了....
- API不治，混合云何以统天下？
- php phdfs扩展,hadoop HDFS的PHP扩展—PHDFS
- Python GUI案例之看图猜成语开发（第一篇）
- 状态压缩DP 图文详解（一）
- 在线抽奖、限时秒杀、拼团抢购，别的商城有的功能你也可以轻松拥有！
- 电脑下载工具哪个软件好 电脑下载工具去哪下载