互联网时代,不管是以哪种形式存在的应用,移动端或者PC网站,注册登录功能是用户访问应用的第一步,可以说,注册登录用的方不方便在一定程度上能决定用户的去留。对于用户来说,能够越简单,不用动手做过多操作就能达到同样效果的功能是最好不过的。今天就来介绍一下PC网站如何通过扫描微信二维码关注公众号,直接完成注册登录。

1、思考

最近在刷乐观数据的时候,发现网站注册登录流程有点不一样,都没怎么操作,只是用手机扫了一个二维码进入到关注公众号的页面,然后关注公众号,就收到登入成功的消息提醒,电脑上也直接进入到平台首页,而且还显示了我的微信头像、昵称,很是快速。



这一看就不是用扫描微信开放平台的那种二维码做的,这种还更轻巧些,那这是怎么实现的呢?于是就去翻阅微信开发文档理了一下,就明白了。

2、思路

其实这个功能实现原理很简单,如果按公众号开发文档的步骤来就两步:

账号管理 -> 生成带参数二维码接口-> 创建临时二维码

消息管理 -> 接收事件推送 -> 扫描带参数二维码事件

接下来 来看开发过程,注意,已微信认证的服务号才有生成带参数二维码的功能

3、开发

关于二维码,微信根据实际业务不同提供了两种创建方法,临时和永久的,其实也什么差别,这里就举例说明创建临时二维码。

3.1 生成调用凭据access_token(这个要做缓存,第一次先存缓存,之后都从缓存取,过期了再重新获取,这里没有做缓存)

/*** @author liuqh* @date 2019/8/6 下午1:49* @description*/
@Component
public class GetToken {private Logger logger = LoggerFactory.getLogger(GetToken.class);public AccessToken getToken(String appid, String appSecrect) {AccessToken token;String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid+ "&secret=" + appSecrect;String result = CommonUtil.httpsRequest(url, "GET", null);JSONObject jsonObject = JSONObject.fromObject(result);if (jsonObject != null) {try {token = new AccessToken();token.setAccess_token(jsonObject.getString("access_token"));token.setExpires_in(jsonObject.getLong("expires_in"));} catch (Exception e) {token = null;e.printStackTrace();logger.error("系统出错了!");}} else {token = null;// 获取token失败logger.error("jsonObject为空,获取token失败");}return token;}
}

工具类 CommonUtil

/*** * @Title: 请求CommonUtil.java* @Description: 通用工具类* @author**/
public class CommonUtil {private static Logger log = LoggerFactory.getLogger(CommonUtil.class); /*** * @Title: httpsRequestJson* @Description: 发送https请求 ---返回JSONObject* @param requestUrl 请求地址* @param requestMethod 请求方式(GET、POST)* @param outputStr 提交的数据* @return JSONObject(通过JSONObject.get(key)的方式获取json对象的属性值)* @return JSONObject 返回类型* @throws  */public static JSONObject httpsRequestJson(String requestUrl, String requestMethod,String outputStr) {JSONObject jsonObject = null;try {// 创建SSLContext对象,并使用我们指定的信任管理器初始化TrustManager[] tm = { new MyX509TrustManager() };SSLContext sslContext = SSLContext.getInstance("SSL", "SunJSSE");sslContext.init(null, tm, new java.security.SecureRandom());// 从上述SSLContext对象中得到SSLSocketFactory对象SSLSocketFactory ssf = sslContext.getSocketFactory();URL url = new URL(requestUrl);HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();conn.setSSLSocketFactory(ssf);conn.setDoOutput(true);conn.setDoInput(true);conn.setUseCaches(false);// 设置请求方式(GET/POST)conn.setRequestMethod(requestMethod);// 当outputStr不为null时向输出流写数据if (null != outputStr) {OutputStream outputStream = conn.getOutputStream();// 注意编码格式outputStream.write(outputStr.getBytes("UTF-8"));outputStream.close();}// 从输入流读取返回内容InputStream inputStream = conn.getInputStream();InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");BufferedReader bufferedReader = new BufferedReader(inputStreamReader);String str = null;StringBuffer buffer = new StringBuffer();while ((str = bufferedReader.readLine()) != null) {buffer.append(str);}// 释放资源bufferedReader.close();inputStreamReader.close();inputStream.close();inputStream = null;conn.disconnect();jsonObject = JSONObject.parseObject(buffer.toString());} catch (ConnectException ce) {} catch (Exception e) {}return jsonObject;}
}

生成二维码,

scene_id这个字段是自定义的场景值,比如我们这个扫码场景是注册登录,

在处理事件推送那边可以取到,用来判断场景。

/*** @ClassName WxPublicQrcode* @Author liuqh* @Date 2020-02-29 20:15* @Description*/
public class WxPublicQrcode {private static final String createUrl = "https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=";private static final String showqrcodeUrl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=";@Autowiredprivate GetToken getToken;/*** 1、创建二维码ticket* @return* {"ticket":"gQH47joAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL2taZ2Z3TVRtNzJXV1Brb3ZhYmJJAAIEZ23sUwMEmm* 3sUw==","expire_seconds":60,"url":"http://weixin.qq.com/q/kZgfwMTm72WWPkovabbI"     }*/        public static JSONObject create () {String token = getToken.getToken("appid","appSecrect").getAccess_token();Map<String, Object> map = new HashMap<>();map.put("expire_seconds",60);map.put("action_name","QR_SCENE");Map<String,Object> sceneId = new HashMap<>();sceneId.put("scene_id",123);Map<String, Object> scene = new HashMap<>();scene.put("scene",sceneId);map.put("action_info",scene);String param = JSON.toJSONString(map);System.out.println(param);JSONObject jsonObject = CommonUtil.httpsRequestJson(createUrl+token, "POST", param);System.out.println(jsonObject);return jsonObject;}/*** 2、通过ticket换取二维码* @return ticket正确情况下,http 返回码是200,是一张图片,可以直接展示或者下载*/public static JSONObject showqrcode () {JSONObject create = create();String ticket = create.getString("ticket");try {ticket =  URLEncoder.encode(ticket,"utf-8");JSONObject jsonObject = CommonUtil.httpsRequestJson(showqrcodeUrl+ ticket, "GET", null);System.out.println(jsonObject);return jsonObject;} catch (UnsupportedEncodingException e) {e.printStackTrace();}return null;}
}

3.2 处理事件推送

关于如何处理接收事件,参考微信公众号关注或取关后再处理我们自己的业务逻辑这篇文章。

判断Event值是subscribe且EventKey值是qrscene_为前缀,后面为二维码的参数值,那么就是用户还未关注公众号,则用户可以关注公众号,做各种操作,存数据库什么,FromUserName就是用户的openid,Event值是SCAN且EventKey值是是一个32位无符号整数,即创建二维码时的二维码scene_id,则用户已经关注公众号,再做相对应的操作。

实现微信扫描二维码关注公众号,直接注册登录网站相关推荐

  1. 微信扫描二维码关注公众号并成为下级

    一.微信公众号配置"服务器配置" https://blog.csdn.net/qq_31267183/article/details/83181157 二.生成带标识符的二维码 1 ...

  2. 微信扫描自定义二维码关注公众号

    首先讲讲项目背景,为电动汽车充电设备开发一套通过微信公众号在线充电产品,产品实现如下功能,通过微信扫描充电设备上二维码,实现与充电设备的交互,控制充电设备启停.要求扫描二维码时,判断是否已经关注客户的 ...

  3. 用户扫描二维码进入公众号后自动发送指定消息_wetool的封杀、企业微信的崛起,我们要怎么利用企业微信进行用户增长?...

    我们先简单了解下企业微信的概念 企业微信是腾讯微信团队打造的企业通讯与办公工具,具有与微信一致的沟通体验,丰富的OA应用,和连接微信生态的能力,可帮助企业连接内部.连接生态伙伴.连接消费者. 前段时间 ...

  4. 用户扫描二维码进入公众号后自动发送指定消息_公众号裂变,社群裂变,个人号裂变,运营操作指南...

    1. 公众号裂变(主要针对服务号,订阅号裂变后面讲) 原理:用户扫码关注公众号,公众号里自动弹出让用户转发的海报话术和为每个用户生成专属独立的裂变海报,用户只有转发海报让其他人扫码关注公众号,达到一定 ...

  5. 微信扫描自定义二维码关注公众号并登录

    微信公众号开发: https://love.daquexing.com/view/307.html

  6. 微信扫描二维码快速登录网站

    在近期的一个项目中用到了微信扫描注册.登录网站功能所以整理了下希望对读者有帮助. 首先,你需要有一个没有绑定微信.微信公众平台的邮箱注册成为微信开放平台开发者,在管理中心创建移动应用.或者网站应用获得 ...

  7. 前端怎么从H5调起微信扫描二维码?小程序使用扫码功能.

    小程序如何使用扫码的功能呢? wx.scanCode(Object object) 参数 属性 类型 默认值 必填 说明 最低版本 onlyFromCamera boolean false 否 是否只 ...

  8. 微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面

    实现微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面 而进入商城下载该项目 详情地址:gitee.com/DuJiaHui123- 1.创建完之后 替换文件里面的ios ...

  9. 微信扫描二维码在内置浏览器打不开文件的下载链接怎么办?哪些api接口可以解决...

    有哪些api接口可以实现微信扫描二维码在内置浏览器打开文件的下载链接? 经常看到贴吧上有人吐槽微信的检测系统太严格了,动不动就拦截第三方链接.怎么才能解决,怎么才能避免等等一系列的问题.因为平时我也会 ...

最新文章

  1. Java常用类之String类练习
  2. 有了这套模板,女朋友再也不用担心我刷不动 LeetCode 了
  3. crawler_微信采集方案
  4. Qt工作笔记-QFileSystemModel创建文件系统信息模型
  5. 喜马拉雅FM专辑下载器,支持VIP付费专辑下载
  6. dSPACE控制电机启动与停止
  7. SpringBoot整合MyBatisPlus(十四)
  8. 如何利用Photoshop制作电子签名
  9. Vue3简单实现元素周期表
  10. [URL ]pixiv.net p站用户账号注销网页网址(电脑web版)
  11. Gartner 发布2022年新兴技术成熟度曲线
  12. 在线培训机构需公示教师资格证 一对一业务将最受影响
  13. 网络初始化失败,点击确定后将退出
  14. ubuntu文本输入源,找不到中文拼音输入源
  15. D.Strange_Fractions-2021ICPC上海站
  16. 操作系统:Win10自带的8个基本功能非常实用
  17. linux启动dns失败,Linux DNS 设置失败
  18. 【StyleGAN代码学习】StyleGAN模型架构
  19. php删除bom,php bom如何去掉
  20. 乐观不是没头没脑的嘻嘻呵呵,真正的乐观是看清现实的残酷后,依然斗志昂扬,积极生活

热门文章

  1. 很详细、很移动的Linux makefile教程:介绍,总述,书写规则,书写命令,使用变量,使用条件推断,使用函数,Make 的运行,隐含规则 使用make更新函数库文件 后序...
  2. 485通讯协议在java中的应用
  3. 在微信小程序中使用自定义字体【font-family】、同时在canvas
  4. 西乔说要把「神秘的程序员们」当做一个文化产品来做
  5. AI-多模态-文本->图像-2021:Stable Diffusion【开源】【目前开源模型中最强】
  6. 罗斯蒙特1056ph电极_Rosemount/罗斯蒙特1056-02-20-36-AN-UL 分析仪PH电极
  7. 机器学习(六)--------python实现朴素贝叶斯对email分类
  8. 【python】B站电影爬虫
  9. 牛人经验:看美剧学习英语的诀窍
  10. 前端技能树,面试复习第 54 天—— 手写代码:情景题