微信H5页面授权

过去一年项目主要以b端的为主，今年年初公司接了一个c端项目，基于工作号做微信H5开发，需要用到微信的授权登陆，拉取用户信息，扫一扫，支付等功能，记录一下。

授权登陆

微信的授权登陆：

首先你需要甲方拿资料去申请一个公众号，然后给与你开发权限。
然后要在白名单中配置好域名，注意不要带有https://，(开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息-配置好回调域名),
设计好公众号菜单，将获取微信授权code的链接放置在按钮上。这样用户点击的时候，直接相当于去找微信获取了code，微信这边会将code和state参数拼接到你的回调地址上，并跳转至你回调地址（一般就是项目首页）
我的项目里面，分为pc的b端，基于公众号的b端，和基于公众号的c端3个部分，公众号的b端仅需要openId，所以静默授权即可，c端则需要获取用户信息，所以这里scope选择上做了区分。
从回调地址中把code取到，然后发给后端，由后端拿code去获取登陆的access_token和openId；
如果需要刷新，就拿上一步获取到的refresh_token去请求即可；
如果是需要拉去用户信息，则更改为获取userInfo的接口，拿access_token和openId去获取即可；
openId，用户对于单个公众号的openId是唯一的，这点需要注意。
如果关联同一个公众号拥有者下面的小程序小游戏，好像就是使用unionId了，这里项目中没有涉及相关业务，只是自己好奇所以查看了一下相关的文档，不在这里记录了。

业务相关和注意事项

首先b端是每个用户还有一个基于我们后台系统的账号，所以既要获取用户微信账号相关的信息又要关联上系统的账号，这里openId就很有必要了，基于他的唯一性，可以把用户的微信账号和系统账号关联起来。
我们后端也是第一次开发与微信相关的功能，所以他犯了一个错误就是在获取access_token的时候调用的接口是jscode2session这个接口，但实际上这个是小程序获取openid时候使用的接口，而不是公众号专用的。
还有个基础的access_token必须要获取到，官方文档中也有写到用code去获取用户信息所使用的access_token与这个基础的access_token并不一样，但是基础token也很重要，很多其他的功能都是需要它来作为凭证来实现的，所以也要获取并且存起来，还要注意基础token只有2个小时的有效期。
在回调地址中获取code，只需要在mounted阶段用一个变量接收一下location.search就可以拿到包括?以后所有的参数信息的字符串，再做一下切割就可以了。然后拿code去发给后端直接获取openId,因为用户还要在登陆页登陆我们后台系统，此时添加一个加载中的遮罩层，防止网络不好的情况下用户在后端没有返回openId的情况下去点击登陆按钮。
文档中说明token不要由前端去获取，应该交由后端去获取，这样安全。
毕竟每个功能每个人都有第一次开发的时候，而且不是人人都有前辈手把手来带你，所以学会自己看官方的文档是很重要的。
微信H5开发文档.

下一篇在说一说JSSDK的使用，以及在H5中调起微信扫一扫功能。

记一次基于公众号的微信H5开发项目（一）相关推荐

微信公众号：微信H5页面JSAPI充值
微信公众号:微信H5页面JSAPI充值,遇到的一些坑,以及解决方式. 首先说一下微信充值分为很多种:目前我所涉及到的只是APP支付.H5支付.JSAPI支付. 区别: 1.根据不同场景 APP支付:是 ...
php h5微信支付和app微信支付区别,关于微信公众号支付微信H5支付和微信APP支付的问题（PHP）TP+VUE...
话不多说直接上源码在写支付之前一定要确定好微信要求配置的相关回调域名安全支付域名还有杂七杂八的哪些地址都准备好了要不然是没法实现的微信公众平台微信商户平台还有开发者平台什么的这点比较 ...
h5 小程序公众号接入微信支付开发
首先支付都需要确认你的项目的公众号(小程序)是不是商家,去微信公总平台官网(https://mp.weixin.qq.com/)确认(登录公众平台,点击导航栏中的微信支付,然后点击开通按钮,按照里面的 ...
Shopro商城,基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城
Shopro商城基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
淘宝客CMS，微信公众号，微信淘客机器人
淘宝客CMS,微信公众号,微信淘客机器人一站式淘客导购解决方案先来写个序楼主程序员,两耳不闻窗外事,一心只知敲代码,2019年前没接触过淘客,也不懂淘客是什么? 后来有个朋友给我提到,说他在做淘客 ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
微信公众号和微信小程序的区别
微信公众平台于2012年08月23日正式上线,微信小程序发布时间2017年1月9日,公众号和小程序都非常火爆,今天小编就给大家讲讲小程序和公众号异同. 微信小程序和公众号的区别到底是什么? 1.定位不 ...
微信升级会员卡功能: 连通公众号、微信支付
5月17日消息今日,微信宣布升级微信会员卡功能,实现会员卡.公众号和微信支付的三方打通. 据介绍会员卡.公众号.微信支付三大功能模块的连通,用户与商家会员卡和公众号的绑定,可以帮助商家进行会员和公众 ...
JAVA版开源微信管家—JeeWx捷微3.1小程序版本发布，支持微信公众号，微信企业号，支付窗
支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1--多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.1.0版本紧跟微信小程序更新,在原有 ...
JeeWx捷微3.0多触点版本发布，支持微信公众号，微信企业号，支付窗——喜迎双“旦”
喜迎双旦,JeeWx捷微3.0多触点版本发布^_^ JeeWx捷微V3.0--多触点版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.0.0版本是一个颠覆和跨时代版本,官方团队历 ...

记一次基于公众号的微信H5开发项目（一）

记一次基于公众号的微信H5开发项目（一）

微信H5页面授权

授权登陆

业务相关和注意事项

记一次基于公众号的微信H5开发项目（一）相关推荐

最新文章

热门文章