一文学会微信WEB第三方登录

悠悠 2022-11-26 03:59 201阅读 0赞

### 今天给大家分享一下微信WEB第三方登录： ###

# 一、提前工作： #

（提前工作省略，腾讯要你提供什么，你就提供什么就好了。）

## 1.1、申请微信开放平台账号（https://open.weixin.qq.com/）： ##

![file][]

## 1.2、企业开发平台认证 ##

![file][file 1]

## 1.3、创建网站应用，注意网站名称、网站logo这个会给用户直观显示的。 ##

![file][file 2]

## 1.4、完成1.3需要等待审核1-7天，审核成功腾讯会给你提供AppID和AppSecret ##

![file][file 3]

## 1.5、配置回调地址（为了方便本地调试用的花生壳地址，也可以采用其他内网映射外网工具例如：ngrok）： ##

![file][file 4]

# 二、查看微信开放文档pc网站登录流程： #

> 微信文档登录流程：
> 
> 1.  第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
> 2.  通过code参数加上AppID和AppSecret等，通过API换取access\_token；
> 3.  通过access\_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

腾讯官方提供的流程图：

![file][file 5]

# 三、微信提供两种二维码模式（我们来一一叙述）： #

## 第一种（跳转腾讯扫码页面）： ##

![file][file 6]

## 3.1、第一步请求code： ![file][file 7] ##

封装获取code访问URL：

https://open.weixin.qq.com/connect/qrconnect?appid=wxea3axxxxx41a91a&redirect_uri=http://20y85987b7.51mypc.cn/&response_type=code&scope=snsapi_login&state=gd5q4tcr#wechat_redirect

## 3.2、代码演示： ##

![file][file 8]

## service层拼接url参数： ##

![file][file 9]

## postman访问获取用户点击codeURl前端也可以写死，不过不能防止csrf攻击，主要是存放一下state参数： ##

![file][file 10]

## 访问获取code地址: ##

![file][file 11]

## 扫码登录： ##

## ![file][file 12] ##

## 重定向到我们提供给腾讯回调地址并且给我们带过来code以及state参数： ##

![file][file 13]

## 我们拿着临时凭证（code）去获取accessToken以及用户信息： ##

## controller层： ##

![file][file 14]

## service层： ##

![file][file 15]

## postman请求获取用户信息： ##

![file][file 16]

以上就是第一种第三方登录方式。

# 第二种（网站内嵌微信登录二维码） #

![file][file 17]

## 第一步：查阅官方文档： ##

https://developers.weixin.qq.com/doc/oplatform/Website\_App/WeChat\_Login/Wechat\_Login.html

![file][file 18]

## 第二步：写前端代码： ##

![file][file 19]

## 后续步骤和方案1一致： ##

## 登录： ##

![file][file 20]

### 跳转页面获取临时凭证code（第二种方法：state目前没存放session，大家有兴趣可以补一下） ###

![file][file 21]

## 拿着code获取用户信息： ##

![file][file 22]

# 四、分享代码： #

![file][file 23]

## 4.1、pom文件： ##

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.3.2.RELEASE</version>
            <relativePath/> 
        </parent>
        <groupId>cn.cnbuilder.wechat</groupId>
        <artifactId>pc-login</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>pc-login</name>
        <description>Demo project for Spring Boot</description>
    
        <properties>
            <java.version>1.8</java.version>
            
            <WxJava.version>3.3.5.B</WxJava.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter</artifactId>
            </dependency>
    
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>5.1.46</version>
            </dependency>
    
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.0.7.1</version>
            </dependency>
    
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
    
            <dependency>
                <groupId>cn.hutool</groupId>
                <artifactId>hutool-all</artifactId>
                <version>4.1.21</version>
            </dependency>
    
    
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.28</version>
            </dependency>
    
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-jpa</artifactId>
            </dependency>
    
    
            <dependency>
                <groupId>org.apache.commons</groupId>
                <artifactId>commons-lang3</artifactId>
                <version>3.8</version>
            </dependency>
    
        </dependencies>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    </project>

## 4.2、controller： ##

index controller
    package cn.cnbuilder.wechat.webLogin.controller;
    
    import cn.cnbuilder.wechat.webLogin.entity.R;
    import cn.cnbuilder.wechat.webLogin.service.WechatWebLoginService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.*;
    
    import javax.servlet.http.HttpServletRequest;
    
    /**
     * 首页
     * create on 2020/08/07 by kingyifan
     */
    @RestController
    public class IndexController {
    
        @GetMapping(value = "/")
        public String getCreatCodeUrl() {
            return "wechat之web第三方登录工程";
        }
    }
    WechatWebLoginController:
    package cn.cnbuilder.wechat.webLogin.controller;
    
    import cn.cnbuilder.wechat.webLogin.service.WechatWebLoginService;
    import cn.cnbuilder.wechat.webLogin.entity.R;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    import javax.servlet.http.HttpServletRequest;
    /**
     * wechat之web端第三方登录
     * create on 2020/08/07 by kingyifan
     */
    @RestController
    @RequestMapping("/wechat")
    public class WechatWebLoginController {
    
    
        @Autowired
        private WechatWebLoginService wechatWebLoginService;
    
    
        /**
         * 获取生成用户点击之后能获取code的接口
         * 第一步：请求CODE
         * <p>
         * 第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（scope=snsapi_login），
         * 则可以通过在PC端打开以下链接：https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
         * 若提示“该链接无法访问”，请检查参数是否填写错误，如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。
         * 以上摘自-腾讯官方文档 ：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
         *
         * @param request 获取HttpServletRequest中session存放STATE
         *                STATE  用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
         * @return URL 微信登录请求地址
         */
        @GetMapping(value = "/getCreatCodeUrl")
        @ResponseBody
        public R getCreatCodeUrl(HttpServletRequest request) {
            String getCodeUrl = wechatWebLoginService.getCreatCodeUrl(request);
            return R.ok().data(getCodeUrl);
        }
    
    
        /**
         * 通过getCreatCodeUrl方法并且用户授权之后前端页面会拿到code参数，参数会直接拼接在回调地址后面
         * <p>
         * 通过code获取access_token、openid、unionid（当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。）
         *
         * @param request
         * @return
         */
        @GetMapping(value = "/getUserInfoByCode")
        @ResponseBody
        public R getUserInfoByCode(HttpServletRequest request) {
            //true：state是否存放session
            return wechatWebLoginService.getInfoByCode(request);
        }
    }

## 4.3、service: ##

service接口：
    package cn.cnbuilder.wechat.webLogin.service;
    
    import cn.cnbuilder.wechat.webLogin.entity.R;
    
    import javax.servlet.http.HttpServletRequest;
    import java.util.Map;
    
    public interface WechatWebLoginService {
    
        String getCreatCodeUrl(HttpServletRequest request);
    
        R getInfoByCode(HttpServletRequest request );
    
    }
    
    serviceImpl:
    package cn.cnbuilder.wechat.webLogin.service.impl;
    
    import cn.cnbuilder.wechat.webLogin.entity.R;
    import cn.cnbuilder.wechat.webLogin.entity.WeChatUserInfo;
    import cn.cnbuilder.wechat.webLogin.entity.WechatBaseInfo;
    import cn.cnbuilder.wechat.webLogin.mapper.WechatUserInfoMapper;
    import cn.cnbuilder.wechat.webLogin.service.WechatWebLoginService;
    import cn.cnbuilder.wechat.webLogin.utils.WechatWebLoginUtil;
    import cn.hutool.core.util.RandomUtil;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    
    @Service
    public class WechatWebLoginServiceImpl implements WechatWebLoginService {
    
    
        @Autowired
        private WechatUserInfoMapper wechatUserInfoMapper;
    
    
        @Override
        public String getCreatCodeUrl(HttpServletRequest request) {
    
            //state参数：用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
            //第一步生成随机的state参数 该参数可用于防止csrf攻击（跨站请求伪造攻击）
            String state = RandomUtil.randomString(8);
            //第二步存放session
            request.getSession().setAttribute("state", state);
    
            //获取用户点击url可以生成code的链接
            String getCodeUrl = WechatWebLoginUtil.getCodeUrl(state);
            return getCodeUrl;
        }
    
        /**
         * 根据code获取信息
         * 第一步：判断state是否和我们存放的state一致
         * <br>  不一致，则直接返回这是一次非腾讯官方的回调请求。
         * 第二步：判断用户是否同意登录（查看是否有code）
         * <br>  不同意：则直接返回登录失败
         * 第三步：判断code是否有效，是否是腾讯返回的
         * <br>  是：获取信息
         * <br>  否：这是一次无效的登录请求
         *
         * @param request
         */
        @Override
        public R getInfoByCode(HttpServletRequest request) {
            String isSetState = request.getParameter("state");
            //是否存放State
            if (isSetState != null && StringUtils.isNotEmpty(isSetState)) {
                /**
                 * 第一步
                 * 查看state是否和我们存放的一致；
                 */
                //微信给的state
                String wstate = request.getParameter("state");
                //session中的state
                Object sstate = request.getSession().getAttribute("state");
                if (StringUtils.isEmpty(sstate.toString()) || !sstate.equals(wstate)) {
                    return R.error(500, "恶意请求");
                }
            }
    
    
            /**
             *  第二步查看用户是否授权：
             *  用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数
             *  redirect_uri ? code = CODE & state = STATE
             *  若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数
             以上摘自微信官方文檔：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
             */
            //获取腾讯给的code
            String code = request.getParameter("code");
            //判断是否是空的。
            if (StringUtils.isBlank(code) || StringUtils.isEmpty(code)) {
                return R.error(500, "code为空！");
            }
    
            //调用微信通过code获取access_token接口
            WechatBaseInfo wechatBaseInfo = WechatWebLoginUtil.getBaseInfoByCode(code);
            if (wechatBaseInfo.getErrcode() != null) {
                return R.error(500, wechatBaseInfo.getErrmsg());
            }
    
            //获取到基础开发信息之后，判断用户信息在db是否完整
            QueryWrapper<WeChatUserInfo> queryWrapper = new QueryWrapper<>();
            queryWrapper.eq("openid", wechatBaseInfo.getOpenid());
            WeChatUserInfo dWeChatUserInfo = wechatUserInfoMapper.selectOne(queryWrapper);
            //用户信息不存在
            if (dWeChatUserInfo != null) {
                //如果db存在则直接返回，如果怕用户更改了资料也可以重新走一下获取用户信息接口
                return R.ok().data(dWeChatUserInfo);
            }
            //获取基础信息获取用户信息
            WeChatUserInfo wechatUserInfo = WechatWebLoginUtil.getUserInfoByOpenid(wechatBaseInfo);
            if (wechatUserInfo == null) {
                return R.error(500, "用户信息获取失败！");
            }
            wechatUserInfoMapper.insert(wechatUserInfo);
            return R.ok().data(wechatUserInfo);
        }
    }

## 4.4、工具类： ##

package cn.cnbuilder.wechat.webLogin.utils;
    
    import cn.cnbuilder.wechat.webLogin.entity.WeChatUserInfo;
    import cn.cnbuilder.wechat.webLogin.entity.WechatBaseInfo;
    import cn.hutool.http.HttpUtil;
    import cn.hutool.json.JSONObject;
    import cn.hutool.json.JSONUtil;
    import org.apache.commons.lang3.StringUtils;
    
    /**
     * 微信第三方web登录工具类
     * create on 2020.08.07 by kingyifan
     */
    public class WechatWebLoginUtil {
    
    
        //微信开放平台申请pc应用开发密钥 可以后期弄到配置文件动态获取
        public static String APPID = "xxxxxxxxx";
        public static String APPSECRET = "xxxxxxxxx";
    
        //-------------------------------------微信第三方登录信息------------------------------------------------//
        //获取codeurl下面是固定的
        public static String GETCODEURL = "https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";
    
        //微信回调地址(这个地址可以说是前端页面,这个地址腾讯回调过来会在后面拼code参数)
        public static String REDIRECTURI = "http://20y85987b7.51mypc.cn/";
    
        //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login
        public static String SCOPE = "snsapi_login";
    
    
        // 获取access_token 通过code获取access_token
        public static String ACCESSTOKENURL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";
    
        //根据openid获取用户信息接口地址
        public static String USERINFOURL = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID";
    
        /**
         * 拼接获取code的:接口地址
         *
         * @param state 随机数 防止csrf攻击（跨站请求伪造攻击）
         * @return
         */
        public static String getCodeUrl(String state) {
            //替换appId、回调url 以及state参数
            return GETCODEURL.replace("APPID", APPID).replace("REDIRECT_URI", REDIRECTURI).replace("SCOPE", SCOPE).replace("STATE", state);
        }
    
        /**
         * 根据code获取用户基础开发信息、AccessToken、openId、unionId、refreshToken
         *
         * @param code 临时授权凭证
         * @return
         */
        public static WechatBaseInfo getBaseInfoByCode(String code) {
    
            //基础信息实体类
            WechatBaseInfo wechatBaseInfo = new WechatBaseInfo();
    
            //拼接获取access_token的请求地址
            String accessTokenUrl = ACCESSTOKENURL.replace("APPID", APPID).replace("SECRET", APPSECRET).replace("CODE", code);
            //發送请求获取基础开发信息
            String getResponseInfo = HttpUtil.get(accessTokenUrl);
            if (StringUtils.isEmpty(getResponseInfo)) {
                wechatBaseInfo.setErrcode(-1);
                wechatBaseInfo.setErrmsg("错误请求");
                return wechatBaseInfo;
            }
            //把请求结果转成json对象
            JSONObject reObject = JSONUtil.parseObj(getResponseInfo);
            //判断是否有异常 比如code失效。。。。
            if (reObject.getInt("errcode") != null) {
                /**
                 *  错误返回样例:
                 *  {
                 *     "errcode":40029,
                 *     "errmsg":"invalid code"
                 * }
                 */
                wechatBaseInfo.setErrcode(reObject.getInt("errcode"));
                wechatBaseInfo.setErrmsg(reObject.getStr("errmsg"));
                return wechatBaseInfo;
            } else {
                /**
                 *正确的返回：
                 * {
                 * "access_token":"ACCESS_TOKEN",
                 * "expires_in":7200,
                 * "refresh_token":"REFRESH_TOKEN",
                 * "openid":"OPENID",
                 * "scope":"SCOPE",
                 * "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
                 * }
                 */
                //接口调用凭证
                wechatBaseInfo.setAccess_token(reObject.getStr("access_token"));
                //access_token接口调用凭证超时时间，单位（秒）
                wechatBaseInfo.setExpires_in(reObject.getStr("expires_in"));
                //用户刷新access_token
                wechatBaseInfo.setRefresh_token(reObject.getStr("refresh_token"));
                // 	授权用户唯一标识
                wechatBaseInfo.setOpenid(reObject.getStr("openid"));
                //用户授权的作用域，使用逗号（,）分隔
                wechatBaseInfo.setScope(reObject.getStr("scope"));
                // unionid 当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。
                wechatBaseInfo.setUnionid(reObject.getStr("unionid"));
                return wechatBaseInfo;
            }
        }
    
        /**
         * 根据基础开发信息获取用户信息
         *
         * @param wechatBaseInfo
         * @return
         */
        public static WeChatUserInfo getUserInfoByOpenid(WechatBaseInfo wechatBaseInfo) {
    
            WeChatUserInfo weChatUserInfo = new WeChatUserInfo();
    
            //拼接获取userinfo的请求地址
            String userInfoUrl = USERINFOURL.replace("ACCESS_TOKEN", wechatBaseInfo.getAccess_token()).replace("OPENID", wechatBaseInfo.getOpenid());
    
            //發送请求获取用户信息
            String getResponseInfo = HttpUtil.get(userInfoUrl);
            if (StringUtils.isEmpty(getResponseInfo)) {
                weChatUserInfo.setErrcode(-1);
                weChatUserInfo.setErrmsg("错误请求");
                return weChatUserInfo;
            }
            //把请求结果转成json对象
            JSONObject reObject = JSONUtil.parseObj(getResponseInfo);
    
            //判断是否有异常 比如无效的openId
            if (reObject.getInt("errcode") != null) {
                /**
                 * 错误的Json返回示例:
                 * {
                 *     "errcode":40003,
                 *     "errmsg":"invalid openid"
                 * }
                 */
                weChatUserInfo.setErrcode(reObject.getInt("errcode"));
                weChatUserInfo.setErrmsg(reObject.getStr("errmsg"));
                return weChatUserInfo;
            } else {
                //普通用户的标识，对当前开发者帐号唯一
                weChatUserInfo.setOpenid(reObject.getStr("openid"));
                //普通用户昵称
                weChatUserInfo.setNickname(reObject.getStr("nickname"));
                //普通用户性别，1为男性，2为女性
                weChatUserInfo.setSex(reObject.getInt("sex"));
                // 	普通用户个人资料填写的省份
                weChatUserInfo.setProvince(reObject.getStr("province"));
                //普通用户个人资料填写的城市
                weChatUserInfo.setCity(reObject.getStr("city"));
                //国家，如中国为CN
                weChatUserInfo.setCountry(reObject.getStr("country"));
                //TODO 请注意，在用户修改微信头像后，旧的微信头像URL将会失效，因此开发者应该自己在获取用户信息后，将头像图片保存下来，避免微信头像URL失效后的异常情况。 这里需要下载用户头像然后保存到自己的服务器 这一步省略。。。
                //用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
                weChatUserInfo.setHeadimgurl(reObject.getStr("headimgurl"));
                // 	用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
                weChatUserInfo.setPrivilege(reObject.getJSONArray("privilege").toString());
                //用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。
                weChatUserInfo.setUnionid(reObject.getStr("unionid"));
                return weChatUserInfo;
            }
    
        }
    }

## 4.5、实体类： ##

R：统一返回实体：
    package cn.cnbuilder.wechat.webLogin.entity;
    
    import java.util.HashMap;
    import java.util.Map;
    
    
    public class R extends HashMap<String, Object> {
    
        private static final long serialVersionUID = -8713837118340960775L;
    
        public R() {
            put("code", 200);
            put("msg", "success");
        }
    
        public static R error() {
            return error(500, "未知异常，请联系管理员");
        }
    
        public static R error(String msg) {
            return error(500, msg);
        }
    
        public static R error(int code, String msg) {
            R r = new R();
            r.put("code", code);
            r.put("msg", msg);
            return r;
        }
    
        public static R ok(String msg) {
            R r = new R();
            r.put("msg", msg);
            return r;
        }
    
        public static R ok(Map<String, Object> map) {
            R r = new R();
            r.putAll(map);
            return r;
        }
    
        public static R ok() {
            return new R();
        }
    
    
        public R message(String message) {
            this.put("message", message);
            return this;
        }
    
    
        public R data(Object data) {
            this.put("data", data);
            return this;
        }
    
        @Override
        public R put(String key, Object value) {
            super.put(key, value);
            return this;
        }
    
        public String getMessage() {
            return String.valueOf(get("message"));
        }
    
        public Object getData() {
            return get("data");
        }
    
    
        public Integer getCode() {
            return (Integer) get("code");
        }
    }
    微信第三方登录基础开发信息：
    package cn.cnbuilder.wechat.webLogin.entity;
    
    import lombok.Data;
    
    /**
     * 微信web登录基础开发信息
     * 文档地址：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
     */
    @Data
    public class WechatBaseInfo {
    
        /**
         * 接口调用凭证
         */
        private String access_token;
    
        /**
         * access_token接口调用凭证超时时间，单位（秒）
         */
        private String expires_in;
    
        /**
         * 用户刷新access_token
         */
        private String refresh_token;
    
        /**
         * 授权用户唯一标识
         */
        private String openid;
    
        /**
         * 用户授权的作用域，使用逗号（,）分隔
         */
        private String scope;
    
        /**
         * 当且仅当该移动应用已获得该用户的userinfo授权时，才会出现该字段
         */
        private String unionid;
    
        /**
         * 错误编码
         */
        private Integer errcode;
    
        /**
         * 错误信息
         */
        private String errmsg;
    
    }
    用户信息实体：
    package cn.cnbuilder.wechat.webLogin.entity;
    
    import com.baomidou.mybatisplus.annotation.TableField;
    import com.baomidou.mybatisplus.annotation.TableName;
    import lombok.Data;
    
    import javax.persistence.Table;
    import javax.persistence.Transient;
    import javax.persistence.criteria.CriteriaBuilder;
    
    @Data
    @TableName("wechat_userinfo")
    public class WeChatUserInfo {
    
        /**
         * 普通用户的标识，对当前开发者帐号唯一
         */
        private String openid;
    
        /**
         * 普通用户昵称
         */
        private String nickname;
    
        /**
         * 普通用户性别，1为男性，2为女性
         */
        private Integer sex;
    
        /**
         * 普通用户个人资料填写的省份
         */
        private String province;
    
        /**
         * 普通用户个人资料填写的城市
         */
        private String city;
    
        /**
         * 国家，如中国为CN
         */
        private String country;
    
        /**
         * 用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
         */
        private String headimgurl;
    
        /**
         * 用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
         */
        private String privilege;
    
        /**
         * 用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。
         */
        private String unionid;
    
        /**
         * 错误编码
         */
        @TableField(exist = false)
        private Integer errcode;
    
        /**
         * 错误信息
         */
        @TableField(exist = false)
        private String errmsg;
    
    }

## 4.6、mapper文件： ##

package cn.cnbuilder.wechat.webLogin.mapper;
    
    import cn.cnbuilder.wechat.webLogin.entity.WeChatUserInfo;
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import org.apache.ibatis.annotations.Mapper;
    
    @Mapper
    public interface WechatUserInfoMapper extends BaseMapper<WeChatUserInfo> {
    }
    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="cn.cnbuilder.wechat.webLogin.mapper.WechatUserInfoMapper">
    
    </mapper>

## 4.7、启动类： ##

package cn.cnbuilder.wechat.webLogin;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    public class PcLoginApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(PcLoginApplication.class, args);
        }
    
    }

## 4.8、配置文件： ##

application.yml文件：
    spring:
      profiles:
        active: dev #选择要用那个配置文件
    	
    application-dev.yml文件：
    #端口号访问路径
    server:
      port: 12008
      servlet:
        context-path: /
    #spring
    spring:
      devtools:
        restart:
          enabled: true
      # mysql 配置
      datasource:
        driver-class-name: com.mysql.jdbc.Driver
        type: com.zaxxer.hikari.HikariDataSource
        url: jdbc:mysql://127.0.0.1/wechat_weblogin?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
        username: root
        password: root
        hikari:
          ## 最小空闲连接数量
          minimum-idle: 5
          ## 空闲连接存活最大时间，默认600000（10分钟）
          idle-timeout: 180000
          ## 连接池最大连接数，默认是10
          maximum-pool-size: 10
          ## 此属性控制从池返回的连接的默认自动提交行为,默认值：true
          auto-commit: true
          ## 连接池名称
          pool-name: MyHikariCP
          ## 此属性控制池中连接的最长生命周期，值0表示无限生命周期，默认1800000即30分钟
          max-lifetime: 1800000
          ## 数据库连接超时时间,默认30秒，即30000
          connection-timeout: 30000
          ## 监听是否存活
          connection-test-query: SELECT 1
      servlet:
        multipart:
          enabled: true
          max-file-size: -1
    
    #mybatis
    mybatis-plus:
      mapper-locations: classpath:/mapper/*Mapper.xml
      #实体扫描，多个package用逗号或者分号分隔
      typeAliasesPackage: cn.cnbuilder.wechat.webLogin.entity
      global-config:
        # 数据库相关配置
        db-config:
          #主键类型  AUTO:"数据库ID自增", INPUT:"用户输入ID",ID_WORKER:"全局唯一ID (数字类型唯一ID)", UUID:"全局唯一ID UUID";
          id-type: id_worker
          #字段策略 IGNORED:"忽略判断",NOT_NULL:"非 NULL 判断"),NOT_EMPTY:"非空判断"
          field-strategy: not_empty
          #驼峰下划线转换
          column-underline: true
          #数据库大写下划线转换
          #      capital-mode: true
          #逻辑删除配置
          logic-delete-value: 0
          logic-not-delete-value: 1
        #刷新mapper 调试神器
        refresh: true
      # 原生配置
      configuration:
        map-underscore-to-camel-case: true
        cache-enabled: false

## 4.9、sql： ##

CREATE TABLE `wechat_userinfo` (
      `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
      `openid` varchar(32) DEFAULT '' COMMENT '普通用户的标识，对当前开发者帐号唯一',
      `nickname` varchar(50) DEFAULT '' COMMENT '普通用户昵称',
      `sex` int(2) DEFAULT '0' COMMENT '普通用户性别，1为男性，2为女性',
      `province` varchar(30) DEFAULT '' COMMENT ' 普通用户个人资料填写的省份',
      `city` varchar(30) DEFAULT '' COMMENT '普通用户个人资料填写的城市',
      `country` varchar(30) DEFAULT '' COMMENT '国家，如中国为CN',
      `headimgurl` varchar(200) DEFAULT '' COMMENT '用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空',
      `privilege` varchar(20) DEFAULT '' COMMENT '用户特权信息，json数组，如微信沃卡用户为（chinaunicom）',
      `unionid` varchar(32) DEFAULT '' COMMENT '用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。',
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;

## 4.10、前端代码： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    	</head>
    	<body>
    	 <h2>KingYiFan微信第三方登录测试之内嵌二维码</h2>
    	 <div id="login_container"></div>
    	</body>
    	<script>
    		var obj = new WxLogin({
    			  self_redirect:false,
    			  id:"login_container", 
    			  appid: "wxeaxxxxxxx41a91a", 
    			  scope: "snsapi_login", 
    			  redirect_uri: "http://20y85987b7.51mypc.cn",
    			  state: "",
    			  style: "black",
    			  href: "http://127.0.0.1:8848/yifantest/css/wechatLogin.css"
    			});
    	</script>
    </html>
    css样式：
    .impowerBox .qrcode {width: 200px;}
    .impowerBox .title {display: none;}
    .impowerBox .info {width: 200px;}
    .impowerBox .status {text-align: center;}

终、、以上就是web微信第三方登录 代码下载地址：[https://download.csdn.net/download/weixin\_39984161/12701680][https_download.csdn.net_download_weixin_39984161_12701680]

--------------------

[file]: /images/20221124/e89f7c2242ad4c068dde728d6e2de816.png
[file 1]: /images/20221124/bfe1e6bb84cd48d4886f8c0d693c2340.png
[file 2]: /images/20221124/c99bd3b9f34e42b4a2797760afa4a003.png
[file 3]: /images/20221124/ac81bc0cae8c44cb822d2c3100813171.png
[file 4]: /images/20221124/fbeb7681ea694e4cb46ea1eeb0594819.png
[file 5]: /images/20221124/77e8c7a2316d485bb7fd25c5ad1aee01.png
[file 6]: /images/20221124/0deee0b4dd1144cfafde6c5fb7545982.png
[file 7]: /images/20221124/08a33f3c4ca2496f89bdd1dd636d5b48.png
[file 8]: /images/20221124/889ad49a2934403188dc96416943e53c.png
[file 9]: /images/20221124/f5475115e6734f829fe8a1358168a2b6.png
[file 10]: /images/20221124/68845523e4b247968865efbc7d38620c.png
[file 11]: /images/20221124/bc5e68df9cbb42d7bb2832bb4b4ddb87.png
[file 12]: /images/20221124/ab71c2242af94c72a973721d46ff5588.png
[file 13]: /images/20221124/bda3d6a425244c8eb13a793130e544af.png
[file 14]: /images/20221124/7df0f1b8e1be4caeb794bfb9cb7781eb.png
[file 15]: /images/20221124/7917f5ab1c884eef9d9e36affccb9a3b.png
[file 16]: /images/20221124/793aa01646ba48e49908f06ba807f4ae.png
[file 17]: /images/20221124/f9fad7d1fd994a7b96e32ec007247770.png
[file 18]: /images/20221124/21ac9dd33a644092b25f4c2b45fbee57.png
[file 19]: /images/20221124/53e757ff15d0419898338ca71381e456.png
[file 20]: /images/20221124/620070caf79b4ae286d96eb8456ebbc0.png
[file 21]: /images/20221124/b00b586c8d88400fa14a11ed6ad34441.png
[file 22]: /images/20221124/886c2337f17b4d76a5929987c46231ec.png
[file 23]: /images/20221124/01c33907d3684f4f9a837a7953c3dcd7.png
[https_download.csdn.net_download_weixin_39984161_12701680]: https://download.csdn.net/download/weixin_39984161/12701680