文章目录

OAuth2
- 一、OAuth2解决什么问题
- 二、现代微服务安全
- 三、总结
- 四、OAuth2最简向导
- 五、什么是OAuth2
微信登录
- 一、准备工作
- 二、后端开发
- - 生成登录的二维码
  - 获取扫描人信息
  - 整合JWT令牌
- 三、前端开发

OAuth2

一、OAuth2解决什么问题

1、OAuth2提出的背景
照片拥有者想要在云冲印服务上打印照片，云冲印服务需要访问云存储服务上的资源

2、图例
资源拥有者：照片拥有者
客户应用：云冲印
受保护的资源：照片

3、方式一：用户名密码复制
适用于同一公司内部的多个系统，不适用于不受信的第三方应用
4、方式二：通用开发者key
适用于合作商或者授信的不同业务部门之间

5、方式三：办法令牌
接近OAuth2方式，需要考虑如何管理令牌、颁发令牌、吊销令牌，需要统一的协议，因此就有了OAuth2协议

二、现代微服务安全

除了开放系统授权，OAuth2还可以应用于现代微服务安全
1、传统单块应用的安全

2、现代微服务安全
现代微服务中系统微服务化以及应用的形态和设备类型增多，不能用传统的登录方式
核心的技术不是用户名和密码，而是token，由AuthServer颁发token，用户使用token进行登录

3、典型的OAuth2应用

三、总结

四、OAuth2最简向导

川崎高彦：OAuth2领域专家，开发了一个OAuth2 sass服务，OAuth2 as Service，并且做成了一个公司
再融资的过程中为了向投资人解释OAuth2是什么，于是写了一篇文章，《OAuth2最简向导》

五、什么是OAuth2

1、OAuth2正式定义

2、令牌的核心

3、OAuth2的历史

4、OAuth2的优势

5、OAuth2的不足

6、Auth2涉及的角色

7、OAuth2术语

8、OAuth2令牌的类型

9、OAuth2的误解

微信登录

一、准备工作

https://open.weixin.qq.com
1、注册
2、邮箱激活
3、完善开发者资料
4、开发者资质认证
准备营业执照，1-2个工作日审批、300元
5、创建网站应用
提交审核，7个工作日审批
6、熟悉微信登录流程
参考文档：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=e547653f995d8f402704d5cb2945177dc8aa4e7e&lang=zh_CN
获取access_token时序图

二、后端开发

生成登录的二维码

1、添加配置
application.properties添加相关配置信息


# 微信开放平台 appid
wx.open.app_id=你的appid
# 微信开放平台 appsecret
wx.open.app_secret=你的appsecret
# 微信开放平台 重定向url
wx.open.redirect_url=http://你的服务器名称/api/ucenter/wx/callback

2、创建常量类
创建util包，创建ConstantPropertiesUtil.java常量类

@Component
//@PropertySource("classpath:application.properties")
public class ConstantPropertiesUtil implements InitializingBean {@Value("${wx.open.app_id}")private String appId;@Value("${wx.open.app_secret}")private String appSecret;@Value("${wx.open.redirect_url}")private String redirectUrl;public static String WX_OPEN_APP_ID;public static String WX_OPEN_APP_SECRET;public static String WX_OPEN_REDIRECT_URL;@Overridepublic void afterPropertiesSet() throws Exception {WX_OPEN_APP_ID = appId;WX_OPEN_APP_SECRET = appSecret;WX_OPEN_REDIRECT_URL = redirectUrl;}
}

3、创建controller
guli-microservice-ucenter微服务中创建api包
api包中创建WxApiController

@CrossOrigin
@Controller//注意这里没有配置 @RestController
@RequestMapping("/api/ucenter/wx")
public class WxApiController {@GetMapping("login")public String genQrConnect(HttpSession session) {// 微信开放平台授权baseUrlString baseUrl = "https://open.weixin.qq.com/connect/qrconnect" +"?appid=%s" +"&redirect_uri=%s" +"&response_type=code" +"&scope=snsapi_login" +"&state=%s" +"#wechat_redirect";// 回调地址String redirectUrl = ConstantPropertiesUtil.WX_OPEN_REDIRECT_URL; //获取业务服务器重定向地址try {redirectUrl = URLEncoder.encode(redirectUrl, "UTF-8"); //url编码} catch (UnsupportedEncodingException e) {throw new GuliException(20001, e.getMessage());}// 防止csrf攻击（跨站请求伪造攻击）//String state = UUID.randomUUID().toString().replaceAll("-", "");//一般情况下会使用一个随机数String state = "imhelen";//为了让大家能够使用我搭建的外网的微信回调跳转服务器，这里填写你在ngrok的前置域名System.out.println("state = " + state);// 采用redis等进行缓存state 使用sessionId为key 30分钟后过期，可配置//键："wechar-open-state-" + httpServletRequest.getSession().getId()//值：satte//过期时间：30分钟//生成qrcodeUrlString qrcodeUrl = String.format(baseUrl,ConstantPropertiesUtil.WX_OPEN_APP_ID,redirectUrl,state);return "redirect:" + qrcodeUrl;}
}

授权url参数说明

4、测试
访问：http://localhost:8160/api/ucenter/wx/login
访问授权url后会得到一个微信登录二维码

流程：
微信扫描登录：

扫描后跳转规则

扫描获取扫描人信息：

获取扫描人信息

一、配置
1、全局配置的跳转路径

# 微信开放平台 重定向url
wx.open.redirect_url=http://回调地址/api/ucenter/wx/callback

2、修改当前项目启动端口号为8160

3、测试回调是否可用
在WxApiController中添加方法

@GetMapping("callback")
public String callback(String code, String state, HttpSession session) {//得到授权临时票据codeSystem.out.println("code = " + code);System.out.println("state = " + state);
}

二、后台开发
1、添加依赖

 <!--httpclient-->
<dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId>
</dependency>
<!--commons-io-->
<dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId>
</dependency>
<!--gson-->
<dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId>
</dependency>

2、创建httpclient工具类
放入util包

HttpClientUtils.java

3、创建回调controller方法
在WxApiController.java中添加如下方法

@GetMapping("callback")
public String callback(String code, String state){//得到授权临时票据codeSystem.out.println(code);System.out.println(state);//从redis中将state获取出来，和当前传入的state作比较//如果一致则放行，如果不一致则抛出异常：非法访问//向认证服务器发送请求换取access_tokenString baseAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token" +"?appid=%s" +"&secret=%s" +"&code=%s" +"&grant_type=authorization_code";String accessTokenUrl = String.format(baseAccessTokenUrl,ConstantPropertiesUtil.WX_OPEN_APP_ID,ConstantPropertiesUtil.WX_OPEN_APP_SECRET,code);String result = null;try {result = HttpClientUtils.get(accessTokenUrl);System.out.println("accessToken=============" + result);} catch (Exception e) {throw new XiiException(20001, "获取access_token失败");}//解析json字符串Gson gson = new Gson();HashMap map = gson.fromJson(result, HashMap.class);String accessToken = (String)map.get("access_token");String openid = (String)map.get("openid");//查询数据库当前用用户是否曾经使用过微信登录Member member = memberService.getByOpenid(openid);if(member == null){System.out.println("新用户注册");//访问微信的资源服务器，获取用户信息String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +"?access_token=%s" +"&openid=%s";String userInfoUrl = String.format(baseUserInfoUrl, accessToken, openid);String resultUserInfo = null;try {resultUserInfo = HttpClientUtils.get(userInfoUrl);System.out.println("resultUserInfo==========" + resultUserInfo);} catch (Exception e) {throw new XiiException(20001, "获取用户信息失败");}//解析jsonHashMap<String, Object> mapUserInfo = gson.fromJson(resultUserInfo, HashMap.class);String nickname = (String)mapUserInfo.get("nickname");String headimgurl = (String)mapUserInfo.get("headimgurl");//向数据库中插入一条记录member = new Member();member.setNickname(nickname);member.setOpenid(openid);member.setAvatar(headimgurl);memberService.save(member);}//TODO 登录return "redirect:http://localhost:3000";
}

4、业务层
业务接口：MemberService.java

Member getByOpenid(String openid);

业务实现：MemberServiceImpl.java

@Override
public Member getByOpenid(String openid) {QueryWrapper<Member> queryWrapper = new QueryWrapper<>();queryWrapper.eq("openid", openid);Member member = baseMapper.selectOne(queryWrapper);return member;
}

整合JWT令牌

1、callback中生成jwt
在WxApiController.java的callback方法的最后添加如下代码

// 生成jwt
String token = JwtUtils.geneJsonWebToken(member.getId(),member.getNickName());
//存入cookie
//CookieUtils.setCookie(request, response, "xii_jwt_token", token);
//因为端口号不同存在跨域问题，cookie不能跨域，所以这里使用url重写
return "redirect:http://localhost:3000?token=" + token;

2、前端打印token
在layout/defaullt.vue中打印获取的token值

export default {created() {console.log(this.$route.query.token)}
}

总结:

三、前端开发

1、修改default.vue页面脚本

export default {data() {return {token: '',loginInfo: {id: '',age: '',avatar: '',mobile: '',nickname: '',sex: ''}}},created() {this.token = this.$route.query.tokenif (this.token) {this.wxLogin()}this.showInfo()},methods: {showInfo() {//debuggervar jsonStr = cookie.get("guli_ucenter");if (jsonStr) {this.loginInfo = JSON.parse(jsonStr)}},logout() {//debuggercookie.set('guli_ucenter', "", {domain: 'localhost'})cookie.set('guli_token', "", {domain: 'localhost'})//跳转页面window.location.href = "/"},wxLogin() {if (this.token == '') return//把token存在cookie中、也可以放在localStorage中cookie.set('guli_token', this.token, {domain: 'localhost'})cookie.set('guli_ucenter', '', {domain: 'localhost'})//登录成功根据token获取用户信息userApi.getLoginInfo().then(response => {this.loginInfo = response.data.data.item//将用户信息记录cookiecookie.set('guli_ucenter', this.loginInfo, {domain: 'localhost'})})}}
}

什么是OAuth2，微信登录前后端实现，Coding在线（十三）相关推荐

微信第三方登录前后端分离实现思路
微信第三方登录前后端分离实现思路前端实现这里说一下前后端的思路,页面加载时声明一个变量state='时间戳+6位随机数', 前端路径生成二维码, 其中有个state参数需要我们传递,这个参数你传什 ...
Python django-restframework 前后端分离实现在线教育课程平台
django-restframework 框架 Django REST framework 是一个强大而灵活的 Web API 工具.使用它可以更好的与前端交互,完成API接口的设计与数据返回.同时它 ...
基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
前后端分离的在线考试系统（源码+资料
SpringBoot+Vue的前后端分离的在线考试系统 [项目介绍] 系统设计是一个把软件需求转换成用软件系统表示的过程[9].通过对目标系统的分析和研究,做出了学生信息管理系统的总体规划,这是全面开 ...
WebRose-低代码PaaS平台的新流派,前后端都可直接在线极简式编码
文章目录前言一.WebRose具体如何在线开发? 二.前端JS编码 1.创建前端组件的方法 2.操作前端组件方法 3.动态创建布局 4.与其他平台集成 5.前端跳转新页面 6.调用后端微服务Jav ...
（2022年）SpringBoot+Vue3前后端分离的在线报名系统
OnlineFrom 一个基于SpringBoot+Vue3实现的前后端分离的在线报名系统,可用于用户的信息收集. 前端利用Vite2+Vue3快速搭建. 个人博客墨水记忆源码地址涉及知识点前 ...
前后端分离实现在线记账功能，前端使用vue，后端使用springmvc
前后端分离实现在线记账功能前端采用vue 后端采用springmvc 前端目录后端目录运行结果双击单元格可以对每一项内容进行修改
H5 微信公众号授权登录前后端分离篇(资料准备+前端01)
实现微信公众号授权登录,很简单,但是注意的地方要细心,小伙伴们跟着我的思路一起实现吧! 文章目录一.帐号申请 1. 正式账号 2. 测试帐号二.微信文档 2.1. 文档主页 2.2. 授权流程 2 ...
微信授权登录-前后端分离
简介在前后端分离情况下实现微信服务号和订阅号授权登录,项目使用springboot+Vue前后端分离的开发模式. 备注:目前只提供后端代码实现以及业务逻辑流程图服务号开发逻辑进入活动页面根据 ...

什么是OAuth2，微信登录前后端实现，Coding在线（十三）