首页 > 编程知识 正文

微信公众号授权H5页面

时间:2023-05-04 04:04:17 阅读:270833 作者:139

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

官方:

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

项目:

使用 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 没有变更,导致又出现这种情况

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。