微信登录
前端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;
}
然后,没有了,文章如果有问题,就在评论下指点出来,后期看到了会进行修改的