[微信开发] - 微信开放平台的扫码登录

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

首先开通微信开放平台,申请网站应用,交钱通过后可以使用appid和appsecret(和公众平台的不同)

之后可以生成扫码登录的二维码了,主要根据开放平台提供的api请求链接和appid,appsecret

<%--
测试首页
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>BBBGGG</title>
</head>
<body>
BBBGGG index
<a href="login">登录集</a>

${snsUser.nickname}
</body>
</html>

下面页面展示3种登录示例:

<%-- Created by IntelliJ IDEA. User: SeeClanUkyo Date: 2018/12/10 Time: 8:41 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>首页</title> <!--BootStrap的样式文件--> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script> <!--微信登录二维码插件js--> <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> 该页面的目的不限于微信登录,还应该包含其它方式登录. snsUser 昵称:${snsUser.nickname} <br> 三种登录方式<br> <div class="center-block"> <button class="btn" id="btn1">用微信登录 全屏二维码</button> <button id="modal-742328" href="#modal-container-742328" role="button" class="btn" data-toggle="modal">微信登录iframe</button> <a class="btn" href="/qrcode">登录/qrcode</a> </div> <hr> 之下为测试 <p>获取code</p> <button id="btn2">获取code</button> token:<p id="token"></p> openid:<p id="openid"></p> <p>获取用户信息</p> <button id="btn3">获取用户信息</button> <P>姓名：</P> <p id="name"></p> <p>头像：</p><img src="" id="img"> <button id="btn4">直接从code获取用户信息</button> <p id="nickname"></p> <!--<div id="login_container"></div>--> <div class="modal fade" id="modal-container-742328" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel"> 微信扫码登录 </h4> </div> <div class="modal-body" style="width:500px;height:500px"> <!--<div id="login_container" style="width:400px;height:400px"></div>--> <iframe class="center" src="qrcode.jsp" style="width:400px;height:400px"></iframe> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> </div> </div> </div> login.jsp <%--<% String code = request.getParameter("code");%>--%> <%--<%= code %>--%> <%--<% Weixin weixin = new Weixin();%>--%> <%--<% SnsUser snsUser = weixin.sns().getSnsUserByCode(code);%>--%> <%--<%=snsUser.getNickname()%>--%> <!-- <button id="btn">btn</button> --> <!-- 通过ajax获取的用户信息封装在data中,可以根据需要获取不同的参数,如 --> <script> //not use // $("#btn").click(getSnsUser); function getSnsUser() { // alert("getSnsUser begin")  $.ajax({ url: "/user/getSnsUserInfoByCode", data: "<%=request.getParameter("code")%>", contentType: "application/json", dataType: "json", method: "POST", success: function (data) { alert(JSON.stringify(data)); //将数据反填到html或jsp页面上  } }); } //not use function getOpenSnsUser() { // alert("getSnsUser begin")  $.ajax({ url: "/user/getOpenSnsUserInfoByCode", data: "<%=request.getParameter("code")%>", contentType: "application/json", dataType: "json", method: "POST", success: function (data) { window.location.href=window.location.host; alert(JSON.stringify(data)); //将数据反填到html或jsp页面上  } }); } </script> <script> // var obj = new WxLogin({  // self_redirect: true, // id: "login_container", // appid: APPID, // scope: "", // redirect_uri: "", // state: "", // style: "", // href: "" // }); </script> <script> //开放平台参数 //开放平台appid var APPID = "wxxxxxxxxxxxxxxxxx"; //开放平台请求作用域 var SCOPE = "snsapi_login"; //回调页面 URL 进行utf cncode var REDIRECT_URI = encodeURIComponent("http://baige.free.idcfengye.com/callback"); //开放平台appsecret //  var STATE = "state"; // 快捷方式 // var obj = new WxLogin({  // self_redirect: true, // id: "login_container", // appid: APPID, // scope: SCOPE, // redirect_uri: REDIRECT_URI, // state: STATE, // style: "", // href: "" // }); //第一步,获取code //用微信登录按钮 var btn1 = $("#btn1"); //微信登录  btn1.click(getOpenCode); function getOpenCode() { alert("getOpenCode"); window.open("https://open.weixin.qq.com/connect/qrconnect?appid=" + APPID + "&redirect_uri=" + REDIRECT_URI + "&response_type=code&scope=" + SCOPE + "&state=STATE#wechat_redirect"); } //第二步,获取access_token var btn2 = $("#btn2"); var btn4 = $("#btn4"); btn4.click(getUserInfoByCode); function getUserInfoByCode(){ alert("getUserInfoByCode begin"); $.ajax({ url: "/user/getOpenSnsUserInfoByCode", // url: "/callBackLogin",  data: "<%=request.getParameter("code")%>", contentType: "application/json", dataType: "json", method: "POST", success: function (data) { alert(JSON.stringify(data)); var nickname = data.SnsUser.nickname; $("#nickname").html(nickname); alert(data.SnsUser.nickname); //将数据反填到html或jsp页面上  } }); } btn2.click(getAccessToken); function getAccessToken() { var CODE = "<%=request.getParameter("code")%>"; var tokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + APPID + "&secret=" + SECRET + "&code=" + CODE + "&grant_type=authorization_code"; $.ajax({ url: tokenUrl, type: "POST", data:{ "":1}, dataType: "json", success: function (data) { alert(JSON.stringify(data)); var token = data.access_token; var openid = data.openid; $("#token").html(token); $("#openid").html(openid); } }) } //第三步,获取用户信息 var btn3 = $("#btn3"); btn3.click(getUserInfo); function getUserInfo() { var token3 = $("#token").html(); var openid3 = $("#openid").html(); var ajaxUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" + token3 + "&openid=" + openid3; $.ajax({ url: ajaxUrl, type: "get", dataType: "JSONP", success: function (data) { alert(JSON.stringify(data)); var name = $("#name"); var img = $("#img"); $(name).html(data.nickname); $(img).attr("src", data.headimgurl); } }) } </script> </body> </html>

调用的callback页面,同时也是回调页面:

<%-- 回调页面 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>callback</title> <script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script> </head> <body> 正在跳转... <script> $.ajax({ // url: "/user/getOpenSnsUserInfoByCode",  url: "/user/callBackLogin", data: "<%=request.getParameter("code")%>", contentType: "application/json", dataType: "json", method: "POST", success: function (data) { if(data===1){ window.location.href="http://baige.free.idcfengye.com"; }else{ window.location.href="http://baige.free.idcfengye.com/error"; } } }); </script> </body> </html>

之下的控制层方法:

package com.baigehuidi.demo.controller; import com.baigehuidi.demo.loader.WeixinInsLoader; import com.baigehuidi.demo.weixin4j.WeixinException; import com.baigehuidi.demo.weixin4j.model.sns.SnsUser; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import javax.servlet.ServletException; import javax.servlet.http.HttpSession; import java.io.IOException; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("/user") public class WeixinUserInfoController { @RequestMapping("/getSnsUserInfoByCode") public Map getSnsUserInfoByCode(@RequestBody String code) throws WeixinException { if(code==null || code==""){ return null; } Map map = new HashMap(); System.out.println("code:"+code); SnsUser snsUser = WeixinInsLoader.getWeixinInstance().sns().getSnsUserByCode(code); map.put("SnsUser",snsUser); return map; } @RequestMapping("/getOpenSnsUserInfoByCode") public Map getOpenSnsUserInfoByCode(@RequestBody String code) throws WeixinException { if(code==null || code==""){ return null; } Map map = new HashMap(); System.out.println("code:"+code); SnsUser snsUser = WeixinInsLoader.getWeixinInstance().open().getOpenSnsUserByCode(code); map.put("SnsUser",snsUser); return map; } //微信扫码登录回调 @RequestMapping("/callBackLogin") public Integer callBackLogin(@RequestBody String code, HttpSession session) throws WeixinException, ServletException, IOException { System.out.println("callback method"); System.out.println("code:"+code); SnsUser snsUser = WeixinInsLoader.getWeixinInstance().open().getOpenSnsUserByCode(code); System.out.println("snsUser:"+snsUser); session.setAttribute("snsUser",snsUser); if(session!=null){ return 1; }else{ return 0; } } }

最终效果: (因为用的内网穿透不太稳定,响应稍慢)

[微信开发] - 微信开放平台的扫码登录

转载于:https://www.cnblogs.com/ukzq/p/10111363.html

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/133353.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

[微信开发] – 微信开放平台的扫码登录

发表回复

[微信开发] – 微信开放平台的扫码登录

相关推荐

eclipse首选项里面没有Server(eclipse的server视图)

React之react-router（connected-react-router/react-router-dom）

罗盘时钟代码[通俗易懂]

dns服务器地址为空,dns服务器地址为空

opencv学习—VideoCapture 类基础知识「建议收藏」

python实现word文档批量转成自定义格式的excel文档

发表回复