微信公众号授权H5页面

一、为何通过微信公众号授权

官方:

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，
来获取用户基本信息，进而实现业务逻辑。

项目：

使用 uniapp 开发的 H5 项目，需要通过公众号授权后，才能获取用户信息。
PS： 如果用 uniapp 开发小程序，可以走小程序的授权，这次用的 H5

二、授权大致步骤

1、网页授权回调域名

 在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的
“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，
修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，
因此请勿加 http:// 等协议头；

2、授权回调页面域名
详细可看微信公众平台授权流程分析

1 和 2 都是在微信公众号需要做的配置

3、具体项目怎么使用，废话不多话，直接上代码

wechatAppId： 公众号的 appid，即唯一标识
state：重定向后会带上 state 参数，可以不带 state 参数
redictPath: 授权后重定向的回调链接地址

const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatAppId}&redirect_uri=${redictPath}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`

最后 把 authUrl 赋值给 window.location.href，就可以自动跳转到重定向的链接地址
地址里面就有 code 这个参数，获取 code 值后，把 code 传给后台
后台返回 openId 作为前后台联调的重要参数

三、遇见的问题

后台配置不一致

1、需要在微信公众号上配置：

2、如果这个也配置了，还是有异常，有可能是前端路径带有 # 造成的。
redirect_uri里面带有#也会造成这个原因
需要encodeURI:

const messageBoardUrl = isDev ? testFrontUrl + '/#/pages/messageBoard/Index' : prodFrontUrl + '/#/pages/messageBoard/Index'
const redictPath = encodeURIComponent(messageBoardUrl)

3、最后一次出现这种情况

刚开始用的是公司的公众号，后来换成客户的公众号了，appId 没有变更，导致又出现这种情况

微信公众号授权H5页面相关推荐

微信公众号进入H5页面之后，点击返回键一直报404
微信公众号进入H5页面之后,点击返回键一直报404,遇到这个问题很郁闷呀! 注意:注意: 这是我自己的系统出的问题! 第一:因为这个问题不是所有手机上面都出现第二:这个问题不是一个手机在出问题第三 ...
微信公众号开发+H5页面语音录入+下载+amr转换为MP3+讯飞语音转文字
其实作为H5想要做语音识别,自认为还说有各种弊端得,同时还是微信公众号里面,如果小程序得话,或许会简单一点,但是这里是在公众号里面开发,在这个过程中查阅个各种资料,其实里面得东西都大同小异,但是大多数 ...
关于微信公众号的h5页面跳转微信小程序的详细介绍
简介关于微信公众号跳转小程序的功能,我也是研究了一整天才弄好的,主要是微信官方文档写的不清楚,百度上的各种文章也各说各的,不过最后还是要相信官网文档,接下来我会一步一步分析,希望对你有帮助,并且最后 ...
微信公众号中h5页面扫一扫实现
开发文档参考链接:https://mp.weixin.qq.com/wiki?t = resources / status_main&id = mp1421141115 1 配置本地nginx ...
php微信公众号调用扫一扫,微信公众号中h5页面扫一扫实现
开发文档参考链接:https://mp.weixin.qq.com/wiki?t=resources / status_main&id=mp1421141115 1 配置本地nginx ser ...
uniapp实现微信公众号内h5页面自定义标题内容和图片
和上次一样填坑,这次是使用uniapp做的项目,下载微信的 js-sdk(1.6.0版本) cnpm install jweixin-module -S wechatShare.js var wx = ...
使用uniapp开发微信公众号（H5页面），用微信开发者工具调试微信公众号
1.先引入入口.html文件参见官网https://uniapp.dcloud.io/collocation/manifest?id=h5-template 2.配置manifest.json 3. ...
微信公众号HTML,H5页面莫名其妙，无故多出广告来，解决办法
专冶各种H5的嵌入垃圾广告! 公司的H5页面挨嵌入各种各样的广告,有时有,有时没有,这个很烦人,问过许多大咖,有几种说法和几种解决方法 DNS劫持 . HTML5页面被电信运营商进行DNS劫持植入广告 ...
微信公众号关闭H5页面，回到公众号首页
document.addEventListener('WeixinJSBridgeReady', function () { WeixinJSBridge.call('closeWindow'); } ...
uniapp中h5网页微信公众号授权
uniapp微信网页授权 uniapp中h5网页微信公众号授权主要代码获取code返回的code截取代码 uniapp中h5网页微信公众号授权微信官方文档–>网页授权 uniapp中h5网 ...

微信公众号授权H5页面

一、为何通过微信公众号授权

二、授权大致步骤

三、遇见的问题

微信公众号授权H5页面相关推荐

最新文章

热门文章