小程序及H5如何获取公众号code?

        之前碰到一个需求,公众号的菜单跳进小程序,前端需要获取到公众号的code传给后端来确认用户的openId,但是咱们前端如何通过小程序或者H5,来获取公众号的code呢?

        通过查阅资料,我来总结一下此次遇到的问题及解决方案:

        1.公众号菜单跳转H5页面

        这个比较简单,直接配一下地址就可以 。

        https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxffc8496b065b1490&redirect_uri=https://xxxx.cn/officialTest&response_type=code&scope=snsapi_base&state=......#wechat_redirect

        这个地址 https://open.weixin.qq.com/connect/oauth2/authorize 是跳转微信网页获取code的地址,后面拼接的参数appid是公众号的appid;

        redirect_uri是回调地址,这个回调地址需要在公众号上配置一下域名,即网页授权域名,否则会报回地址错误;

        response_type=code,重定向后在回调地址后面会拼接上我们需要的code参数;

        scope=snsapi_base,这是微信静默授权的标识,有两个参数,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid)snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息;

        state是重定向之后带的参数,也是带在回调嫡长子后面的。

菜单直接填写上面的地址,会将code拼接到到https://xsyapp.csuat.cmburl.cn/officialTest的后面,即重定向为https://xsyapp.csuat.cmburl.cn/officialTest?code=....&state=....这种形式;

        2.公众号菜单跳转微信小程序页面

        微信小程序使用组件webview,嵌入H5页面,和上面一样的道理,url是微信地址拼接回调地址,在回调地址里面获取code

        

         生产环境和测试环境的公众号appid是不一样的,在测试环境也是可以测试跳转的;注意回调地址一定要在公众号上配过域名哦~

         在H5页面将获取到的code,传回微信小程序,页面跳转基本可以 做到无感;

         如果是以/结尾的地址,直接用this.$route.query就可以获取,如果是用#结尾的地址,可以用下面的方式来获取code,我尝试过返回的地址是  "https://xxx.cn/?code=....&state=.....#/officialTest"

         在微信小程序里面onload生命周期中,通过options可以拿到我们需要的参数。

### 如何在微信小程序获取关联的微信公众号 OpenID 为了实现在微信小程序获取与之关联的微信公众号 OpenID 的功能,开发者通常会采用间接的方式完成这一过程。具体来说,在用户同意授权的情况下,可以通过以下方式实现: #### 方案概述 1. **通过 Web-View 组件** 小程序内嵌入 `web-view` 组件加载网页链接至特定页面,该页面用于引导用户登录并授权给第三方应用(即公众号)。当用户成功授权后,服务器端能够接收到包含有公众号 OpenID 的回调请求。 2. **后台 API 处理** 在 `redirect_uri` 后端 API 服务中处理来自微信服务器的通知消息,从中解析出用户的公众号 OpenID 并返回给前端展示或存储起来以便后续业务逻辑使用[^3]。 #### 技术细节 ##### 步骤 A: 准备工作 确保已经完成了必要的开发环境搭建以及配置了合法有效的 App ID 和 Secret Key 等信息。同时还需要设置好 OAuth 授权回调域名等相关参数[^4]。 ##### 步骤 B: 获取 Code 参数 利用小程序内置方法 `wx.login()` 获得临时登陆凭证 code ,之后将其传递给自定义的服务端接口换取 session_key 及 unionid (如果存在的话),注意这里并不直接涉及公众号 OpenID 的获取[^5]。 ```javascript // JavaScript 示例代码片段 wx.login({ success(res) { if (res.code) { // 发送 res.code 到自有服务器交换 openid 或者其他数据 wx.request({ url: 'https://example.com/api/getOpenId', data: { js_code: res.code }, method: 'POST' }) } else { console.log('登录失败!' + res.errMsg); } } }); ``` ##### 步骤 C: 用户身份验证 接下来需要设计一个 H5 页面作为中间桥梁,用来接收从小程序跳转过来带有 code 参数的 URL 请求,并在此基础上继续执行下一步的身份认证流程——重定向到微信提供的 Oauth2 登录地址以获得最终所需的公众号 OpenID。 ```html <!-- HTML 示例代码片段 --> <a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http%3A%2F%2FREDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect">点击进入</a> ``` ##### 步骤 D: 解析 Callback 数据 最后一步是在指定的 callback 地址上部署相应的处理器函数来捕获由微信平台回传的数据包,其中包含了至关重要的 access_token 字段以及其他附加属性如 expires_in、refresh_token 等;进一步地还可以调用微信提供的 `/sns/userinfo` 接口查询得到完整的用户资料,其中包括所期望获取的目标字段——公众号 OpenID[^1]。 ```php <?php // PHP 示例代码片段 $access_token_url = "https://api.weixin.qq.com/sns/oauth2/access_token"; $params = array( 'appid'=>'YOUR_APP_ID', 'secret'=>'YOUR_SECRET_KEY', 'code'=>$_GET['code'], 'grant_type'=>'authorization_code' ); $response = file_get_contents($access_token_url.'?'.http_build_query($params)); $data = json_decode($response,true); echo $data['openid']; // 输出公众号 OpenID ?> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值