java实现微信网页授权登录

java实现微信网页授权登录

开发前的准备:
1.需要有一个公众号(我这里用的测试号),拿到AppID和AppSecret;
申请测试号网址:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
2.进入公众号开发者中心页配置授权回调域名。具体位置:接口权限-网页服务-网页账号-网页授权获取用户基本信息-修改
注意,这里仅需填写全域名(如www.qq.com、www.baidu.com),勿加 http:// 等协议头及具体的地址字段;

我们可以通过使用Ngrok来虚拟一个域名映射到本地开发环境,网址https://www.ngrok.cc/
这里推荐一篇Ngrok的下载使用博客:使用Ngrok进行内网穿透(Windows)
开启内网穿透如下图:
在这里插入图片描述
在测试平台页面也进行设置
在这里插入图片描述
同时拉下去进行网页授权配置
在这里插入图片描述
在这里插入图片描述
同时还需要扫一下这个二维码
在这里插入图片描述

授权步骤:
1、引导用户进入授权页面同意授权,获取code

2、通过code换取网页授权access_token(与基础支持中的access_token不同)

3、通过网页授权access_token和openid获取用户基本信息

在这里插入图片描述
具体请参考: 微信网页授权开发文档

代码实现
先看一下项目结构:
在这里插入图片描述

AuthUtil工具类:

public class AuthUtil {

    public static final String APPID = "wx2937ac88882f085d";
    public static final String APPSECRET = "b5fc16834dc96242a61b070679f3b7fc";
    //回调地址
    public static final String backUrl="http://079af792.ngrok.io/callBack";
    public static JSONObject doGetJson(String url) throws ClientProtocolException, IOException{
        JSONObject jsonObject = null;
        //首先初始化HttpClient对象
        DefaultHttpClient client = new DefaultHttpClient();
        //通过get方式进行提交
        HttpGet httpGet = new HttpGet(url);
        //通过HTTPclient的execute方法进行发送请求
        HttpResponse response = client.execute(httpGet);
        //从response里面拿自己想要的结果
        HttpEntity entity = response.getEntity();
        if(entity != null){
            String result = EntityUtils.toString(entity,"UTF-8");
            jsonObject = jsonObject.fromObject(result);
        }
        //把链接释放掉
        httpGet.releaseConnection();
        return jsonObject;
    }
}

1、引导用户进入授权页面同意授权,获取code

   @RequestMapping(value="wxlogin")
    public void wx(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //第一步:引导用户进入授权页面同意授权,获取code
        StringBuilder builder = new StringBuilder("https://open.weixin.qq.com/connect/oauth2/authorize?appid=");
        builder.append(AuthUtil.APPID);
        builder.append("&redirect_uri=");
        builder.append(URLEncoder.encode(AuthUtil.backUrl));//开发文档要求转换
        builder.append("&response_type=code");
        builder.append("&scope=snsapi_userinfo");
        builder.append("&state=STATE#wechat_redirect");
        //授权页面地址
        //将StringBuilder转换成String
        String url=builder.toString();
        //重定向到授权页面
        response.sendRedirect(url);
    }  

2、通过第一步获取的code换取网页授权access_token和openid
这一步需要在控制器中获取微信回传给我们的code,通过这个code来请求access_token,通过access_token和openid获取用户基本信息:

  @RequestMapping(value="callBack")
    public String wxcallback(@RequestParam("code") String code, Model model)throws IOException {
        System.out.println("code:" + code);
        //获取code后,请求以下链接获取access_token
        StringBuilder builder = new StringBuilder("https://api.weixin.qq.com/sns/oauth2/access_token?appid=");
        builder.append(AuthUtil.APPID);
        builder.append("&secret=");
        builder.append(AuthUtil.APPSECRET);
        builder.append("&code=");
        builder.append(code);
        builder.append("&grant_type=authorization_code");

        //通过网络请求方法来请求上面这个接口
        //将StringBuilder转换成String
        String url=builder.toString();
        JSONObject jsonObject = AuthUtil.doGetJson(url);

        System.out.println("==========================jsonObject" + jsonObject);
        //从返回的JSON数据中取出access_token和openid,拉取用户信息时用
        String token = jsonObject.getString("access_token");
        String openid = jsonObject.getString("openid");

        // 第三步:刷新access_token(如果需要)

        // 第四步:拉取用户信息(需scope为 snsapi_userinfo)
        StringBuilder builder1 = new StringBuilder("https://api.weixin.qq.com/sns/userinfo?access_token=");
        builder1.append(token);
        builder1.append("&openid=");
        builder1.append(openid);
        builder1.append("&lang=zh_CN");
        //通过网络请求方法来请求上面这个接口
        //将StringBuilder转换成String
        String infoUrl=builder1.toString();
        JSONObject userInfo = AuthUtil.doGetJson(infoUrl);

        System.out.println("userInfo=======" + userInfo);

        //第1种情况:使用微信用户信息直接登录,无需注册和绑定
//        model.addAttribute("info",userInfo);
//        return "wx/wxtest1";
//

        //第2种情况:查看数据库是否存在相对应用户
        try {
            Wxuser wxuser = new Wxuser();
            wxuser = wxMapper.findnameByopenId(openid);
            if (wxuser != null) {
                //已绑定
                model.addAttribute("info",userInfo);
                model.addAttribute("name", wxuser.getName());
                return "wx/wxtest2";

            } else {
                //未绑定
                model.addAttribute("openid", openid);
                return "wx/wxtest3";
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "wx/fail";   //跳转到登录失败页面
    }   

数据库查询等操作是使用了mybatis
WxMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.WxMapper">
    <select id="findnameByopenId"   parameterType="String" resultType="com.example.pojo.Wxuser" >
    select name from user where openid = #{value}
  </select>
    <insert id="addWxuser" parameterType="com.example.pojo.Wxuser">
        insert into user(
       openid,name,sex
        )
        values(
        	#{openid},
			#{name},
			#{sex}
        )

    </insert>
</mapper>
  
@Repository
public interface WxMapper {
    public Wxuser findnameByopenId(String openid);
    public void  addWxuser(Wxuser wxuser);
}

前端显示页面是使用thymeleaf模板
wxtest1 无需验证数据库登录成功时的页面

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>登陆成功!</div>
<div>用户昵称:<p th:text="${info.nickname}"></p>}</div>
<div>用户头像:<img  width="100" th:src="${info.headimgurl }"></div>
</body>
</html>  

wxtest2 验证成功后跳转的页面

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>登陆成功!</div>
<div>用户昵称:<font th:text="${info.nickname}"></font></div>
<div>用户头像:<img  width="100" th:src="${info.headimgurl }"></div>
<div>用户姓名:<font  width="100" th:text="${name}"/></div>
</body>
</html>

wxtest3 验证失败进行绑定跳转的页面

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="/addwxuser" method="post">
   姓名: <input type="text" name="name" />
   性别:  <input type="text" name="sex" />
    <input type="hidden" name="openid" th:value="${openid }" />
    <input type="submit" value="提交并绑定" />
</form>
</body>
</html>

整个WxController

@Controller
public class WxController {
    @Autowired
   private WxMapper wxMapper;

    @RequestMapping(value="wxlogin")
    public void wx(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //第一步:引导用户进入授权页面同意授权,获取code
        StringBuilder builder = new StringBuilder("https://open.weixin.qq.com/connect/oauth2/authorize?appid=");
        builder.append(AuthUtil.APPID);
        builder.append("&redirect_uri=");
        builder.append(URLEncoder.encode(AuthUtil.backUrl));//开发文档要求转换
        builder.append("&response_type=code");
        builder.append("&scope=snsapi_userinfo");
        builder.append("&state=STATE#wechat_redirect");
        //授权页面地址
        //将StringBuilder转换成String
        String url=builder.toString();
        //重定向到授权页面
        response.sendRedirect(url);
    }


    @RequestMapping(value="callBack")
    public String wxcallback(@RequestParam("code") String code, Model model)throws IOException {
        System.out.println("code:" + code);
        //获取code后,请求以下链接获取access_token
        StringBuilder builder = new StringBuilder("https://api.weixin.qq.com/sns/oauth2/access_token?appid=");
        builder.append(AuthUtil.APPID);
        builder.append("&secret=");
        builder.append(AuthUtil.APPSECRET);
        builder.append("&code=");
        builder.append(code);
        builder.append("&grant_type=authorization_code");

        //通过网络请求方法来请求上面这个接口
        //将StringBuilder转换成String
        String url=builder.toString();
        JSONObject jsonObject = AuthUtil.doGetJson(url);

        System.out.println("==========================jsonObject" + jsonObject);
        //从返回的JSON数据中取出access_token和openid,拉取用户信息时用
        String token = jsonObject.getString("access_token");
        String openid = jsonObject.getString("openid");

        // 第三步:刷新access_token(如果需要)

        // 第四步:拉取用户信息(需scope为 snsapi_userinfo)
        StringBuilder builder1 = new StringBuilder("https://api.weixin.qq.com/sns/userinfo?access_token=");
        builder1.append(token);
        builder1.append("&openid=");
        builder1.append(openid);
        builder1.append("&lang=zh_CN");
        //通过网络请求方法来请求上面这个接口
        //将StringBuilder转换成String
        String infoUrl=builder1.toString();
        JSONObject userInfo = AuthUtil.doGetJson(infoUrl);

        System.out.println("userInfo=======" + userInfo);

        //第1种情况:使用微信用户信息直接登录,无需注册和绑定
//        model.addAttribute("info",userInfo);
//        return "wx/wxtest1";
//

        //第2种情况:查看数据库是否存在相对应用户
        try {
            Wxuser wxuser = new Wxuser();
            wxuser = wxMapper.findnameByopenId(openid);
            if (wxuser != null) {
                //已绑定
                model.addAttribute("info",userInfo);
                model.addAttribute("name", wxuser.getName());
                return "wx/wxtest2";

            } else {
                //未绑定
                model.addAttribute("openid", openid);
                return "wx/wxtest3";
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "wx/fail";   //跳转到登录失败页面
    }

    @RequestMapping(value="addwxuser")
     public String addWXuser(String name,String openid,String sex){
        Wxuser wxuser = new Wxuser();
        wxuser.setName(name);
        wxuser.setOpenid(openid);
        wxuser.setSex(sex);
        wxMapper.addWxuser(wxuser);
        return "wx/success";//跳转绑定成功页面

    }
}



效果:
在这里插入图片描述
在这里插入图片描述

而实现扫二维码授权登录原理也跟这里差不多。不过需要域名和服务号。
这里推荐一篇实现二维码授权网页登录:
微信开放平台————拼接获取扫码地址

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值