代码沙箱开放API
这一步非常简单
就是提供公共方法
引入代码沙箱的具体实现
/**
* 执行代码
*
* @param executeCodeRequest
* @return
*/
@PostMapping("/executeCode")
ExecuteCodeResponse executeCode(@RequestBody ExecuteCodeRequest executeCodeRequest, HttpServletRequest request,
HttpServletResponse response) {
// 基本的认证
String authHeader = request.getHeader(AUTH_REQUEST_HEADER);
if (!AUTH_REQUEST_SECRET.equals(authHeader)) {
response.setStatus(403);
return null;
}
if (executeCodeRequest == null) {
throw new RuntimeException("请求参数为空");
}
return javaNativeCodeSandbox.executeCode(executeCodeRequest);
}现在我们想想看我们之前的后端是怎么做的
我们写了一个示例
用了个策略模式
只是为了跑通流程
现在我们要把接口放进来
我们要补全远程代码沙箱里面的代码
定义新的错误枚举类型
API_REQUEST_ERROR( 50010, "接口调用失败");以便于我们抛出异常
if(StringUtils.isBlank(responseStr)){
throw new BusinessException(API_REQUEST_ERROR, "executeCode remoteSandbox error, message = {}"+responseStr);
}
我们用hutool包进行数据封装
进入配置里面 此时我们就能修改
接下来我们进行测试
此时这个API是不安全的
接口调用是不安全的
调用安全性
如果将服务不做任何权限校验 直接发到公网 是不安全的
怎么提高安全性呢
调用方和服务提供方之间约定一个字符串 只是在服务器内部传递
这个字符串最好是加密的字符串
约定好一个字符串
如果调用方的请求头和请求秘钥和接口定义的不一致 就不给予调用
优点：简单 比较适合内部系统之间的相互调用 相对可行的环境内部调用
缺点：不够灵活 如果key泄露或者是变更 得去修改代码
调用方 在调用的时候补充请求头
package com.yupi.yuojcodesandbox.controller;
import com.yupi.yuojcodesandbox.JavaNativeCodeSandbox;
import com.yupi.yuojcodesandbox.model.ExecuteCodeRequest;
import com.yupi.yuojcodesandbox.model.ExecuteCodeResponse;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@RestController("/")
public class MainController {
// 定义鉴权请求头和密钥
private static final String AUTH_REQUEST_HEADER = "auth";
private static final String AUTH_REQUEST_SECRET = "secretKey";
@Resource
private JavaNativeCodeSandbox javaNativeCodeSandbox;
@GetMapping("/health")
public String healthCheck() {
return "ok";
}
/**
* 执行代码
*
* @param executeCodeRequest
* @return
*/
@PostMapping("/executeCode")
ExecuteCodeResponse executeCode(@RequestBody ExecuteCodeRequest executeCodeRequest, HttpServletRequest request,
HttpServletResponse response) {
// 基本的认证
String authHeader = request.getHeader(AUTH_REQUEST_HEADER);
if (!AUTH_REQUEST_SECRET.equals(authHeader)) {
response.setStatus(403);
return null;
}
if (executeCodeRequest == null) {
throw new RuntimeException("请求参数为空");
}
return javaNativeCodeSandbox.executeCode(executeCodeRequest);
}
}我们也可以开放API签名认证
给允许调用的人员分配accessKey secretKey
然后校验这两组key是否匹配
跑通整个项目流程
前端后端 一起工作
远程代码沙箱
后端
前端
接下来我们就要尝试去跑通整个项目流程
写一个前端流程
写一个题目提交页面
<template>
<div id="questionSubmitView">
<a-form :model="searchParams" layout="inline">
<a-form-item field="questionId" label="题号" style="min-width: 240px">
<a-input v-model="searchParams.questionId" placeholder="请输入" />
</a-form-item>
<a-form-item field="language" label="编程语言" style="min-width: 240px">
<a-select
v-model="searchParams.language"
:style="{ width: '320px' }"
placeholder="选择编程语言"
>
<a-option>java</a-option>
<a-option>cpp</a-option>
<a-option>go</a-option>
<a-option>html</a-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="doSubmit">搜索</a-button>
</a-form-item>
</a-form>
<a-divider size="0" />
<a-table
:ref="tableRef"
:columns="columns"
:data="dataList"
:pagination="{
showTotal: true,
pageSize: searchParams.pageSize,
current: searchParams.current,
total,
}"
@page-change="onPageChange"
>
<template #judgeInfo="{ record }">
{{ JSON.stringify(record.judgeInfo) }}
</template>
<template #createTime="{ record }">
{{ moment(record.createTime).format("YYYY-MM-DD") }}
</template>
</a-table>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import {
Question,
QuestionControllerService,
QuestionSubmitQueryRequest,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import moment from "moment";
const tableRef = ref();
const dataList = ref([]);
const total = ref(0);
const searchParams = ref<QuestionSubmitQueryRequest>({
questionId: undefined,
language: undefined,
pageSize: 10,
current: 1,
});
const loadData = async () => {
const res = await QuestionControllerService.listQuestionSubmitByPageUsingPost(
{
...searchParams.value,
sortField: "createTime",
sortOrder: "descend",
}
);
if (res.code === 0) {
dataList.value = res.data.records;
total.value = res.data.total;
} else {
message.error("加载失败，" + res.message);
}
};
/**
* 监听 searchParams 变量，改变时触发页面的重新加载
*/
watchEffect(() => {
loadData();
});
/**
* 页面加载时，请求数据
*/
onMounted(() => {
loadData();
});
const columns = [
{
title: "提交号",
dataIndex: "id",
},
{
title: "编程语言",
dataIndex: "language",
},
{
title: "判题信息",
slotName: "judgeInfo",
},
{
title: "判题状态",
dataIndex: "status",
},
{
title: "题目 id",
dataIndex: "questionId",
},
{
title: "提交者 id",
dataIndex: "userId",
},
{
title: "创建时间",
slotName: "createTime",
},
];
const onPageChange = (page: number) => {
searchParams.value = {
...searchParams.value,
current: page,
};
};
const router = useRouter();
/**
* 跳转到做题页面
* @param question
*/
const toQuestionPage = (question: Question) => {
router.push({
path: `/view/question/${question.id}`,
});
};
/**
* 确认搜索，重新加载数据
*/
const doSubmit = () => {
// 这里需要重置搜索页号
searchParams.value = {
...searchParams.value,
current: 1,
};
};
</script>
<style scoped>
#questionSubmitView {
max-width: 1280px;
margin: 0 auto;
}
</style>
这段代码定义了一个异步函数 loadData，用于加载分页问题提交的数据。它调用 QuestionControllerService 的 listQuestionSubmitByPageUsingPost 方法，传入的参数是 searchParams.value 的内容，并添加了排序字段和顺序。如果返回结果的 code 为 0，说明请求成功，则将返回的记录赋值给 dataList，同时更新总数 total；如果请求失败，则显示错误信息。
这是对象展开运算符（spread operator）的写法，...searchParams.value 将 searchParams.value 对象的所有属性展开，并与后面的 sortField 和 sortOrder 一起创建一个新对象。这种写法可以方便地合并对象属性。
封装请求信息
后端的提交是异步执行的
推荐的是每十秒刷新一下状态
