微信开放平台PC端扫码登录功能个人总结

微信开放平台PC端扫码登录功能个人总结最近公司给我安排一个微信登录的功能,需求是这样的:  1.登录授权    点击二维码图标后,登录界面切换为如下样式(二维码),微信扫描二维码并授权,即可成功登录;      若当前账号未绑定微信账号,扫描后提示“您的账号未绑定微信号,请先登录绑定”;      点击“返回”按钮,界面切换为账号密码登录;      若微信号绑定多个账号在,则展示所绑定全部账号的用户名…

大家好,又见面了,我是你们的朋友全栈君。

最近公司给我安排一个微信登录的功能,需求是这样的:

  1.登录授权

    点击二维码图标后,登录界面切换为如下样式(二维码),微信扫描二维码并授权,即可成功登录;

       若当前账号未绑定微信账号,扫描后提示“您的账号未绑定微信号,请先登录绑定”;

       点击“返回”按钮,界面切换为账号密码登录;

          若微信号绑定多个账号在,则展示所绑定全部账号的用户名和企业名,选择账号后点击登录按钮成功登录;

   2.扫描绑定

     账号登录后检测当前账号open_id为空,则展示当前弹窗(001管理员账号除外);

               用户微信扫描二维码后,将当前微信号绑定至对应账号;

          若微信号之前绑定其他账号,则对应open_id下增加一个账号;

   3.个人资料

     新增一个’微信号’字段:显示账号是否绑定

 

好,现在整理逻辑,理清思路,画图:

微信开放平台PC端扫码登录功能个人总结

  声明一下,PC端的微信扫码登录是微信开放平台,移动端关注是跳转第三方应用的,用的是公众平台,两个的接口地址拿的openId不一样,开放平台下面如果创建多个应用或者绑定多个公众号,各公众号之间用unionId打通。

openId和unionId区别:http://www.25xt.com/html5css3/11968.html

  公司或者企业在开发前  登录微信开放平台,注册认证,创建一个应用(应用就是你的项目,产品,不知道就直接让产品帮你注册认证,一般需要一个礼拜时间审批+300人民币,完了拿到AppId和AppSecret)

 微信开放平台PC端扫码登录功能个人总结

微信开放平台PC端扫码登录功能个人总结

  自己的本地环境要映射到外网,那样微信才能访问到自己接口来。推荐使用ngrok,不会的网上有教程,我的是直接让人帮我配的。

  准备工作做好,开始开发:

     第一步:根据文档生成二维码(开放平台 –> 资源中心 –> 网站应用 –> 微信登录功能 –> 网站应用微信登录开发指南)

   我这里不需要生成整个页面,而是在一个div里生成,所以用js生成:

    1.在页面中先引入如下JS文件(支持https):

      <script src=”http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js”></script>

    2.在需要使用微信登录的地方实例以下JS对象:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

var obj = new WxLogin({

 

                              id:"login_container",    //div的id

 

                              appid: "",

 

                              scope: "",

 

                              redirect_uri: "",        //回调地址

 

                              state: "",         //参数,可带可不带

 

                              style: "",         //样式  提供"black"、"white"可选,默认为黑色文字描述

 

                              href: ""                 //自定义样式链接,第三方可根据实际需求覆盖默认样式。

 

                            });

 

这里生成的二维码供用户扫描,扫描成功,移动端出现授权页面,需用户确认。

回调地址里面的域名要在开放平台去配:

微信开放平台PC端扫码登录功能个人总结

二维码就生成好了,可以看看效果,还没调样式:

微信开放平台PC端扫码登录功能个人总结微信开放平台PC端扫码登录功能个人总结

再来看授权步骤:

第一步,获取code。

  调用接口:https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect;

  接口中参数如下:

微信开放平台PC端扫码登录功能个人总结

自己代码:

复制代码

 1 @Override
 2     public Map<String, String> weixinLoginUrl() {
 3         String url = "https://open.weixin.qq.com/connect/qrconnect?appid=" + openPlatformAppId + "&redirect_uri="
 4                 + URL.encode("'"+ openPlatformRedirect_uri +"'/getWxLoginCode") + "&response_type=code" + "&scope=snsapi_login"
 5                 + "&state=STATE#wechat_redirect";
 6         Map<String, String> map = new HashMap<String, String>();
 7         map.put("url", url);
 8         map.put("getRedirect_uri", openPlatformRedirect_uri);    //openPlatformRedirect_uri为配置文件里的域名(开放平台配好的) 
 9      return map; 
10 }

复制代码

解释代码:

  openPlatformAppId为自己的AppId,

  openPlatformRedirect_uri为自己配的域名,(请忽略我的方法命名和参数命名…别学我!)

这里提一下,登录的scope=snsapi_login,公众平台里scope有userInfo(用户有感知)和baseInfo(用户无感知,静默授权)

返回给controller,controller重新请求一遍地址,这时候进入的是微信回调地址了,里面就会有code参数,根据code参数就可以拿access_token了,controller代码:

复制代码

1 @RequestMapping(value = "/wxLoginCheck", method = RequestMethod.GET)
2     @ResponseBody
3     public String wxLoginCheck() {
4         Map<String, String> weixinLoginUrl = alarmWxMessageService.weixinLoginUrl();
5         String url = weixinLoginUrl.get("url");
6         return "<script>location.href='" + url + "'</script>";
7     }

复制代码

这时候return的回调地址变成了第一步回调地址参数的那个地址(“/getWxLoginCode”),域名没写了

第二步,通过code获取access_token

  调用接口:https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code;

  接口中参数如下:

  微信开放平台PC端扫码登录功能个人总结

自己代码:

controller:

1 @RequestMapping(value = "/getWxLoginCode", method = RequestMethod.GET)
2     public String getWxLoginCode(String code) {
3         WeixinOauth2Token wxot=alarmWxMessageService.wxLogingetCode(code);
4         String openId = wxot.getOpenId();
5         String accessToken = wxot.getAccessToken();
6     }

解释代码:

  code直接能拿到了,WeixinOauth2Token 为实体类,封装openId和access_token之类字段

serviceImpl:

复制代码

 1 @Override
 2     public WeixinOauth2Token wxLogingetCode(String code) {
 3         WeixinOauth2Token wat = null;
 4         String getTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + openPlatformAppId
 5                 + "&secret=" + openPlatformAppSecret
 6                 + "&code=" + code
 7                 + "&grant_type=authorization_code";
 8         // 获取网页授权凭证
 9         JSONObject jsonObject = JSONObject.fromObject(HttpUtil.Get(getTokenUrl));
10         if (jsonObject != null) {
11             try {
12                 wat = new WeixinOauth2Token();
13                 wat.setAccessToken(jsonObject.getString("access_token"));
14                 wat.setOpenId(jsonObject.getString("openid"));15             } catch (Exception e) {
16                 wat = null;
17                 int errorCode = jsonObject.getInt("errorCode");
18                 String errorMsg = jsonObject.getString("errorMsg");
19                 log.error("获取网页授权失败errorCode=" + errorCode + ",errorMsg=" + errorMsg);
20             }
21         }
22         return wat;
23     }

复制代码

解释代码:

  openPlatformAppId为自己的AppId,

  openPlatformAppSecret为自己的密码,

  code为之前获取到的code,

  json那一段是重新发送一个get请求,方法在HttpUtil里封装的,下面贴出。

复制代码

 1 /**
 2      * 向指定URL发送GET方法的请求
 3      *
 4      * @param url   发送请求的URL
 5      * @param param 请求参数,请求参数应该是 name1=value1&name2=value2 的形式。
 6      * @return URL 所代表远程资源的响应结果
 7      */
 8     public static String Get(String url) {
 9         int connectionTimeOut=HTTP_CONNECTION_TIMEOUT,  readTimeOut =HTTP_READ_TIMEOUT;
10         String result = "";
11         BufferedReader in = null;
12         String urlNameString = url;
13         try {
14             logger.info("请求url+参数:" + urlNameString);
15             URL realUrl = new URL(urlNameString);
16             // 打开和URL之间的连接
17             URLConnection connection = realUrl.openConnection();
18             // 设置通用的请求属性
19             connection.setRequestProperty("accept", "*/*");
20             connection.setRequestProperty("connection", "Keep-Alive");
21             connection.setConnectTimeout(connectionTimeOut);
22             connection.setReadTimeout(readTimeOut);
23             // 建立实际的连接
24             connection.connect();
25             // 获取所有响应头字段
26             // 定义 BufferedReader输入流来读取URL的响应
27             in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
28             String line;
29             while ((line = in.readLine()) != null) {
30                 result += line;
31             }
32         } catch (Exception e) {
33             logger.error("发送GET请求出现异常!url: " + urlNameString + ", " + e);
34         }
35         // 使用finally块来关闭输入流
36         finally {
37             try {
38                 if (in != null) {
39                     in.close();
40                 }
41             } catch (Exception e2) {
42                 logger.error("close exception", e2);
43             }
44         }
45         return result;
46     }

复制代码

到这里,已经授权完了,能拿到用户的openId,用这个去完成公司相关业务。文档上面的刷新access_token没有做,自己可以去了解下

后来做完了,推送消息那边要拿我这个openId,才发现,登录是开放平台的,推送消息是公众平台的,平台都不一样,openId肯定不一样,所以又重新开发一遍登录,什么东西都是自己实现。。。。。。

注意:unionId,统一管理多个公众号或者多个应用而产生的一个机制,像这次开发的,开放平台和公众平台不能用这个

个人总结一下,开发一个东西之前,思路一定要理清,不然会绕来绕去把自己绕晕,技术都不是问题,重要的是思路;

代码部分,命名符合规范,让人看的懂是什么意思,注释也要全,让人明白写的什么;

登录模块要好好研究一下,调用登录方法去登录,实现的原理和登录时安全问题要考虑到;

技术上新用ModelMap这个对象,后台存储:map.put(“名字”,”值”),前台直接拿:var corpUsers = ‘${requestScope.名字}’;

List Map json 互相转换、传值、接收值;

重发请求的GET、POST方法;

spring重定向、jsp重定向等。

 微信ui地址:https://weui.io/

开发小白,如果有错误的地方尽请大佬们指出,谢谢

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/131287.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • ensp的dhcp配置命令(怎么配置dhcp服务器)

    DHCP动态主机配置协议,用来分配IP地址等网络参数。用户上网需要的条件:IP地址,网关,DNS…注意:除非有特殊需求会采用静态配置(员工比较多的企业)路由器、核心交换机、Linux、服务器等上面都可以配置DHCP。DHCP配置实验:dhcp第一种分配IP地址的配置方式:[Huawei]dhcpenable:在路由器上,开启DHCP功能。[Huawei]intg0/0/0ipaddress10.1.1.1进入与设备相连的接口添加物理IP[Huawei]ippool

    2022年4月18日
    99
  • Jenkins(2)docker容器中安装python3「建议收藏」

    Jenkins(2)docker容器中安装python3「建议收藏」前言使用docker安装jenkins环境,jenkins构建的workspace目录默认是在容器里面构建的,如果我们想执行python3的代码,需进容器内部安装python3的环境。进jenki

    2022年7月30日
    6
  • java中的守护线程守护的是什么_java守护线程的作用

    java中的守护线程守护的是什么_java守护线程的作用守护线程在Java中有两类线程:UserThread(用户线程)DaemonThread(守护线程)守护线程的功能非常简单,在其本身是一个线程的同时,主要是为了给其他的线程提供服务,比如说计时器,清空高速缓存等等操作,守护线程具有和被守护线程一样的生命周期(这里并不是说守护线程和被守护线程常常是1-1的关系),当被守护线程死亡,守护线程往往也会死亡,当虚拟机中只剩下守护线程时,虚拟机就会退出,因为此时也没有运行程序的必要了一个比较通俗的解释:任何一个守护线程都是整个JVM中所有非守护线程

    2022年10月9日
    1
  • Maven(二):常用命令、依赖管理

    Maven(二):常用命令、依赖管理

    2021年10月5日
    34
  • goland2021激活服务器 3月最新注册码

    goland2021激活服务器 3月最新注册码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月15日
    46
  • 智慧小区解决方案ppt_智慧小区简介

    智慧小区解决方案ppt_智慧小区简介智慧小区项目遇到的问题汇总&解决参考跨域问题mybatisplus操作问题git操作问题跨域问题前端使用vue脚手架搭建项目,后端使用springboot+MySQL,首当其冲的问题是两者不能使用同一个端口启动,这就涉及到跨域操作。事实上,第一步,要在vue项目中的vue.config.js里添加//跨域parallel:require(‘os’).cpus().length>1,pwa:{},devServer:{port:8081,

    2022年10月17日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号