微信登录

最新推荐文章于 2022-03-23 22:22:47 发布

喝茶一族

最新推荐文章于 2022-03-23 22:22:47 发布

阅读量249

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_44259829/article/details/109491614

版权

微信登录

前端HTML的代码

<button class="btn" @click="wxLogin">微信扫码登录</button>

js代码

wxLogin(){
	location.href = "/to_wxLogin";
}

在resource文件夹中新建application-login.yml

# 微信登录回调域
wx:
  redirect_uri: http://xb.dfbz.com/

  # 微信应用AppID
  appId: XXXXXXXX

  # 微信应用AppSecret
  appSecret: XXXXXXXX

在application.yml激活application-login.yml配置文件：

spring:
  profiles:
    active: login      # 激活application-login.yml

编写WxLoginController处理微信登录请求：

package com.zhl.xbshopping.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zhl.xbshopping.entity.Result;
import com.zhl.xbshopping.entity.SysUser;
import com.zhl.xbshopping.service.UserService;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.net.URLEncoder;
import java.nio.charset.Charset;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import java.util.concurrent.TimeUnit;

@RestController
public class WxLoginController {

    @Value("${wx.appId}")
    private String appId;

    @Value("${wx.appSecret}")
    private String appSecret;

    @Value("${wx.redirect_uri}")
    private String redirect_uri;

    @Autowired
    private HttpServletResponse response;

    @Autowired
    HttpServletRequest request;

    @Autowired
    UserService userService;

    @Autowired
    HttpSession session;

    @Autowired
    RedisTemplate redisTemplate;

    @RequestMapping("/to_wxLogin")
    public void to_wxLogin() throws Exception {

        //Step1：获取Authorization Code（跳转获取登录二维码）
        String url = "https://open.weixin.qq.com/connect/qrconnect?response_type=code" +
                "&appid=" + appId +
                "&redirect_uri=" + URLEncoder.encode(redirect_uri) +
                "&scope=snsapi_login";

        // 重定向到微信登录指定的地址进行微信登录授权,授权成功后返回code
        response.sendRedirect(url);
    }
    
	/**
	 * 用户确认授权之后的操作
	 * @throws IOException
	 */
    @RequestMapping("/wx_login")
    public void wx_login() throws IOException {

        // 用户扫码成功后携带过来的code
        String code = request.getParameter("code");

        String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appId +
                "&secret=" + appSecret +
                "&code=" + code +
                "&grant_type=authorization_code";

        // 获取AccessToken、openid等数据
        HashMap info = auth(url);

        System.out.println("info: " + info);
        url = "https://api.weixin.qq.com/sns/userinfo?access_token=" + info.get("access_token") +
                "&openid=" + info.get("openid");


        HashMap userInfo = getUserInfo(url);
        System.out.println("userInfo: " + userInfo);

        // 根据微信的openid查询此用户原来有没有使用过微信登录
        SysUser user = userService.findByWxOpenid(info.get("openid").toString());

        // 说明该用户是第一次使用微信登录
        if (user == null) {
            // 获取用户信息
            HashMap jsonObject = getUserInfo(url);

            user = new SysUser();

            // 用户的头像
            user.setUserPic(jsonObject.get("headimgurl").toString());

            // 性别
            user.setUserSex((Integer) jsonObject.get("sex"));
            // 用户的昵称
            user.setUserRealname(jsonObject.get("nickname").toString());

            // 随机用户名(11位随机字符串)
            user.setUserName(UUID.randomUUID().toString().substring(36 - 15));

            // 注册时间为当前时间
//            user.setRegisterTime(new Date());

            user.setWxOpenid(info.get("openid").toString());
            // 注册一个新的用户
            userService.save(user);

            user = userService.findByWxOpenid(info.get("openid").toString());
        }

        session.setAttribute("userId", user.getUserId());

        // 修改登录时间
//        userService.updateLoginTime(user.getId());
        redisTemplate.opsForValue().set("loginUser:" + user.getUserId(), user, 7, TimeUnit.DAYS);

        response.sendRedirect("/info.html");
    }

	/**
	 *  获取用户信息
	 * @return
	 * @throws IOException
	 */
    @PostMapping("/getWxLoginInfo")
    public Result getWxLoginInfo() throws IOException {

        Object userId = session.getAttribute("userId");

        Map returnMap = new HashMap<>();

        returnMap.put("loginUser", redisTemplate.opsForValue().get("loginUser:" + userId));
        returnMap.put("userId", userId);

        return new Result(true, "获取微信登录信息成功", returnMap);
    }


	/**
	 * 认证
	 * 获取AccessToken、openid等数据
	 * @param url
	 * @return
	 */
    private HashMap auth(String url) {

        try {
            // 创建一个http Client请求
            CloseableHttpClient client = HttpClients.createDefault();

            HttpGet httpGet = new HttpGet(url);

            HttpResponse response = client.execute(httpGet);
            HttpEntity entity = response.getEntity();       // 获取响应数据(json)

            if (entity != null) {
                String result = EntityUtils.toString(entity, Charset.forName("UTF8"));
                return new ObjectMapper().readValue(result, HashMap.class);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

	/**
	 * 请求微信对外提供的接口获取用户信息
	 * @param url
	 * @return
	 */
    private HashMap getUserInfo(String url) {

        try {
            CloseableHttpClient client = HttpClients.createDefault();

            HttpGet httpGet = new HttpGet(url);

            CloseableHttpResponse response = client.execute(httpGet);

            HttpEntity entity = response.getEntity();

            if (entity != null) {
                String result = EntityUtils.toString(entity, Charset.forName("UTF8"));

                ObjectMapper mapper = new ObjectMapper();
                return mapper.readValue(result, HashMap.class);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

UserService 层的代码

public interface UserService {
SysUser findByWxOpenid(String openid);
}

UserServiceImpl 层的代码

@Service
public class UserServiceImpl implements UserService {

 @Autowired
    UserDao userDao;

 @Override
    public SysUser findByWxOpenid(String openid) {
        return userDao.findByWxOpenid(openid);
    }
}

UserDao 的代码

public interface UserDao extends JpaRepository<SysUser,Integer> {
	SysUser findByWxOpenid(String openid);
}

info.html的代码

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/vue-2.6.11.js"></script>
<script src="js/axios-0.19.2.min.js"></script>
<script src="js/layer.js"></script>
<!--<script src="../js/jquery-cookie-1.4.1.js"></script>-->
<script>
    $(function () {
        new Vue({
            data: {},
            methods: {
                getWxLoginInfo() {
                    axios.post("/getWxLoginInfo").then((res) => {
                        if (res.data.flag) {
                            // 免密登录处理
                            $.cookie("userId", res.data.data.userId, {path: "/", expires: 7})

                            // 存储到localStorage中
                            localStorage.setItem("loginUser", JSON.stringify(res.data.data.loginUser))

                            // 跳转到首页
                            location.href = '/home.html';
                        } else {
                            layer.msg(res.data.message)
                        }
                    })
                }
            },
            created() {
                this.getWxLoginInfo();
            }
        })
    })
</script>
</body>
</html>

接下来就是配置nginx方向代理了，
代理的概念：我要去租房，但我不想一家一家的去找，然后，找中介进行代理一下，帮我去找房源，找房东，所以，代理就相当于中介的位置
代理有正向代理也有反向代理
正向代理：就相当于我是客户端，房东是服务端，中介就是正向代理了，举个例子，我们访问不了Google，但美国人可以访问到，于是，我们就想把我们电脑的IP地址变成美国的IP地址，所以，我们访问谷歌之前，先连上VPN服务器将我们IP地址变成美国IP地址，然后就可以访问了，VPN就是做正向代理的
在这里插入图片描述
反向代理：就是正向代理反过来，把方向代理服务器和真实资源服务器对外就是一个服务器，暴露的是代理服务器的地址，隐藏保护真实的服务器IP地址（真正服务器不能让外人随便就访问的，万一人家对你的服务器动了什么手脚，你这个服务器跑不了，那这个项目就凉了）

在这里插入图片描述
先查看映射，如果没有，就参考下面改配置

我是以我的案例做的，到时候，你们参考你们自己的东西，自己改，hosts配置文件一开始是改不了的，先查看它的属性，去掉只读，然后，把它拖到桌面，用记事本进行修改保存，改完之后，在拖回来
在这里插入图片描述
然后，配置我的nginx.config配置文件

 server {
        listen       80;
        server_name  192.168.31.217; #IP地址，也就是访问的IP,是我对外的IP，如果不知道，就cmd用ipconfig看以太网适配器 以太网那栏下面的IPV4的地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
        #通过nginx代理到下面真实的资源（也就是真实的路径）
        proxy_pass http://127.0.0.1:8080/wx_login;
            #root   html;
            #index  index.html index.htm;
        }

然后，没有了，文章如果有问题，就在评论下指点出来，后期看到了会进行修改的

喝茶一族

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信登录

微信登录前端HTML的代码<button class="btn" @click="wxLogin">微信扫码登录</button>js代码wxLogin(){ location.href = "/to_wxLogin";}在resource文件夹中新建application-login.yml# 微信登录回调域wx: redirect_uri: http://xb.dfbz.com/ # 微信应用AppID appId: XXXXXXXX #
复制链接

扫一扫