【Gulimall+】第三方服务：对象存储OSS、短信验证、社交登录、支付宝支付

文章目录

对象存储OSS
- 基本配置
- java实现
短信认证
- 前端验证码倒计时
- 整合短信验证码
- 密码存储
社交登录：微博
- 基本流程
- java实现
支付宝支付
- 基本配置
- java实现

对象存储OSS

一谈到对象，不免想起有意思的“名言”：
1.新生代的对象都没了，我们就只能去老年代去找了
2.没对象不要紧，咱可以new一个啊，咱就不直接引用了(有点过分)，实在不行咱去IOC婚姻介绍所租一个。

别人都是没对象可处，OSS过分了－－对象存储，这年头对象都这么多的么
言归正常，咱就看看OSS是怎么做到的

基本配置

上面的选项是很便宜的，到现在还没收过我的钱呢

上传文件：

上传成功后，取得图片的URL

这种方式是手动上传图片，实际上我们可以在程序中设置自动上传图片到阿里云对象存储。

为程序开发准备
endpoint的取值：
accessKeyId和accessKeySecret需要创建一个RAM账号：

创建用户完毕后，会得到一个“AccessKey ID”和“AccessKeySecret”，然后复制这两个值到代码的“AccessKey ID”和“AccessKeySecret”。

另外还需要添加访问控制权限：

java实现

１、导入依赖

<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alicloud-oss</artifactId><version>2.2.0.RELEASE</version></dependency>

这个是SpringCloud Alibaba的，可以引入依赖管理，这样就不用单独写版本，这儿就先这样了。

2、配置文件

spring:cloud:alicloud:access-key: 你的access-keysecret-key: 你的secret-keyoss:endpoint: oss-cn-shanghai.aliyuncs.combucket: 你的bucket名

３、上传模型：
服务端签名后直传的原理如下：参考link

用户发送上传Policy请求到应用服务器。
应用服务器返回上传Policy和签名给用户。
用户直接上传数据到OSS。

com/atguigu/gulimall/thirdparty/controller/OssController.java

@RestController
public class OssController {@AutowiredOSS ossClient;@Value ("${spring.cloud.alicloud.oss.endpoint}")String endpoint ;@Value("${spring.cloud.alicloud.oss.bucket}")String bucket ;@Value("${spring.cloud.alicloud.access-key}")String accessId ;@Value("${spring.cloud.alicloud.secret-key}")String accessKey ;@RequestMapping("/oss/policy")public R policy(){String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpointString format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());String dir = format; // 用户上传文件时指定的前缀。Map<String, String> respMap=null;try {long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes("utf-8");String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);respMap= new LinkedHashMap<String, String>();respMap.put("accessid", accessId);respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", host);respMap.put("expire", String.valueOf(expireEndTime / 1000));} catch (Exception e) {// Assert.fail(e.getMessage());System.out.println(e.getMessage());} finally {ossClient.shutdown();}return R.ok().put("data", respMap);}
}

利用配置好的网关映射访问　http://localhost:6060/api/thirdparty/oss/policy　获取上传Policy和签名

浏览器拿到该信息，直接给OSS发请求上传图片
src/views/modules/product/brand-add-or-update.vue父组件给SingleUpload传了一个值dataForm.logo

<SingleUpload v-model="dataForm.logo"></SingleUpload>

src/components/upload/singleUpload.vue

<el-uploadaction="https://gulimallyfxu.oss-cn-shanghai.aliyuncs.com":data="dataObj"list-type="picture":multiple="false" :show-file-list="showFileList":file-list="fileList":before-upload="beforeUpload":on-remove="handleRemove":on-success="handleUploadSuccess":on-preview="handlePreview"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div></el-upload>

import {policy} from './policy'props: {value: String　//接收父组件传过来的值，竟然是用名为value的变量接收v-model传值的},。。。methods: {emitInput(val) {this.$emit('input', val)　//这个方法去改变父组件中v-model 和 子组件中 value 的值},。。。　beforeUpload(file) {let _self = this;return new Promise((resolve, reject) => {policy().then(response => {_self.dataObj.policy = response.data.policy;_self.dataObj.signature = response.data.signature;_self.dataObj.ossaccessKeyId = response.data.accessid;_self.dataObj.key = response.data.dir + '/'+getUUID()+'_${filename}';_self.dataObj.dir = response.data.dir;_self.dataObj.host = response.data.host;resolve(true)}).catch(err => {reject(false)})})},,handleUploadSuccess(res, file) {console.log("上传成功...")this.showFileList = true;this.fileList.pop();this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });this.emitInput(this.fileList[0].url);}

src/components/upload/policy.js

import http from '@/utils/httpRequest.js'
export function policy() {return  new Promise((resolve,reject)=>{http({url: http.adornUrl("/thirdparty/oss/policy"),method: "get",params: http.adornParams({})}).then(({ data }) => {resolve(data);})});
}

开始执行上传，但是在上传过程中，可能会出现如下的问题：

Access to XMLHttpRequest at 'http://gulimall-images.oss-cn-shanghai.aliyuncs.com/' from origin 'http://localhost:8001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

是一个跨域的问题，解决方法就是在阿里云上开启跨域访问：

短信认证

前端验证码倒计时

在auth的reg.html中有点击发送验证码按钮

$(function () {/*** 验证码发送*/$("#sendCode").click(function () {//判断是否有该样式if ($(this).hasClass("disabled")) {// 正在倒计时} else {// 发送验证码$.get("/sms/sendCode?phone=" + $("#phoneNum").val(), function (data) {if (data.code != 0) {alert(data.msg)}})timeoutChangeStyle();}})
})
// 60秒
var num = 60;
function timeoutChangeStyle() {// 先添加样式，防止重复点击$("#sendCode").attr("class", "disabled")// 到达0秒后 重置时间，去除样式if (num == 0) {$("#sendCode").text("发送验证码")num = 60;// 时间到达后清除样式$("#sendCode").attr("class", "");} else {var str = num + "s 后再次发送"$("#sendCode").text(str);setTimeout("timeoutChangeStyle()", 1000);}num--;
}

整合短信验证码

去阿里云市场订购平台订购短信服务，免费的o，link
按照订购页下面的说明指南，在它的debug界面调通，注意一定要用它的(公司)签名ID,以及(短信内容)模板ID

在你的管理控制台的已订购服务可看到短信服务的AppKey　AppSecret　AppCode，调试完事就可以借助它的Java实现代码了

@ResponseBody@GetMapping("/sms/sendcode")public R sendCode(@RequestParam("phone") String phone){// TODO 1、接口防刷// 先从redis中拿取String redisCode = stringRedisTemplate.opsForValue().get(AuthServerConstant.SMS_CODE_CACHE_PREFIX + phone);if(null != redisCode && redisCode.length() > 0){// 拆分long CuuTime = Long.parseLong(redisCode.split("_")[1]);// 当前系统事件减去之前验证码存入的事件 小于60000毫秒=60秒if(System.currentTimeMillis() - CuuTime < 60 * 1000){ //60s内不能重复发return R.error(BazCodeEnum.SMS_CODE_EXCEPTION.getCode(), BazCodeEnum.SMS_CODE_EXCEPTION.getMsg());}}String code = UUID.randomUUID().toString().substring(0, 6);String redis_code = code + "_" + System.currentTimeMillis();// 缓存验证码stringRedisTemplate.opsForValue().set(AuthServerConstant.SMS_CODE_CACHE_PREFIX + phone, redis_code , 10, TimeUnit.MINUTES);try {return thirdPartFeignService.sendCode(phone, code);  // 调用第三方服务发送验证码} catch (Exception e) {log.warn("远程调用不知名错误 [无需解决]");}return R.ok();}

第三方服务发送验证码：

 @Autowiredprivate SmsComponent smsComponent;。。。。smsComponent.sendSmsCode(phone, code)

com/atguigu/gulimall/thirdparty/component/SmsComponent.java
其中HttpUtils.java在guimail/gulimall-common/src/main/java/com/atguigu/common/utils/HttpUtils.java

@ConfigurationProperties(prefix = "spring.cloud.alicloud.sms")
@Data
@Component
public class SmsComponent {private String host;  //"https://gyytz.market.alicloudapi.com";private String path; //"/sms/smsSend"private String templateId;private String signId;private String appcode; // 别外泄public String sendSmsCode(String phone, String code){String param = "**code**:" + code + ",**minute**:1";String method = "POST";Map<String, String> headers = new HashMap<String, String>();//最后在header中的格式(中间是英文空格)为Authorization:APPCODE 83359fd73fe94948385f570e3c139105headers.put("Authorization", "APPCODE " + appcode);Map<String, String> querys = new HashMap<String, String>();querys.put("mobile", phone);querys.put("param", param);querys.put("smsSignId", signId);querys.put("templateId", templateId);Map<String, String> bodys = new HashMap<String, String>();HttpResponse response = null;try {/*** 重要提示如下:* HttpUtils请从* https://github.com/aliyun/api-gateway-demo-sign-java/blob/master/src/main/java/com/aliyun/api/gateway/demo/util/HttpUtils.java* 下载* 相应的依赖请参照* https://github.com/aliyun/api-gateway-demo-sign-java/blob/master/pom.xml*/response = HttpUtils.doPost(host, path, method, headers, querys, bodys);System.out.println(response.toString());//获取response的bodyif(response.getStatusLine().getStatusCode() == 200){return EntityUtils.toString(response.getEntity());}} catch (Exception e) {e.printStackTrace();}return "fail_" + response.getStatusLine().getStatusCode();}
}

@ConfigurationProperties(prefix = “spring.cloud.alicloud.sms”)这个是不是有点熟悉，配置线程池的时候link，我们也用了

spring:alicloud:sms:appcode: 用你自己的就好host: https://gyytz.market.alicloudapi.compath: /sms/smsSendtemplate-id: a09602b817fd47e59e7c6e603d3f088dsign-id: 2e65b1bb3d054466b82f0c9d125465e2

在点击立即注册后，先是校验提交的表单字段是否满足要求，然后是校验验证码

  // 将传递过来的验证码 与 存redis中的验证码进行比较String code = vo.getCode();String s = redisTemplate.opsForValue().get(AuthServerConstant.SMS_CODE_CACHE_PREFIX + vo.getPhone());if (!StringUtils.isEmpty(s)) {// 验证码和redis中的一致if(code.equals(s.split("_")[0])) {// 删除验证码：令牌机制redisTemplate.delete(AuthServerConstant.SMS_CODE_CACHE_PREFIX + vo.getPhone());// 调用远程服务，真正注册R r = memberFeignService.regist(vo);

验证码通过后会交给member服务真正注册（需要检查用户名和手机号是否唯一）

密码存储

密码是并不是直接存入数据库。引出了使用 MD5进行加密，但是MD5加密后，别人任然可以暴力破解（彩虹表），可以使用加盐的方式，将密码加密后，得到一串随机字符。

     //密码要加密存储BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();String encode = passwordEncoder.encode(vo.getPassword());memberEntity.setPassword(encode);

在登录时，将数据库保存注册密码盐值加密生成字符和用户键入密码盐值加密生成字符验证，相同结果返回true否则false

             // 获取数据库的密码String passwordDB = memberEntity.getPassword();BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();// 和用户密码进行校验boolean matches = passwordEncoder.matches(password, passwordDB);if(matches) {// 密码验证成功

社交登录：微博

QQ、微博，github等网站的用户量非常大，别的网站为了简化网站的登陆和注册逻辑，引入社交登录功能。**OAuth2.0：**对于用户相关的 OpenAPI（例如获取用户信息，动态同步，照片，日志，分享等），为了保存用户数据的安全和隐私，第三方网站访问用户数据前都需要显示向用户授权
微博官方获取授权link

基本流程

１、创建我的应用
微连接－>网站接入

这个是我创建的应用，点击进去，基本信息有App Key　App Secret，然后应用信息的高级信息里设置授权回调页
2.按照官方授权连接，先用postman调通，

２.1. 引导需要授权的用户到如下地址：

https://api.weibo.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI

YOUR_CLIENT_ID就是App Key的值，YOUR_REGISTERED_REDIRECT_URI就是高级信息的成功回调地址

2.2. 如果用户同意授权，页面跳转至 YOUR_REGISTERED_REDIRECT_URI/?code=CODE

2.3. 换取Access Token

https://api.weibo.com/oauth2/access_token?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&grant_type=authorization_code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI&code=CODE

这里的CODE就是第二步获取到的，但每次都不一样。而换取的Access Token 可以一直用

２.4. 使用获得的Access Token调用API
拿到Access Token就可以“为所欲为”了

java实现

在auth服务的login.html中，点击微博图标会发送２.1的请求给user gent，之后会返回一个界面让用户登录微博账号授权，授权成功后会跳转至2.2，controller接受该请求的参数

com/atguigu/gulimall/auth/controller/OAuth2Controller.java

    @GetMapping("/oauth2/weibo/success")public String weibo(@RequestParam("code") String code, HttpSession session) throws Exception {// 1、根据code换取accessTokenMap<String, String> map = new HashMap<>();map.put("client_id", "4009816567");map.put("client_secret", "4c13813ed0edb8bb84996543fcf7a6b7");map.put("grant_type", "authorization_code");map.put("redirect_uri", "http://auth.gulimall.com/oauth2/weibo/success");map.put("code", code);HttpResponse response = HttpUtils.doPost("https://api.weibo.com","/oauth2/access_token","post",new HashMap<>(),map,new HashMap<>());// 状态码为200请求成功if (response.getStatusLine().getStatusCode() == 200 ){// 获取到了accessTokenString json = EntityUtils.toString(response.getEntity());SocialUser socialUser = JSON.parseObject(json, SocialUser.class);//登录或注册R r = memberFeignService.oauth2Login(socialUser);if (r.getCode() == 0) {MemberRespVo data = r.getData("data", new TypeReference<MemberRespVo>(){});log.info("登录成功:用户:{}",data.toString());session.setAttribute(AuthServerConstant.LOGIN_USER,data);。。。

无论是注册还是登录还是社交登录，最终与数据库交互都是在member服务（别将这些请求让拦截器拦截了）
在member服务中执行步骤2.4 获取微博用户基本信息
com/atguigu/gulimall/member/service/impl/MemberServiceImpl.java

                Map<String,String> query = new HashMap<>();// 设置请求参数query.put("access_token",vo.getAccessToken());query.put("uid",vo.getUid());// 发送get请求获取社交用户信息HttpResponse response = HttpUtils.doGet("https://api.weibo.com","/2/users/show.json","get",new HashMap<>(),query);// 状态码为200 说明请求成功if (response.getStatusLine().getStatusCode() == 200){// 将返回结果转换成jsonString json = EntityUtils.toString(response.getEntity());// 利用fastjson将请求返回的json转换为对象JSONObject jsonObject = JSON.parseObject(json);// 拿到需要的值String name = jsonObject.getString("name");String gender = jsonObject.getString("gender");

支付宝支付

这里选择的是支付宝沙箱支付环境，原因有二：应用审核有点慢，二是沙箱模拟与正式无差别，只需要改些应用配置方可。PS:上面的都是幌子，涉及到钱的事，那不得考虑周到点。

基本配置

配置可参考link

用link中的工具生成密钥，在RSA2设置上。看看要设置啥，一个是应用公钥（我们生成的），一个是支付宝公钥（自己产生的）
我们来看看为啥需要这些钥，有啥用这是

图中就是非对称加密系统，也就是公钥暴露给other机器，私钥自己留着。在发送消息时，产生一个消息签名随报文一起发送，千万别想着在途中修改，人家在最后还会通过对应的公钥进行验签，不一致就丢弃了。

java实现

参考link
1.配置自定义组件AlipayTemplate
com/atguigu/gulimall/order/config/AlipayTemplate.java

@ConfigurationProperties(prefix = "alipay")
@Component
@Data
public class AlipayTemplate {//在支付宝创建的应用的idprivate   String app_id;// 商户私钥，您的PKCS8格式RSA2私钥private String merchant_private_key = "你的商户私钥";// 支付宝公钥,查看地址：https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥。private String alipay_public_key = "支付宝公钥";// 服务器[异步通知]页面路径  需http://格式的完整路径，不能加?id=123这类自定义参数，必须外网可以正常访问// 支付宝会悄悄的给我们发送一个请求，告诉我们支付成功的信息private  String notify_url;// 页面跳转同步通知页面路径 需http://格式的完整路径，不能加?id=123这类自定义参数，必须外网可以正常访问//同步通知，支付成功，一般跳转到成功页private  String return_url;// 签名方式private  String sign_type = "RSA2";// 字符编码格式private  String charset = "utf-8";// 支付宝网关； https://openapi.alipaydev.com/gateway.doprivate String gatewayUrl;//超时未支付自动收单private String timeout = "30m";public  String pay(PayVo vo) throws AlipayApiException {//AlipayClient alipayClient = new DefaultAlipayClient(AlipayTemplate.gatewayUrl, AlipayTemplate.app_id, AlipayTemplate.merchant_private_key, "json", AlipayTemplate.charset, AlipayTemplate.alipay_public_key, AlipayTemplate.sign_type);//1、根据支付宝的配置生成一个支付客户端AlipayClient alipayClient = new DefaultAlipayClient(gatewayUrl,app_id, merchant_private_key, "json",charset, alipay_public_key, sign_type);//2、创建一个支付请求 //设置请求参数AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();alipayRequest.setReturnUrl(return_url);alipayRequest.setNotifyUrl(notify_url);//商户订单号，商户网站订单系统中唯一订单号，必填String out_trade_no = vo.getOut_trade_no();//付款金额，必填String total_amount = vo.getTotal_amount();//订单名称，必填String subject = vo.getSubject();//商品描述，可空String body = vo.getBody();alipayRequest.setBizContent("{\"out_trade_no\":\""+ out_trade_no +"\","+ "\"total_amount\":\""+ total_amount +"\","+ "\"subject\":\""+ subject +"\","+ "\"body\":\""+ body +"\","+ "\"timeout_express\":\""+timeout+"\","+ "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");String result = alipayClient.pageExecute(alipayRequest).getBody();//会收到支付宝的响应，响应的是一个页面，只要浏览器显示这个页面，就会自动来到支付宝的收银台页面System.out.println("支付宝的响应："+result);return result;}
}

看到这个@ConfigurationProperties(prefix = “alipay”)，去配置文件application.properties看看

#配置AlipayTempalte
alipay.app_id=2021000116691614
#异步通知(可靠
alipay.notify_url=http://yfxu.ngrok2.xiaomiqiu.cn/payed/notify
#支付成功后回到商家的页面 路径后面是不能写注释的(不可靠
alipay.return_url=http://member.gulimall.com/memberOrder.html
alipay.sign_type=RSA2
alipay.charset=utf-8
alipay.gatewayUrl=https://openapi.alipaydev.com/gateway.do

点击pay.html页面的支付宝

<a th:href="'http://order.gulimall.com/payOrder?orderSn=' + ${submitOrderResp.orderEntity.orderSn}">支付宝</a>

com/atguigu/gulimall/order/web/PayWebController.java

@Controller
public class PayWebController {@Autowiredprivate AlipayTemplate alipayTemplate;@Autowiredprivate OrderService orderService;/*** 告诉浏览器我们会返回一个html页面*/@ResponseBody@GetMapping(value = "/payOrder", produces = "text/html")public String payOrder(@RequestParam("orderSn") String orderSn) throws AlipayApiException {PayVo payVo = orderService.getOrderPay(orderSn);return alipayTemplate.pay(payVo); // 将返回支付宝的支付页面，需要将这个页面进行显示}
}

返回的页面为：

别慌不是要你支付，用沙箱买家账号支付就好

异步通知说明link：
程序执行完后必须打印输出“success”，这样支付宝就不再发该通知了（最大努力通知）
该方式的调试与运行必须外网上能访问　即配置的alipay.notify_url=http://yfxu.ngrok2.xiaomiqiu.cn/payed/notify，外网可访问

com/atguigu/gulimall/order/listener/OrderPayedListener.java

@Slf4j
@RestController
public class OrderPayedListener {@AutowiredOrderService orderService;@AutowiredAlipayTemplate alipayTemplate;//异步通知参考https://opendocs.alipay.com/open/270/105902@PostMapping("/payed/notify")public String handleAlipayed(HttpServletRequest request, PayAsyncVo vo) throws AlipayApiException {log.info("\n收到支付宝最后的通知数据：\n" + vo);// 验签Map<String,String> params = new HashMap<>();Map<String,String[]> requestParams = request.getParameterMap();for (Iterator<String> iter = requestParams.keySet().iterator(); iter.hasNext();) {String name = iter.next();String[] values = requestParams.get(name);String valueStr = "";for (int i = 0; i < values.length; i++) {valueStr = (i == values.length - 1) ? valueStr + values[i]: valueStr + values[i] + ",";}//乱码解决，这段代码在出现乱码时使用
//          valueStr = new String(valueStr.getBytes("ISO-8859-1"), "utf-8");params.put(name, valueStr);}// 只要我们收到了支付宝给我们的异步通知 验签成功 我们就要给支付宝返回successif(AlipaySignature.rsaCheckV1(params, alipayTemplate.getAlipay_public_key(), alipayTemplate.getCharset(), alipayTemplate.getSign_type())){return orderService.handlePayResult(vo);//方法返回的是"success";}log.warn("\n受到恶意验签攻击");return "fail";}}

notify_url负责可靠通信的，那alipay.return_url=http://member.gulimall.com/memberOrder.html是？支付成功后同步回到商家的指定页面

@GetMapping("/memberOrder.html")
public String memberOrderPage(@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum,
Model model) {。。。return "orderList";
}