微信公众号-如何快速支持APP上的活动开发

公司最近搞了一个APP要发布,原来有一个同名的微信公众号(服务号)由我一个人开发,APP采用Hybrid的方式开发,现在APP上增加了许多功能,需要在微信上添加相应的功能模块,那么怎么把已经做好的功能内嵌进来呢?

为了方便说明,就举例这次APP上的一个投票功能,它希望用户在分享到朋友圈之后,直接点击这个链接可以进入到投票页面,并且获取用户是否在公众号绑定了账号(高校的学工账号),如果绑定了账号,那么直接可以进行投票,否则则只能查看投票结果没有投票权限。

实现有这么几种方式

1.独立开发Web网站,这种模式下其实跟微信公众号本身已经没有太大关系,用户在微信上点击实际上是跳转到指定的网址中。

2.采用微信授权认证,然后在微信后台服务器中增加一个相应的controller处理,这是我目前采用的方式。

具体方式就是 用户访问微信公众号上的地址实际上为一个发起oauth授权的地址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=[微信公众号申请后获得的appid]&redirect_uri=[回调地址(此处我们回调地址往往是微信后台服务器的地址)]&response_type=code&scope=snsapi_base&connect_redirect=1#wechat_redirect

后面的参数说明可以见腾讯https://mp.weixin.qq.com/wiki里面的微信网页开发-微信网页授权

用户进入到这个地址之后,后台即可获取到用户的openid 因为我们做的是高校服务号,所以我们每个用户都需要提前在微信上绑定自己的学校账号,绑定的依据实际上就是将它在学校的学号与它的openid关联,因此在获取到OPENID以后,我们就可以知道了这个用户在学校的基本信息,同时在后台发起请求到APP服务器上获取相应的资源(投票权限 token或是直接返回可以投票的URL)。

关于绑定:

几乎每个高校都会有自己的一套信息化系统,每个人入学后都会有相应的学号,将学号与openid绑定就可以在微信上记住每个用户的信息,以后可以在微信公众号上做查询成绩、课表等日常频度较高的功能方便用户使用。

微信公众号中获取用户信息(网页授权获取)的实现步骤如下: 1. **配置公众号**: - 登录微信公众号平台,进入“开发->“基本配置”,记录开发者ID(AppID)和开发者密钥(AppSecret)。 - 进入“公众号设置”->“功能设置”,设置“网页授权域名”,确保域名已备案并可访问。 2. **引导用户同意授权**: - 在网页中生成一个授权链接,引导用户点击该链接进行授权。授权链接的格式如下: ``` https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect ``` - `APPID`:公众号的唯一标识。 - `REDIRECT_URI`:授权后重定向的回调链接地址,需进行URL编码。 - `response_type`:返回类型,请填写code。 - `scope`:应用授权作用域,`snsapi_base`(不弹出授权页面,直接跳转,只能获取用户openid)或`snsapi_userinfo`(弹出授权页面,可通过openid拿到昵称、性别、所在地等)。 - `state`:重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节。 - `#wechat_redirect`:无论直接打开还是做页面302重定向时候,必须带此参数。 3. **用户同意授权后回调**: - 用户同意授权后,微信会重定向到`REDIRECT_URI`,并在URL中携带`code`和`state`参数。 - 在回调页面中,通过`code`参数获取`access_token`和`openid`。 4. **通过code获取access_token**: - 构造请求URL: ``` https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code ``` - `APPID`:公众号的唯一标识。 - `SECRET`:公众号的开发者密码。 - `CODE`:填写第一步获取的code参数。 - `grant_type`:填写authorization_code。 - 发送HTTP GET请求,获取`access_token`和`openid`。 5. **获取用户信息**: - 构造请求URL: ``` https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN ``` - `ACCESS_TOKEN`:网页授权接口调用凭证。 - `OPENID`:用户的唯一标识。 - `lang`:返回国家地区语言版本,zh_CN简体,zh_TW繁体,en英文。 - 发送HTTP GET请求,获取用户信息。 以下是一个简单的示例代码: ```javascript function getUserInfo() { // 假设用户在微信中点击了授权链接并重定向回来 const code = getQueryParam('code'); const state = getQueryParam('state'); if (code) { // 通过code获取access_token fetch(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=YOUR_APPID&secret=YOUR_SECRET&code=${code}&grant_type=authorization_code`) .then(response => response.json()) .then(data => { const accessToken = data.access_token; const openid = data.openid; // 通过access_token和openid获取用户信息 fetch(`https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`) .then(response => response.json()) .then(userInfo => { console.log(userInfo); // 处理用户信息 }); }); } else { // 跳转到微信授权页面 const redirectUri = encodeURIComponent('YOUR_REDIRECT_URI'); window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=YOUR_APPID&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`; } } function getQueryParam(param) { const urlSearchParams = new URLSearchParams(window.location.search); return urlSearchParams.get(param); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值