微信授权登录,扫码登录链接

请给我一杯作者Java

编辑|外向魔镜公号| Java向日葵宝典

由于33558www.Sina.com/Wechat端流量相对充足，扫码注册系统的功能也受到了很多系统的青睐，本文将详细揭开该技术的面纱。

http://www.Sina.com/http://www.Sina.com /

需要3358 www.Sina.com/http://www.Sina.com/we chat开放平台帐户和网站APP应用程序

单击此APP获取appid appSecret。稍后再用。

导读：调试扫描本地启动ngrok以结合登录许可证回调启动优质内容请关注微信公众号“Web项目聚集地”。

演示效果用于在web APP应用程序中放置本地内部网地址的开发信息-回调域许可证

准备工作Spring-Boot

Thymeleaf

http客户端

约翰先生

1. 全屏网页二维码的生成和定制二维码，后者可以调整二维码大小，页面布局可以自我调整，前者是固定页面和二维码

访问流程和实现功能分析

所列技术

创建http://www.Sina.com/sprint boot/groupidorg.spring framework.boot/groupidartifactidspring的相关jar部署ependencydependencygroupidorg.spring framework.boot/groupidartifactidspring-boot-starter-web/artifact id/ependencydependencygroupidorg.Apache.http components/groupidartifactidhttpclient/artifactidversion 4.1/version/ependen groupidartifactidjson/artifactidversion 2016 08 10/version/dependency 3358 www.sinndency spring.thyme leaf.prefix 3360 clan spring.thyme leaf.suffix :html # 在微信开放平台上创建的网站APP应用程序的appsecretappseect微信公众平台上创建的网站APP应用程序的appid appid=scope=snsapi _ log inform 授权使用微信平台创建的网站设置回调域domain=http://test.xcx.cxylt.cn/server.port=8083358微信微信2. 微信用户向访问微信2.0的第三方APP应用程序注册许可后，第三方将获取用户的接口呼叫证书(access_token )

微信2.0许可证登录当前支持授权_ code模式，适用于具有服务器端APP应用程序许可证的情况。该模式的总体流程如下。

1 .第三方发起微信牌照登录请求，微信用户授权第三方APP套餐后，微信拉起APP套餐或重定向至第三方网站，授权临时票券代码参数

在code参数中添加AppID和AppSecret等，用API交换access_token

通过access_token进行接口调用，获取用户的基本数据资源，或者帮助用户实现基本操作

简单地说，用户在页面生成二维码下扫描代码，进入回调地址，可以从回调地址获取code，可以从code获取accessToken，可以从accessToken获取用户的所有信息

二维码页面

后端代码，生成授权地址，让用户点击扫码登录

@RequestMapping("/") public String index(Model model) throws UnsupportedEncodingException { String oauthUrl = "https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect"; String redirect_uri = URLEncoder.encode(callBack, "utf-8"); ; oauthUrl = oauthUrl.replace("APPID",appid).replace("REDIRECT_URI",redirect_uri).replace("SCOPE",scope); model.addAttribute("name","liuzp"); model.addAttribute("oauthUrl",oauthUrl); return "index";}

前端代码

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h1>hello! <label th:text="${name}"></label></h1> <a th:rel="external nofollow" href="${oauthUrl}">点击扫码登录</a></body></html>

编写授权后回调方法

@RequestMapping("/callBack") public String callBack(String code,String state,Model model) throws Exception{ logger.info("进入授权回调,code:{},state:{}",code,state); //1.通过code获取access_token String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code"; url = url.replace("APPID",appid).replace("SECRET",appsecret).replace("CODE",code); String tokenInfoStr = HttpRequestUtils.httpGet(url,null,null); JSONObject tokenInfoObject = new JSONObject(tokenInfoStr); logger.info("tokenInfoObject:{}",tokenInfoObject); //2.通过access_token和openid获取用户信息 String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID"; userInfoUrl = userInfoUrl.replace("ACCESS_TOKEN",tokenInfoObject.getString("access_token")).replace("OPENID",tokenInfoObject.getString("openid")); String userInfoStr = HttpRequestUtils.httpGet(userInfoUrl,null,null); logger.info("userInfoObject:{}",userInfoStr); model.addAttribute("tokenInfoObject",tokenInfoObject); model.addAttribute("userInfoObject",userInfoStr); return "result"; }

回调后跳转页面，这个页面记录授权获取的信息

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>授权结果页</title></head><script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script><body> <h2>你好，授权成功!</h2><br> <h3>通过code换取access_token 结果:</h3> <p th:text="${tokenInfoObject}"></p> <h3>通过access_token获取用户信息结果:</h3> <p th:text="${userInfoObject}"></p></body></html> 自定义二维码页面

后端路由

@RequestMapping("/1") public String index1(Model model) throws UnsupportedEncodingException { String redirect_uri = URLEncoder.encode(callBack, "utf-8"); ; model.addAttribute("name","liuzp"); model.addAttribute("appid",appid); model.addAttribute("scope",scope); model.addAttribute("redirect_uri",redirect_uri); return "index1";}

前台页面

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>内嵌(自定义二维码)</title></head><script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script><body> <h1>hello! <label th:text="${name}"></label></h1> <div id="login_container"></div> <script th:inline="javascript"> var obj = new WxLogin({ self_redirect:true, id:"login_container", appid: [[${appid}]], scope: [[${scope}]], redirect_uri: [[${redirect_uri}]], state: "", style: "", href: "" }); </script></body></html>

两个页面结果页和回调地址都是一致的，这里只是提供两种做法。

源码获取方式为公众号内回复：「扫码」

如果您喜欢这篇文章，欢迎点击文章底部的「阅读原文」，订阅Java葵花宝典。