前后端整合前端如何通过login获取后端接口以及如何发送rawData以及encryptedData等敏感信息

最新推荐文章于 2023-08-31 10:24:02 发布
最新推荐文章于 2023-08-31 10:24:02 发布
阅读量629 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Averyvery/article/details/120631666
版权

我们知道开始的时候前后端是分离的，我们要先创建连接才能让数据在前后端传值。
为了方便大家理解，我这里设置了一个情景：
我们“登录”页面登录后会跳转到“我的”页面，这个时候我们要先判断用户到底登录了没有，那我们怎么去判断呢，我们选择用状态码区分用户到底有没有登录成功，“我的”页面拿到这个值后怎么办的，后端怎么知道你有没有登录成功？我们可以通过uni.request把“我的”页面获得的信息状态码以及加密后的信息传给后端，最后通过sucess接收后端数据，整个流程算是结束了。但是值得注意的是，在uniapp大都是异步处理，比如两个同级的方法，他们里面都有success，现在执行的顺序是:方法一方法体除了success都执行，再执行方法二方法体除了sucess都执行，执行方法一中的success，最后执行方法二中的success
以下为事例代码：
在这里插入图片描述

Averyvery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java后端和前端传递的请求参数的三种类型
m0_65037354的博客
01-09 1070
在 HTTP 请求中，常见的请求参数类型有三种：`application/x-www-form-urlencoded`、`multipart/form-data` 和 `application/json`（通常用于 `raw` 类型）。通常，`application/x-www-form-urlencoded` 适用于普通表单提交，`multipart/form-data` 适用于文件上传，而 `application/json` 适用于需要结构化数据的请求。- 参数被编码为键值对，并使用`&`符号分隔。
postman-raw格式传参（转载）
暖暖的博客
05-25 9430
post传参的时候，Boby选择raw格式，如下图 raw里只能使用json格式的数据进行传参，并且header里必须加上Content-Type的值为application/json，才能被后端接收到。 转载：使用postman的raw传参 - 知乎
前端以form-data方式/raw方式发送post请求的区别
热门推荐
atarik@163.com
11-30 3万+
POST请求@RequestParam： ① 用来处理（前端）Content-Type: 为 application/x-www-form-urlencoded或者form-data编码的内容 ② 该注解有两个属性： value、required； value用来指定要传入值的id名称，required用来指示参数是否必须绑定； 注意这里Headers里不能以application/json作为C...
关于前后端传参的几种方式
weixin_53451858的博客
08-31 2082
有些后端的小伙伴可能会因为接不到参数而苦恼，在方法运行的时候会造成空指针等异常，整理了一下集中接参的方式，废话不多说，直接上代码。
前端给后端传参的方式
高晨辉的博客
03-08 6144
1.针对get,delete类请求,在浏览器上呈现的参数形式是拼接在URL地址后面.以?开头 使用的时候直接 const data = { fileName: 'img0.jpg', fileVersion: 1, fileCode: '698574763500503040' } downloadFile(data) 2.针对post,put类请求,将参数放到body里传入 3.针对一些上传文件或图片的接口,后端可能会需要我们以format的更是...
HTTP接口请求附带完整代码（支持RAW等格式请求）
aw与你共同进步
05-11 1591
很不错的一个工具类，话不多说直接上 package com.capitalwater.robot.utils; import com.alibaba.fastjson.JSON; import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.StringUtils; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.ap
前端使用jsencrypt加密后端使用java RSA解密功能实现源码
07-09
这个功能实现的核心知识点包括RSA算法、`jsencrypt`库的使用以及前后端的交互。 首先，RSA是一种非对称加密算法，基于两个密钥：公钥和私钥。公钥用于加密数据，而私钥用于解密。这种方式保证了即使数据在传输过程...
微信小程序后端实现授权登录
11-21
总结起来，微信小程序的后端授权登录实现涉及前后端的交互，包括小程序调用`wx.login()`获取`code`，后端调用`code2Session`接口获取用户标识和会话密钥，以及生成并管理自定义登录态，确保用户数据的安全。...
SpringBoot中获取微信用户信息的方法
08-25
主要介绍了SpringBoot中获取微信用户信息的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Encrypt-Data-With-RSA:通过基于Node.js和Jsencrypted的公钥和私钥对通过前端发送到后端的数据进行加密
05-03
// 前端发送的加密数据 const privateKey = '...'; // 保存在后端的私钥 // 使用私钥进行解密 const decipher = crypto.createDecipher('rsa-oaep', privateKey); let decrypted = decipher.update(encryptedData,...
微信小程序用户信息encryptedData详解
10-18
在微信小程序中，获取用户信息时，为了保护用户隐私和数据安全，微信采用了加密的方式传输敏感数据，如`openId`、`unionId`等。本文将深入解析微信小程序用户信息中的`encryptedData`，以及如何正确解密并使用这些...
微信小程序授权获取用户详细信息openid的实例详解
08-29
如果需要openid，我们需要采取第二种方法，即通过`wx.login`接口获取code，然后利用这个code向微信服务器发起请求获取openid和其他信息。 `wx.login`接口会返回一个包含code的对象，如下所示： ```javascript wx....
微信小程序如何获取群聊的openGid以及名称详解
10-16
这一步通常涉及到后端处理，因为解密过程需要用到微信小程序的AppID和AppSecret，这些敏感信息不应暴露在前端。 5. **展示群名称**：在页面的WXML中，我们可以通过`<open-data>`组件显示群名称。`openGid`作为属性...
C#微信小程序服务端获取用户解密信息实例代码
08-31
微信小程序在用户授权后，会通过API接口发送加密后的用户信息到服务端，服务端需要正确解密这些信息才能获取用户的详细资料。 在给出的代码示例中，首先定义了一个名为`wxapi`的类，它实现了`IHttpHandler`接口，这...
微信小程序前端解密获取手机号
最新发布
06-03
1. 保护敏感信息：AppID、AppSecret、sessionKey和解密后的手机号都属于敏感信息，必须在服务器端处理，不能暴露在前端代码中。 2. 验证签名：在与微信服务器通信时，应校验返回数据的签名，防止中间人攻击。 3. ...
Java请求调用参数格式为raw_json类型的接口
weixin_44949150的博客
03-08 2207
【代码】Java请求调用参数格式为raw_json类型的接口。
ajax请求 POST方式发送raw类型数据
记录技术的小本本
04-21 6025
ajax请求 POST方式发送raw类型数据 $.ajax({ url:'url', type:"POST", dataType:"json", contentType: "application/json", data: JSON.stringify({ "data1": data1, "data2": data2 ...... }), success:function (data) { //成功后执
微信接口java解密_微信小程序 encryptedData 的解密（JAVA）
weixin_39860636的博客
02-13 1009
上图为微信官方api提供的登陆获取用户信息的流程，session_key的得到这里不进行说明，详情可以看微信小程序的官方api。数据签名校验为了确保 开放接口 返回用户数据的安全性，微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验，确保数据的完整性。通过调用接口(如 wx.getUserInfo)获取数据时，接口会同时返回 rawData、signature，其中 signat...
springboot中vue前后端分离后端api通过注解解密例子
06-11
好的，我可以为您提供一个基于注解的例子。 首先，您需要创建一个注解类，例如： ```java @Target(ElementType.PARAMETER) @Retention(RetentionPolicy.RUNTIME) public @interface Decrypt { } ``` 这个注解将用于标记需要解密的请求参数。 接下来，您需要创建一个参数解析器类，用于解析带有@Decrypt注解的请求参数。例如： ```java @Component public class DecryptArgumentResolver implements HandlerMethodArgumentResolver { private static final String SECRET_KEY = "your_secret_key_here"; @Override public boolean supportsParameter(MethodParameter parameter) { return parameter.hasParameterAnnotation(Decrypt.class); } @Override public Object resolveArgument(MethodParameter parameter, ModelAndViewContainer mavContainer, NativeWebRequest webRequest, WebDataBinderFactory binderFactory) throws Exception { HttpServletRequest request = (HttpServletRequest) webRequest.getNativeRequest(); String encryptedData = request.getParameter(parameter.getParameterName()); if (encryptedData != null && !encryptedData.isEmpty()) { String decryptedData = decrypt(encryptedData, SECRET_KEY); if (decryptedData != null) { return decryptedData; } } return null; } private String decrypt(String encryptedData, String secretKey) { try { byte[] keyBytes = Arrays.copyOf(secretKey.getBytes("ASCII"), 16); SecretKeySpec key = new SecretKeySpec(keyBytes, "AES"); Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5Padding"); cipher.init(Cipher.DECRYPT_MODE, key); byte[] decryptedData = cipher.doFinal(Base64.getDecoder().decode(encryptedData)); return new String(decryptedData, "UTF-8"); } catch (Exception e) { return null; } } } ``` 这个参数解析器将解析带有@Decrypt注解的请求参数，并尝试解密参数值（使用AES加密算法）。如果解密成功，就返回解密后的数据；否则返回null。 现在，您需要在Spring Boot应用程序中注册这个参数解析器： ```java @Configuration public class WebMvcConfig implements WebMvcConfigurer { @Autowired private DecryptArgumentResolver decryptArgumentResolver; @Override public void addArgumentResolvers(List<HandlerMethodArgumentResolver> resolvers) { resolvers.add(decryptArgumentResolver); } } ``` 现在，当您的Vue前端应用程序向后端API发送POST请求时，可以将需要解密的请求参数带上@Decrypt注解。例如： ```java @RestController @RequestMapping("/api/user") public class UserController { @PostMapping("/login") public ResponseEntity<?> login(@Decrypt String data) { // TODO: do something with the decrypted data return ResponseEntity.ok().build(); } } ``` 这个控制器方法将使用@Decrypt注解标记请求参数，并且参数解析器将在解析参数时尝试解密参数值。 最后，当您的Vue前端应用程序发送POST请求时，只需要将需要解密的数据使用AES加密算法加密，并将加密后的数据作为请求参数发送即可。例如： ```javascript axios.post('/api/user/login', { data: encrypt(JSON.stringify({ username: 'foo', password: 'bar' }), 'your_secret_key_here') }).then(response => { console.log(response.data); }); function encrypt(data, secretKey) { let key = CryptoJS.enc.Utf8.parse(secretKey); let encryptedData = CryptoJS.AES.encrypt(data, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); return encryptedData.toString(); } ``` 希望这个例子对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值