微信H5端网页授权流程（在H5中的openid获取，网页绑定微信）

说明：微信网页授权有两种
1、单独获取openid，属于静默获取，用于绑定微信（scope为snsapi_base）

2、获取用户的基本信息，需要用户点击同意（scope为snsapi_userinfo）

这篇博客说的是scope为snsapi_base这种方式，用于获取每一个微信用户都只有一个的openid，作用是让用户使用微信绑定当前网页，获取微信的H5支付的必要参数之一。网页绑定就是前端获取到openid后把它给后端让后端拿着这个openid和账号关联到一起，就算绑定成功了；

成功获取openid的条件：
①、客户拥有自己的公众号
②、客户的公众号已经进行了微信认证
注意：公众号分为服务号和订阅号，正常而言，和交互有关的都要认证服务号（微信网页授权、微信支付），仅发布信息给用户使用订阅号，这个需要根据业务需要自查；

获取流程：

1、先准备一个结果页面，即为，告知用户当前是否获取到openid结果的页面（就是一个白页面，上面一行字，‘您已成功绑定微信’或‘微信绑定失败，请重新绑定’）；

2、前端引导用户在微信浏览器点击或打开
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=你的结果页面&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
这个网址，这个网址会自动回到redirect_uri里的路径并跟一个参数为code=XXX，这个路径就可以使用刚才的绑定结果页面，这样用户点击了此链接就会直接跳转到绑定结果页面；

注意：这里不是直接打开上面那个链接，需要改变参数的，具体如何传参请参考官方文档，这里不过多赘述

网页授权 | 微信开放文档

3、在结果页面进行code获取并传给后端，这一步如果使用uniapp开发，在页面的onLoad函数中无法使用事件对象获取，需要使用window.location.href配合split来获取code，如果没有code就让用户重新绑定；

4、将code传给后端，他会通过一个请求获取到openid，然后接口返回数据告诉前端是否获取，获取到就算网页绑定微信成功，前端给与用户对应反馈即可；

关于只能在微信浏览器打开上面的链接的解决方法：
判断是否为微信浏览器，如果为微信浏览器，弹出提示框，用户确认一下绑定防止误触（这一步为用户体验优化），确认绑定直接请求链接，然后到结果页面进行上述流程；

如果不是微信微信浏览器：

移动端

通过将链接转化为二维码的方式，让用户扫码；

或把链接渲染到页面上，让用户点击复制后到微信中打开；

PC端
将链接转化为二维码，引导用户打开微信扫码进入链接跳转结果页面进行绑定；
（用户体验优化）：如果在二维码被渲染之后就开始请求是否微信绑定的查询接口，如果绑定了就反馈用户然后跳转首页

有更多建议想法欢迎私信交流，bye~

微信H5端网页授权流程（在H5中的openid获取，网页绑定微信）相关推荐

微信登录，网页授权流程
微信登录网页授权流程 1.流程以下流程为微信官方提供的请求流程,现实中可使用第三方sdk: https://github.com/Wechat-Group/WxJava/wiki/MP_OAuth2 ...
美团饿了么外卖CPS联盟小程序（新增H5端）花小猪，滴滴大车，一键获取Path
美团饿了么外卖CPS联盟小程序(新增H5端)花小猪,滴滴大车,一键获取Path 美团/饿了么外卖CPS联盟返利公众号小程序裂变核心源码源代码地址 https://gitee.com/waimai-c ...
更新一波，微信第三方开发平台授权流程
最近一直忙于微信三方开发平台开发,更新一下,做个记录,微信第三方开发平台授权流程示例: 先看授权流程要拿到的结果: 照例先给出微信授权流程官网页面:https://open.weixin.qq.com ...
微信公共号系列---快速整合微信多端页面授权之单点登录
本人从事互联网项目java开发五年,会java,微信公共号开发,python,nodejs,爬虫等技术,对发票项目很熟悉,如果想交一个朋友请加QQ技术交流群@群主吧:131831533 .本文章来源于 ...
微信会员注册开发【带源码】：网页授权,得到code后在当前页面获取openid,js+php实现跨域请求
开发情景: 作者主页:天际app工作室 http://home.zhubajie.com/7145093/ 需要引导微信公众平台用户点击链接进入注册页面,在注册页面需要获取用户微信的openid.技术 ...
微信第三方平台之授权流程(三)
注:这篇文章基础是小程序已创建成功(不懂得看我前面的文章) 授权流程技术说明小程序或者公众号授权给第三方平台的技术实现流程比较简单,如下图所示: 第三方服务商构建授权链接放置自己的网站,用户点击后, ...
python 收发微信之二：获取微信上行信息（利用 flask 框架实现 Web API，获取 WxPusher 上行微信）
目录〇.摘要一.前言二.实操 1. 找一台可以给互联网提供服务的计算机 2. 实现一个 flask 最小服务并在互联网上访问到 3. 根据 WxPusher 上行信息接口实现 POST 命令的 ...
微信公众号H5开发登录授权流程
很久没写博客了,最近实在是太忙,有太多东西想写想记录.今天写个关于微信登录的过程吧,这次项目是我第一次写关于微信的东西,这个登录授权搞了半天.但总算是把流程搞明白了,先附上微信官方文档微信公众平台 ...
微信公众号开发——实现用户微信网页授权流程

微信H5端网页授权流程（在H5中的openid获取，网页绑定微信）

微信H5端网页授权流程（在H5中的openid获取，网页绑定微信）相关推荐

最新文章

热门文章