文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序通过web-view网页授权获取用户公众号OpenID

2023-09-08 05:57

关注

小程序中实现网页授权获取微信公众号OpenID

第一步:
通过该地址https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
获取到微信公众号测试号AppID与appsecret (测试公众号可以测试使用,个人公众号不允许使用。微信认证服务号可以使用,微信认证订阅号不可以使用)。
接口权限查看链接:
https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html
测试公众号在生成测试公众号界面中按照提示微信关注即可。非测试不仅需要关注,还需要将微信公众平台中还需要将开发人员给设置一下才可以使用web-view。

同时需要修改一下网页授权接口
在这里插入图片描述

因为是测试,就修改成本地IPv4地址加你后端的端口号即可。注意不允许127.0.0.1奥。

在这里插入图片描述
以上是我的。正式环境下需要使用到域名,测试环境可以不需要。

第二步:
还需要弄一个微信小程序的测试号。拿到其中的AppID与appsecrt。注意:小程序的跟微信公众号的AppID不是同一个。

第三步:
我这边后端使用的是WeiXin-JAVA开发包。具体可以通过链接访问
https://github.com/Wechat-Group/WxJava
也可以自己根据自己能力自行实现。

其他应用场景我不知道,根据我个人实际情况(不使用unionID情况下可以使用当前方法)

第一步: 下载微信开发工具(不然怎么测试呢对吧)

第二步: 使用微信小程序的AppId创建一个微信小程序项目,然后官方提供的简单入门Demo,你可以使用也可以不使用。很简单的程序,一下就写好了,可以不用官方的。

第三步: 编写一个按钮,通过点击按钮实现去获取微信公众号OpenID

// index.wxml<button bindtap="getGzhOpenId">获取公众号OpenIdbutton>

一个按钮一个点击事件。

点击事件中代码如下:

// index.jsgetGzhOpenId(){    wx.navigateTo({      url: '/pages/test/test',    })  }

写过小程序的都知道,这就是一个页面跳转。但是这个跳转的不是正常页面,而是一个带有web-view的界面。

// test.wxml<web-view src="{{src}}">web-view>

整个页面就两行代码,这等于是一个中转站,不需要被用户看到。src是可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。

// test.jsonLoad(){let redirect_url = 'http://测试公众号网页授权的地址/后台接口地址/appid';      this.data.src = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=测试号AppID&redirect_uri=' + escape(redirect_url) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';   this.setData({    src: this.data.src   })}

以上是重点。重新梳理一下:
小程序加载进入index.wxml -> 点击按钮跳转到test.wxml -> 来到test.wxml会执行js中的渲染方法也就是onLoad(){} 渲染中我们就可以开始获取公众号OpenID了。

redirect_url: 回调地址

this.data.src: 也就是给web-view中的src赋值一个地址,web-view会去打开这个地址。打开后就会获取到code然后回调redirect_url地址并且携带微信公众号code(该code非小程序wx.login()的code)。

地址中参数可以参考官方文档:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

需要特别注意的就是 scope 参数。他有两个值 一个是snsapi_base。另一个是 snsapi_userinfo。前者是获取openId。后者是获取OpenId以及用户信息,并且不需要关注公众号也可以获取到。WeiXin-Java-Demo中接口是获取userInfo,所以需要将scope更换一下,否则会报错。 如果只需要获取OpenId。看以下示例:

@RequestMapping({"/getOpenId"})    public String getOpenId(@PathVariable String appid, @RequestParam String code, ModelMap map) {        if (!this.wxService.switchover(appid)) {            throw new IllegalArgumentException(String.format("未找到对应appid=[%s]的配置,请核实!", appid));        } else {            try {                WxOAuth2AccessToken accessToken = this.wxService.getOAuth2Service().getAccessToken(code);                map.addAttribute("openId",accessToken.getOpenId());            } catch (WxErrorException var6) {                var6.printStackTrace();            }            return "xxx";           }    }

其实就是weixin工具包封装了其方法,Demo中没有使用而已,copy接口,粘贴修改一下即可。

到此就拿到了OpenId了,可以Debug调试,但是奇怪,我的小程序为啥还是白屏中啊。哈哈哈因为web-view界面就我得理解就是html中的ifrname嵌入式页面。

接下来也是重点
看后台接口上图,返回的是xxx。xxx代表一个页面,也就是xxx.html界面。我们需要通过springmvc将视图返回给小程序,小程序的web-view打开的就是你在后台写的界面。
那么 xxx.html中写什么呢? 继续往下看

xxx.html在小程序中被打开,然后你要展示东西吗?No!No!No! 不需要,不过如果你刚需我就不说啥了。

// xxx.htmlDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>    <TITLE> New Document TITLE>    <META NAME="Generator" CONTENT="EditPlus">    <META NAME="Author" CONTENT="">    <META NAME="Keywords" CONTENT="">    <META NAME="Description" CONTENT="">    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js">script>HEAD><BODY>BODY><SCRIPT LANGUAGE="JavaScript">    function back()    {        wx.miniProgram.redirectTo({url: "/pages/index/index?mpOpenid=${openId}"})        //wx.miniProgram.postMessage({data:"${openId}"})    }    back();SCRIPT>HTML>

将xxx.html返回给小程序后加载该视图,视图执行back()方法。使用小程序中redirectTo返回到你想去的界面。该界面必须小程序中存在哦!然后一定一定要引入jweixin。否则无法在网页中使用小程序的方法。返回呢可以将微信公众号的openId带在url上返回到小程序的index界面。

onLoad(e){console.log(e);}

就可以获取到OpenID了,通过以上方式拿到后就可以与wx.login获取到的小程序OpenID进行对应起来。

以上方法呢还可以拓展很多种情况。例如小程序首次加载先看10s的注意公告。也可以在打开web-view页面携带上小程序OpenId,一口气在后端拿到公众号OpenID后持久化存储。就不需要再返回了。

本人第一次编写CSDN,也是第一次使用markdown写,写得少,也没美化的眼光。重点还是解决了一个工作中的问题。以此作为记录,以防下次面试官问我项目中碰到的问题(解决了那还叫碰到的问题吗?)。同时该文章也希望大家遇到困难能够用得上,不懂可以在评论区中交流或者私信。因为第一次,所以也是自己查百度然后慢慢摸索折腾明白的。也看了其他类似的文章。从他们文章中找到的灵感并且,我也附带在下面,可以同时看,这样就会更快速的明白。

https://blog.csdn.net/qq_41929578/article/details/121748935
https://blog.csdn.net/daengwei/article/details/124535274
https://blog.csdn.net/qq_21492635/article/details/119491131

来源地址:https://blog.csdn.net/weixin_43819028/article/details/129534126

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯