网站web端二维码扫码登录

总体流程

1.  要通过网站扫码登录的话需要先去微信开放平台申请一个网站APP 

     网站APP需要提交一些资料。地址是https://open.weixin.qq.com/

     是开放平台，不是公众平台。

     公众平台是公众号，订阅号，

     开放平台，是可以绑定多个公众号，小程序，以及网站APP的

     且开放平台需要认证，每年要交钱。

     

2. 审核通过以后 就会生成appid 以及 secret

 

注：. 微信公众号是不能通过网站扫码登录的。（当然也可以绕路走，也能实现关注公众号登录，这里我就不套讨论这个问题，只是有一点思路，具体行不行我也不太清楚）

 

1.1 去  https://open.weixin.qq.com/ 创建网站APP应用

 

1.2 提交资料审核，需要盖公章

 

 

 

 

3. 接下来就是获取appid 和 secret做扫码登录

 

 

第一步在需要显示二维码的页面添加js

 

 

function showWechatEr () {
	  var s = document.createElement('script')
	  s.type = 'text/javascript'
	  s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
	  var wxElement = document.body.appendChild(s)
	  wxElement.onload = function () {
	    new WxLogin({
	      id: 'fisrt-shade-main', // 需要显示的容器id
	      appid: '', // 公众号appid wx******* 
	      scope: 'snsapi_login', // 网页默认即可
	      redirect_uri: encodeURIComponent(''), // 授权成功后回调的url 
	      state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
	      style: 'black', // 提供"black"、"white"可选。二维码的样式
	      href: '' // 外部css文件url，需要https
	    })
	}
	shadeFn('fisrt-shade',{width:340}).open()
}

 这里重点讲一下redirect_uri 这里的URL需要和你提交资料审核的域名一致 不然二维码不显示

 

 

这个URL是当你扫描二维码确认授权以后页面会转跳到该页面，并且会带上CODE以及STATUS两个参数

http://demo.baidu.com/website/web/wechat/bindAccount.html?code=011MWMSj1aSnHo0YAWQj1DdUSj1MWMSP&state=721

就像这样转跳的URL，你需要后台在bindAccount这个方法里面通过通过code换取微信用户信息

 

 

 

/**
	 * 通过 code换取用户基础信息 openid  unionid  昵称 头像
	 * @author YangJie
	 * 2019年11月26日 下午4:35:16
	 */
	public WeixinUserInfo getWechatUserInfo(HttpServletRequest request, HttpServletResponse response) {
		WeixinUserInfo weixinUserInfo = new WeixinUserInfo();
		weixinUserInfo.setType(3);
		String code = request.getParameter("code");
		if (code == null || "".equals(code))
			return null;
		String openid = null;
		String accessToken = null;
		String appId =SystemParams.getProperty("wechat.web.appid"); //这里是你的appid 
		String secret = SystemParams.getProperty("wechat.web.secret");//这里是生成的secret
		//获取token
		String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appId + "&secret=" + secret + "&code=" + code + "&grant_type=authorization_code";
                //httpClientUtils是我自己封装的一个发送get和post的类 这里就不贴出来了,自己写一个就行了
		String result = httpClientUtils.getSimple(url);
		try {
			JsonParser jsonParser = new JsonParser();
			JsonElement jsonElement = jsonParser.parse(result);
			openid = jsonElement.getAsJsonObject().get("openid").getAsString();
			accessToken = jsonElement.getAsJsonObject().get("access_token").getAsString();
		} catch (Exception e) {
			log.error("--------------------");
			log.error("获取web端二维码登录openid 异常");
			log.error(url);
			log.error(result);
			log.error("--------------------");
			//e.printStackTrace();
			return null;
		}

		//通过token获取用户基础信息
		try {
			url = "https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken + "&openid=" + openid + "&lang=zh_CN";
			result = httpClientUtils.getSimple(url);
			JsonParser jsonParser = new JsonParser();
			JsonElement jsonElement = jsonParser.parse(result);
			String unionid = jsonElement.getAsJsonObject().get("unionid").getAsString();
			String nickname = jsonElement.getAsJsonObject().get("nickname").getAsString();
			String headimgurl = jsonElement.getAsJsonObject().get("headimgurl").getAsString();
			weixinUserInfo.setUnionid(unionid);
			weixinUserInfo.setOpenid(openid);
			weixinUserInfo.setNickname(nickname);
			weixinUserInfo.setHeadimgurl(headimgurl);
		} catch (Exception e) {
			log.info("--------------------");
			log.info("获取web端二维码登录用户基础信息异常");
			log.info(url);
			log.info(result);
			log.info("--------------------");
			//e.printStackTrace();
			return null;
		}
		return weixinUserInfo;
	}

 

 

这样就在bindAccount方法里面通过code兑换到微信用户信息了,该code只能用一次,兑换成功后失效,不能再次通过该code获取微信用户信息

在该方法里面做自己的判断  如果有绑定用户直接自动登录,转跳

如果没有绑定过,需要转跳到绑定页面,并且把微信用户信息带过去,在绑定页面绑定时把用户名 密码 以及微信用户信息传递到后台验证 验证

完用户密码在绑定到该微信上

 

 

微信的很多授权都是通过这种方式获取微信用户信息的, 通过code兑换微信用户信息

1. https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appId + "&secret=" + secret + "&code=" + code + "&grant_type=authorization_code

通过第一步获取access_token 以及 openid

2.https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken + "&openid=" + openid + "&lang=zh_CN

通过前面的access_token 和 openid获取微信用户信息