原来公司的官网就支持账号密码、手机验证码、QQ扫码授权、微信扫码授权等多种登录方式。昨天分享了微信公众号之扫码登录,今天接到需求说要为了咋们的公众号涨粉,要扫码后关注公众号后才可以登录,我一想这不是耍流氓嘛,登个网站还非得我关注。。。算了,产品爸爸说了算。
一、准备工作
查阅了微信公众号开发文档,发现可以用微信生成带参数二维码实现。看看人家的介绍
这不就是我们这个需求准备的接口嘛😏
二、整个流程说明
先来看看整个流程的时序图
然后咋们来捋一下整个流程
先是用户来访问咋们的网站,然后点击微信登录。这是后我们肯定是要给他一个二维码扫,肯是需要去请求微信开放平台的,先获取token,然后获取我们想要的二维码给用户。然后用户扫码关注后,我们就会收到微信的回调事件,我们只需要处理这个回调事件就知道这个用户登录了。然后获取该用户的基本信息完成登录。
这里有的小伙伴就迷糊了,会想我收到回调怎么知道是谁登录了,这个二维码扫码的页面怎知道登录成功了没啊。这里我们需要用到带参二维码里的场景值,只要我们在场景值中放入一个uuid就可以区分了,接受到回调的时候就把uuid作为key缓存起来,然后在登录页面去一直轮询访问这个uuid对应的是否有人登录就行了。是不是很简单。哈哈哈哈
三、具体接口
第一步:生成临时带参二维码
http请求方式: POST URL: https://api./cgi-bin/qrcode/create?access_token=TOKEN POST数据格式:json POST数据例子:{"expire_seconds": 604800, "action_name": "QR_SCENE", "action_info": {"scene": {"scene_id": 123}}} 或者也可以使用以下POST数据创建字符串形式的二维码参数:{"expire_seconds": 604800, "action_name": "QR_STR_SCENE", "action_info": {"scene": {"scene_str": "test"}}}
参数说明
返回说明
正确的Json返回结果:
{"ticket":"gQH47joAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL2taZ2Z3TVRtNzJXV1Brb3ZhYmJJAAIEZ23sUwMEmm3sUw==","expire_seconds":60,"url":"/q/kZgfwMTm72WWPkovabbI"}
第二步:通过ticket换取二维码
获取二维码ticket后,开发者可用ticket换取二维码图片。请注意,本接口无须登录态即可调用。
请求说明
HTTP GET请求(请使用https协议)https://mp./cgi-bin/showqrcode?ticket=TICKET 提醒:TICKET记得进行UrlEncode
返回说明
ticket正确情况下,http 返回码是200,是一张图片,可以直接展示或者下载。
HTTP头(示例)如下: Accept-Ranges:bytes Cache-control:max-age=604800 Connection:keep-alive Content-Length:28026 Content-Type:image/jpg Date:Wed, 16 Oct 06:37:10 GMT Expires:Wed, 23 Oct 14:37:10 +0800 Server:nginx/1.4.1
错误情况下(如ticket非法)返回HTTP错误码404。
第三步:扫描带参数二维码事件
用户扫描带场景值二维码时,可能推送以下两种事件:
如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事件推送给开发者。如果用户已经关注公众号,则微信会将带场景值扫描事件推送给开发者。
1. 用户未关注时,进行关注后的事件推送
推送XML数据包示例:
<xml><ToUserName><![CDATA[toUser]]></ToUserName><FromUserName><![CDATA[FromUser]]></FromUserName><CreateTime>123456789</CreateTime><MsgType><![CDATA[event]]></MsgType><Event><![CDATA[subscribe]]></Event><EventKey><![CDATA[qrscene_123123]]></EventKey><Ticket><![CDATA[TICKET]]></Ticket></xml>
参数说明:
2. 用户已关注时的事件推送
推送XML数据包示例:
<xml><ToUserName><![CDATA[toUser]]></ToUserName><FromUserName><![CDATA[FromUser]]></FromUserName><CreateTime>123456789</CreateTime><MsgType><![CDATA[event]]></MsgType><Event><![CDATA[SCAN]]></Event><EventKey><![CDATA[SCENE_VALUE]]></EventKey><Ticket><![CDATA[TICKET]]></Ticket></xml>
参数说明: