微信测试号实现个人第三方PC端网站二维码登录(代码实现篇)

标签: Tag 微信测试号 第三方网站二维码登录 springboot shiro
5人阅读 评论(0) 收藏 举报
分类:

我页面使用了生成二维码的js,是网上拿到的(太多转载,具体作者是啥不知道(#^.^#))

点击打开生成二维码js链接  直接复制js就OK。

好,正文来啦,我代码中是使用了springboot(SSM)+redis+shiro。。。

页面代码:

<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8"/>
    <title>微信登录二维码</title>
    <script src='/js/jquery-2.0.3.min.js'></script>
    <script src="/js/qrcode.js"></script>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function checkLogin(){
    	var i = 0;
    	var sessionId = $("#sessionId").val();
    	if(sessionId!=""){
    		$.ajax({
                url: "/wechat/polling",
                type: "POST",
                data:{sessionId:sessionId},
                success: function (data) {
                	if(data.status=="200"){
                		window.clearInterval(c);
                		alert(data.message);
                		location.href = "/";
                	}else{
                		i++;
                		if(i>60){
                			window.clearInterval(c);
                			alert("二维码已失效!请刷新二维码。");
                		}
                	}
                }
        	});
    	}
    }
    
    function wechatLogin(){
    	$.ajax({
            url: "/wechat/wxLoginPage",
            type: "POST",
            success: function (data) {
            	$("#sessionId").val(data.sessionId);
            	
            	var qrcode = new QRCode(document.getElementById("code"), {
                    width : 200,//设置宽高
                    height : 200
                });
                qrcode.makeCode(data.uri);
                c = setInterval(checkLogin,5000);//轮询查询
            }
    	});
    }
    /*]]>*/
    </script>
</head>
<body>
	<shiro:guest>
		<input type="button" value="微信登录" onclick="wechatLogin()" />
	</shiro:guest>
	<shiro:user>
		<shiro:principal property="username" />您已登录。
	</shiro:user>
	
	<input type="hidden" id="sessionId"/>
	<br/><br/><br/><br/>
	<div id="code"></div> 
</body>
</html>

后台controller(@RequestMapping("/wechat"))代码:

//pc点击微信登录,生成登录二维码
    @RequestMapping(value = "/wxLoginPage",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,String> wxLoginPage(HttpServletRequest request) throws Exception {
    	String sessionId = request.getSession().getId();
    	logger.info("sessionId:"+sessionId);
        String uri = weChatAuthService.getAuthorizationUrl("pc",sessionId);//设置redirect_uri和state=sessionId以及测试号信息,返回授权url
        logger.info(uri);
        Map<String,String> map = new HashMap<String,String>();
        map.put("sessionId", sessionId);
        map.put("uri", uri);//用来前端生成二维码
        return map;
    }
    
    //扫描二维码授权成功,取到code,回调方法
    @RequestMapping(value = "/pcAuth")
    @ResponseBody
    public String pcCallback(String code,String state,HttpServletRequest request,HttpServletResponse response) throws Exception {
        String result = weChatAuthService.getAccessToken(code);//根据code获取access_token和openId,不懂看微信文档
        JSONObject jsonObject = JSONObject.parseObject(result);
        
        //String refresh_token = jsonObject.getString("refresh_token");
        String access_token = jsonObject.getString("access_token");
        String openId = jsonObject.getString("openId");
        
        logger.info("------------授权成功----------------");
        JSONObject infoJson = weChatAuthService.getUserInfo(access_token,openId);//根据token和openId获取微信用户信息,不懂看我上一篇文章开始分享的链接
        if(infoJson!=null){
        	String nickname = infoJson.getString("nickName");
            logger.info("-----nickname-----"+nickname);
            logger.info("-----sessionId-----"+state);
            infoJson.put("openId", openId);
            redisTemplate.opsForValue().set(state, infoJson, 10*60, TimeUnit.SECONDS);
            return "登录成功!";
        }
	    return "登录失败!";
    }
//轮询查询key
    @RequestMapping(value="/polling",method=RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> polling(String sessionId,HttpServletRequest request,HttpServletResponse response){
    	Map<String, Object> resultMap = new LinkedHashMap<String, Object>();
    	
    	if(redisTemplate.hasKey(sessionId)){
    		JSONObject infoJson = (JSONObject)redisTemplate.opsForValue().get(sessionId);
    		redisTemplate.opsForValue().getOperations().delete(sessionId);
    		String openId = (String)infoJson.get("openId");
    		//根据openId判断我们网站是否存在该用户,数据库用户表会保存用户
            User user = userService.selectUserByWechat(openId);
            if (user == null) {
            	String nickname = (String)infoJson.get("nickName");
            	String sex = (String)infoJson.get("sex");
            	User newuser = new User();
            	newuser.setSex(sex);
            	newuser.setWechat(openId);
            	newuser.setNickname(nickname);
            	int i = userService.insertUser(newuser);//新增用户
            	if(i<1){
            		resultMap.put("status", 500);
        	        resultMap.put("message", "登录失败:");
        	        return resultMap;
            	}
            }
            //登录操作
    	    try {
    	    	UsernamePasswordToken token = new UsernamePasswordToken(openId, openId);//这里是用shiro登录,反正该openId已经微信扫码验证
    	        SecurityUtils.getSubject().login(token);
    	        resultMap.put("status", 200);
    	        resultMap.put("message", "登录成功");
    	        
    	        //更新用户最后登录时间
    	        Subject  currentUser = SecurityUtils.getSubject(); 
    			User luser = (User) currentUser.getPrincipal();
    	        User user1 = new User();
    	        user1.setId(luser.getId());
    	        user1.setLastLogDate(new Date());
    	        userService.updateUserByIdSelective(user1);//更新用户方法
    	        
    	        
    	    } catch (Exception e) {
    	        resultMap.put("message", "未知系统错误:" + e.getMessage());
    	    }
    	    return resultMap;
    	}else{//not has key
    		resultMap.put("status", 0);
    		return resultMap;
    	}
    }

上一篇文章《微信测试号实现个人第三方PC端网站二维码登录》

到这里就可以实现微信二维码登录我们的个人网站啦~~~~~






查看评论

【微信第三方登录】 解决PC和移动端浏览器同为扫码登录

点击打开链接
  • Smile___you
  • Smile___you
  • 2016-12-01 09:36:48
  • 4391

PC端微信三方登录

第一步: 在微信开放平台申请账号,获取AppID  AppSecret  网址:  https://open.weixin.qq.com/ 第二步:通过appId就可以获取登录二维码,扫描登录获取...
  • u013126379
  • u013126379
  • 2016-12-05 19:39:11
  • 3864

微信网页PC端登录扫二维码登录

最近搞得PC端扫二维码登录,写了个控制器,把方法和注意事项都整理了一下,给大家共同学习下。 先说步骤吧: 1.注册微信开放平台https://open.weixin.qq.com,一定要清楚微信开放平...
  • lihe460186709
  • lihe460186709
  • 2017-03-09 11:04:22
  • 668

java实现简单扫码登录功能(模仿微信网页版扫码)

#java实现简单扫码登录功能jsp+spring+struts2+mybatis:- **模仿微信pc网页版扫码登录** - **使用js代码生成*qrcode*二维码减轻服务器压力** - **j...
  • gentlu
  • gentlu
  • 2017-11-21 14:47:59
  • 6380

微信:实现 pc 端 扫描二维码登陆 的误区

1 首先确认 拥有微信开放平台 账号密码2 使用微信开放平台的 appid secret 而不是开放平台3 调用相关接口:参数 /**      *  pc  端 获取 code      */   ...
  • u014017121
  • u014017121
  • 2016-03-04 15:58:55
  • 1521

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

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

网站接入微信扫二维码登录 (nodejs)

官方文档看这里 网站应用微信登录开发指南 效果图 整个流程图 自定义样式(内嵌入二维码) 如果需要对二维码的样式进行自定义,则需要在实例化WxLogin ...
  • q857277886
  • q857277886
  • 2017-12-03 21:51:43
  • 546

PC端扫码实现微信联合登录

一张图说明问题: 另外,分享下我用的做图软,我用的是mac,没找到好的做图软件,网上找了半天,发现了这个好用的免费在线做图软件,希望能帮助到大家免费在线做图软件...
  • sinat_31257007
  • sinat_31257007
  • 2016-01-26 22:01:32
  • 1812

js 实现网站 第三方 qq 登录

 你需要一个测试的应用(创建完成之后就有appid了)
  • u011662047
  • u011662047
  • 2016-04-12 16:08:06
  • 743

PHP实现微信开放平台扫码登录源码下载

PHP实现微信开放平台扫码登录源码下载 ,刚做的微信开发平台登陆,搞了好久 不多说,演示下载:http://www.erdangjiade.com/php/1034.html 1、首先到微信开...
  • u013032788
  • u013032788
  • 2017-01-10 19:28:31
  • 1218
    个人资料
    持之以恒
    等级:
    访问量: 2083
    积分: 248
    排名: 31万+