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

微信开放平台PC终端扫码登录功能个人总结 - 还行吗？年轻人 - 博客园

   1.登录授权

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

                           如果目前的微信账号被绑定，号，请先登录绑定；

                           

                                       如果微信号绑定多个账号，则显示绑定所有账号的用户名和企业名。选择账号后，点击登录按钮成功登录；

           2.扫描绑定

                   登录后检测当前账户open_id为空，则显示当前弹窗(001管理员账号除外)；

                                                           

                                       微信open_id下面加个账号；

           3.个人资料

                   新增一个'微信号'字段：显示帐号是否绑定

好了，现在整理逻辑，理清思路，画图

声明一下，PC端的微信扫码登录是微信开放平台，移动端关注是跳转第三方应用的，用的是公众平台，两个的接口地址拿的openId不同的是，如果在开放平台下创建多个应用程序或绑定多个公共账户，则在公共账户之间使用unionId打通。

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

       公司或企业在开发前登录微信开放平台，注册认证，创建应用程序（应用程序是您的项目，产品，不知道直接让产品帮助您注册认证，一般需要一周批准 300元，完成AppId和AppSecret）

本地环境要映射到外网，这样微信才能访问自己的界面。建议使用ngrok，网上没有教程，我的是直接让人帮我配。

       做好准备，开始发展:

                   --> 资源中心 --> 网站应用 --> 微信登录功能 --> 网站应用微信登录开发指南)

           不需要生成整个页面div所以在里面生成js生成：

               1.首先在页面中引入以下内容JS文件（支持https）：

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

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

var obj = new WxLogin({ id:"login_container", //div的id appid: "", scope: "", redirect_uri: "", state: "",//参数可以不带 style: "",//风格 提供"black"、"white"可选，默认情况下，黑色文字描述 href: ""第三方可根据实际需要覆盖默认风格。 }；

用户扫描此处生成的二维码，扫描成功，移动终端出现授权页面，需要用户确认。

在开放平台上匹配回调地址中的域名：

生成二维码，可以看效果，还没有调整样式:

再来看授权步骤：

第一步，获取code。

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

       接口中的参数如下：

自己代码：

@Override public Map<String,String> weixinLoginUrl()(){ String url = "https://open.weixin.qq.com/connect/qrconnect?appid=" openPlatformAppId "&redirect_uri=" URL.encode("'" openPlatformRedirect_uri "'/getWxLoginCode") "&response_type=code" "&scope=snsapi_login" "&state=STATE#wechat_redirect"; Map<String,String> ** p = new HashMap<String,String>()；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；** p.put("url",url); ** p.put("getRedirect_uri",openPlatformRedirect_uri); openPlatformRedirect_uri配置文件return ** p; }

解释代码：

       openPlatformAppId为自己的AppId，

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

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

返回给controller，controller再次请求地址，此时进入微信回调地址，会有code参数，根据code可以拿到参数access_token了，controller代码：

@RequestMapping(value = "/wxLoginCheck",method = RequestMethod.GET) @ResponseBody public String wxLoginCheck()(){ Map<String,String> weixinLoginUrl = alarmWxMessageService.weixinLoginUrl()；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；String url = weixinLoginUrl.get("url"); return "<script>location.href='" url "'</script>"; }

这时候return回调地址成为第一步回调地址参数的地址("/getWxLoginCode")，域名没写了

第二步，通过code获取access_token

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

       接口中的参数如下：

自己代码：

controller：

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

解释代码：

       code能直接拿到，WeixinOauth2Token 为实体，包装openId和access_token之类字段

serviceImpl：

@Override public WeixinOauth2Token wxLogingetCode(String code) WeixinOauth2Token wat = null; String getTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" openPlatformAppId "&secret=" openPlatformAppSecret "&code=" code "&grant_type=authorization_code"; JSONObject jsonObject = JSONObject.fromObject(HttpUtil.Get(getTokenUrl)); if (jsonObject != null) try wat = new WeixinOauth2Token()；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；wat.setAccessToken(jsonObject.getString("access_token")); wat.setOpenId(jsonObject.getString("openid"));15 catch (Exception e) wat = null; int errorCode = jsonObject.getInt("errorCode"); String errorMsg = jsonObject.getString("errorMsg"); log.error("网页授权失败errorCode=" errorCode ",errorMsg=" errorMsg); } } return wat; }

解释代码：

       openPlatformAppId为自己的AppId，

       openPlatformAppSecret为自己的密码，

   　code为之前获取到的code，

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

/** * 向指定URL发送GET方法的请求 * * @param url 发送请求的URL * @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。 * @return URL 所代表远程资源的响应结果 */ public static String Get(String url) { int connectionTimeOut=HTTP_CONNECTION_TIMEOUT, readTimeOut =HTTP_READ_TIMEOUT; String result = ""; BufferedReader in = null; String urlNameString = url; try { logger.info("请求url+参数：" + urlNameString); URL realUrl = new URL(urlNameString); // 打开和URL之间的连接 URLConnection connection = realUrl.openConnection(); // 设置通用的请求属性 connection.setRequestProperty("accept", "*/*"); connection.setRequestProperty("connection", "Keep-Alive"); connection.setConnectTimeout(connectionTimeOut); connection.setReadTimeout(readTimeOut); // 建立实际的连接 connection.connect(); // 获取所有响应头字段 // 定义 BufferedReader输入流来读取URL的响应 in = new BufferedReader(new InputStreamReader(connection.getInputStream())); String line; while ((line = in.readLine()) != null) { result += line; } } catch (Exception e) { logger.error("发送GET请求出现异常！url: " + urlNameString + ", " + e); } // 使用finally块来关闭输入流 finally { try { if (in != null) { in.close(); } } catch (Exception e2) { logger.error("close exception", e2); } } return result; }

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

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

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

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

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

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

技术上新用ModelMap这个对象，后台存储： ** p.put("名字","值")，前台直接拿：var corpUsers = '${requestScope.名字}'；

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

重发请求的GET、POST方法；

spring重定向、jsp重定向等。

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

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