<template>
	<div class="sys-open-access-container">
		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="900px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-QuestionFilled /> </el-icon>
					<span> 说明 </span>
				</div>
			</template>
			<div class="text-content">
				<h2>OpenAPI 使用</h2>
				<ul>
					<li>
						在需要使用 Signature 身份验证的 Api 中贴上
						<p><el-tag>[Authorize(AuthenticationSchemes = SignatureAuthenticationDefaults.AuthenticationScheme)]</el-tag></p>
					</li>
					<li>
						如果 Api 需要保留 Jwt 方式的身份验证，可贴上
						<p><el-tag>[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme + "," + SignatureAuthenticationDefaults.AuthenticationScheme)]</el-tag></p>
					</li>
					<li>
						通过对请求的签名，可以达到以下目的：
						<ul>
							<li>免登录识别访问接口用户的身份</li>
							<li>防止潜在的重放攻击</li>
						</ul>
					</li>
				</ul>
				<el-divider />
				<h2>OpenAPI 签名流程</h2>
				客户端在请求时，需要按照如下步骤生成签名 Signature，并添加公共参数：
				<h3>公共请求参数</h3>
				<p>在原始请求的基础上添加 Header 请求参数</p>
				<ul>
					<li><el-tag effect="plain">accessKey</el-tag>：身份标识</li>
					<li><el-tag effect="plain">timestamp</el-tag>：时间戳，精确到秒</li>
					<li><el-tag effect="plain">nonce</el-tag>：唯一随机数，建议为一个6位的随机数</li>
					<li><el-tag effect="plain">sign</el-tag>：签名数据（见“计算签名”部分）</li>
				</ul>
				<h3>计算签名</h3>
				<ul>
					<li>
						按照如下顺序对请求中的参数进行排序，各个参数通过&进行拼接（中间不含空格）：
						<p><el-tag>method & url & accessKey & timestamp & nonce</el-tag></p>
						<ul>
							<li><el-tag effect="plain">method</el-tag> 需要大写，如：GET</li>
							<li><el-tag effect="plain">url</el-tag> 去除协议、域名、参数，以 / 开头，如：/api/demo/helloWord</li>
						</ul>
					</li>
					<li>使用 HMAC-SHA256 协议创建基于哈希的消息身份验证代码 (HMAC)，以 <el-tag effect="plain">accessSecret</el-tag> 作为密钥，对上面拼接的参数进行计算签名，所得签名进行 Base-64 编码</li>
				</ul>
			</div>
			<div class="el-alert el-alert--info is-light">
				HMAC-SHA256 在线计算：
				<el-link href="https://1024tools.com/hmac" target="_blank" type="primary">https://1024tools.com/hmac</el-link>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="sysOpenAccessHelpView">
import { reactive } from 'vue';

const state = reactive({
	isShowDialog: false,
});

// 打开弹窗
const openDialog = () => {
	state.isShowDialog = true;
};

// // 关闭
// const close = () => {
// 	state.isShowDialog = false;
// };

// 导出对象
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.text-content {
	h1 {
		margin: 8px 0;
	}
	h2 {
		margin: 8px 0;
	}
	h3 {
		margin: 8px 0;
	}
	p {
		margin: 8px 0;
	}
	ul {
		padding: 0 0 0 30px;
		li {
			margin: 8px 0;
		}
	}
}
</style>
