java之学习记录 8 - 1 - vue+java 微信扫码登陆

最新推荐文章于 2023-12-26 10:14:09 发布

dear_Zzzx

最新推荐文章于 2023-12-26 10:14:09 发布

阅读量449

点赞数 2

分类专栏： java vue

本文链接：https://blog.csdn.net/dear_zx/article/details/114481033

版权

java 同时被 2 个专栏收录

105 篇文章 1 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

vue前端

解决扫码登录二维码在谷歌浏览器的bug跳转

vue 项目安装

微信官方提供的生成二维码的js

npm install vue-wxlogin

如果不是vue的项目，可以直接引用官方提供的js文件，来生成二维码

vue页面引入

    <wxlogin
        id="wxLoginForm"
        style="display:none"
        :appid="appid"
        :scope="scope"
        :redirect_uri="redirect_uri"
      ></wxlogin>

<script>
  import wxlogin from "vue-wxlogin";
  name: "Header",
  components: {
    wxlogin // 声明引用组件
  },
  data() {
    return {
       appid: "", // 应用唯一标识，在微信开放平台提交应用审核通过后获得
       scope: "", // 应用授权作用域，网页应用目前仅填写snsapi_login即可
       redirect_uri: "", // 重定向地址 （回调地址）
    };
  },
  methods: {
    // 点击微信登录调用方法
     goToLoginWX() {
      // 普通的登录表单隐藏
      document.getElementById("loginForm").style.display = "none";
      // 显示二维码
      document.getElementById("wxLoginForm").style.display = "block";
    },
  }
</script>

java后端

依赖（ 引入时遇到问题，将资源包相应的包文件删除，重新下载导入我用的是idea 自动导入 ）

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <scope>provided</scope>
            <version>2.5</version>
        </dependency>
        <!-- 需要使用HttpClient发出请求 -->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.12</version>
        </dependency>

封装 HttpClient

package commons;

import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.utils.URIBuilder;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;

import java.io.IOException;
import java.net.URI;
import java.net.URISyntaxException;
import java.util.Map;

/**
 * httpclient的封装工具类
 */
public class HttpClientUtil {
    public static String doGet(String url){
        return doGet(url,null);
    }
    /**
     * get请求，支持request请求方式，不支持restful方式
     * @param url 请求地址
     * @param param 参数
     * @return token 令牌
     */
    public static String doGet(String url, Map<String,String> param){
        // 创建httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();
        String resultString = "";
        CloseableHttpResponse response = null;
        try {
            // 创建url
            URIBuilder builder = new URIBuilder(url);
            if (param!=null){
                // 在url后面拼接请求参数
                for (String key : param.keySet()) {
                    builder.addParameter(key,param.get(key));
                }
            }
            URI uri = builder.build();

            // 创建http get请求
            HttpGet httpGet = new HttpGet(uri);
            // 执行请求
            response = httpClient.execute(httpGet);
            // 从响应对象中获取状态码（成功或失败的状态）
            int statusCode = response.getStatusLine().getStatusCode();
            System.out.println("响应的状态"+statusCode);
            // 200 表示响应成功
            if (statusCode == 200){
                // 响应的内容字符串
                resultString = EntityUtils.toString(response.getEntity(), "UTF-8");
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if(response != null){
                    response.close();
                }
                httpClient.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return resultString;
    }
}

定义从微信返回的数据对象

package entity;

/**
 * 令牌实体类
 */
public class Token {
    private String access_token;//	接口调用凭证
    private String expires_in;//	access_token接口调用凭证超时时间，单位（秒）
    private String refresh_token;//	用户刷新access_token
    private String openid;//	授权用户唯一标识
    private String scope;//	用户授权的作用域，使用逗号（,）分隔
    private String unionid;//	当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。

    public Token() {
    }

    public String getAccess_token() {
        return access_token;
    }

    // get set
}

package entity;

/*
* 微信用户信息
* */
public class WxUserInfo {
    private String openid;//	普通用户的标识，对当前开发者帐号唯一
    private String nickname;//	普通用户昵称
    private String sex;//	普通用户性别，1为男性，2为女性
    private String province;//	普通用户个人资料填写的省份
    private String city;//	普通用户个人资料填写的城市
    private String country;//	国家，如中国为CN
    private String headimgurl;//	用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
    private String privilege;//	用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
    private String unionid;//	用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。

    public WxUserInfo() {
    }

    public WxUserInfo(String openid, String nickname, String sex, String province, String city, String country, String headimgurl, String privilege, String unionid) {
        this.openid = openid;
        this.nickname = nickname;
        this.sex = sex;
        this.province = province;
        this.city = city;
        this.country = country;
        this.headimgurl = headimgurl;
        this.privilege = privilege;
        this.unionid = unionid;
    }

    // get set
}

回调函数controller

public class WxLoginController {

    @Reference // 远程消费
    private UserService userService;

    @GetMapping("wxlogin")
    public Object wxlogin(HttpServletRequest request, HttpServletResponse response) throws IOException {
      // 微信官方发给我们一个临时凭证
        String code = request.getParameter("code");
        System.out.println(code);
        // 通过code，去微信官方申请一个正式的token令牌
        String getTokenByCodeUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=wxd99431bbff8305a0&secret=60f78681d063590a469f1b297feff3c4&code="+code+"&grant_type=authorization_code";
        String tokenString = HttpClientUtil.doGet(getTokenByCodeUrl);
        System.out.println(tokenString);
        // 将json格式的token字符串转换成实体对象，方便存和取
        Token token = JSON.parseObject(tokenString, Token.class);

        // 通过token。去微信官方获取用户的信息
        String getUserByTokenUrl = "https://api.weixin.qq.com/sns/userinfo?access_token="+token.getAccess_token()+"&openid="+token.getOpenid();
        String userInfoString = HttpClientUtil.doGet(getUserByTokenUrl);
        System.out.println(userInfoString);
        // 将json格式的user字符串转换成实体对象，方便存取
        WxUserInfo wxUserInfo = JSON.parseObject(userInfoString, WxUserInfo.class);
        System.out.println("微信昵称："+wxUserInfo.getNickname());
        System.out.println("微信头像："+wxUserInfo.getHeadimgurl());

        // 上面代码只是获取到了微信用户信息 后需须添加自己项目登录的流程
        
        /**
        * 登录流程
        */


        return user;
    }
}

web服务的端口号必须是80！

dear_Zzzx

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java之学习记录 8 - 1 - vue+java 微信扫码登陆

vue前端解决扫码登录二维码在谷歌浏览器的bugvue项目安装微信官方提供的生成二维码的js npm install vue-wxlogin如果不是vue的项目，可以直接引用官方提供的js文件，来生成二维码 vue页面引入 <wxlogin id="wxLoginForm" style="display:none" :appid="appid" :scope="scope" ..
复制链接

扫一扫