feat: complete TASK-WP0-03 browser gate
This commit is contained in:
suyx
@@ -2,6 +2,47 @@
|
||||
|
||||
export interface ClientOptions { baseUrl?: string; fetch?: typeof globalThis.fetch; headers?: HeadersInit; }
|
||||
|
||||
export async function checkBrowserSupport(body: {
|
||||
"brands": Array<{
|
||||
"brand": string;
|
||||
"version": string;
|
||||
}>;
|
||||
"full_version_list": Array<{
|
||||
"brand": string;
|
||||
"version": string;
|
||||
}>;
|
||||
"platform": string;
|
||||
}, options: ClientOptions = {}): Promise<{
|
||||
"app_version": string;
|
||||
"browser": {
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
};
|
||||
"status": "supported";
|
||||
"supported_browsers": Array<{
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
}>;
|
||||
}> {
|
||||
const request = options.fetch ?? globalThis.fetch;
|
||||
const headers = new Headers(options.headers);
|
||||
headers.set("Content-Type", "application/json");
|
||||
const response = await request(`${options.baseUrl ?? ""}/api/v1/support/check`, { body: JSON.stringify(body), method: "POST", headers });
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
return response.json() as Promise<{
|
||||
"app_version": string;
|
||||
"browser": {
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
};
|
||||
"status": "supported";
|
||||
"supported_browsers": Array<{
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
}>;
|
||||
}>;
|
||||
}
|
||||
|
||||
export async function getBootstrap(options: ClientOptions = {}): Promise<{
|
||||
"app_version": string;
|
||||
"dependencies": Array<{
|
||||
|
||||
@@ -18,6 +18,33 @@ export type BootstrapResponse = {
|
||||
}>;
|
||||
};
|
||||
|
||||
export type BrowserSupportRequest = {
|
||||
"brands": Array<{
|
||||
"brand": string;
|
||||
"version": string;
|
||||
}>;
|
||||
"full_version_list": Array<{
|
||||
"brand": string;
|
||||
"version": string;
|
||||
}>;
|
||||
"platform": string;
|
||||
};
|
||||
|
||||
export type BrowserSupportSuccess = {
|
||||
"app_version": string;
|
||||
"browser": {
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
};
|
||||
"status": "supported";
|
||||
"supported_browsers": Array<{
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
}>;
|
||||
};
|
||||
|
||||
export type BrowserUnsupportedReason = "platform_unsupported" | "brand_unsupported" | "version_unsupported" | "identity_unavailable";
|
||||
|
||||
export type CorrelationId = string;
|
||||
|
||||
export type ErrorDetails = {
|
||||
@@ -28,7 +55,12 @@ export type ErrorDetails = {
|
||||
"message_key": string;
|
||||
}>;
|
||||
"latest_version"?: number | string;
|
||||
"reason"?: "platform_unsupported" | "brand_unsupported" | "version_unsupported" | "identity_unavailable";
|
||||
"remaining_bytes"?: number;
|
||||
"supported_browsers"?: Array<{
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
}>;
|
||||
};
|
||||
|
||||
export type ErrorEnvelope = {
|
||||
@@ -43,7 +75,12 @@ export type ErrorEnvelope = {
|
||||
"message_key": string;
|
||||
}>;
|
||||
"latest_version"?: number | string;
|
||||
"reason"?: "platform_unsupported" | "brand_unsupported" | "version_unsupported" | "identity_unavailable";
|
||||
"remaining_bytes"?: number;
|
||||
"supported_browsers"?: Array<{
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
}>;
|
||||
};
|
||||
"error_category"?: "upstream_timeout" | "upstream_failed" | "safety_rejected" | "model_disabled" | "gateway_balance_insufficient" | "gateway_contract_invalid" | "reference_invalid" | "unknown_retryable" | "unknown_non_retryable";
|
||||
"message_key": string;
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN" data-support-status="checking">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>浏览器支持检查 · Dada</title>
|
||||
<link rel="stylesheet" href="/support-gate.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-rule" aria-hidden="true"></div>
|
||||
<main>
|
||||
<section class="gate" aria-labelledby="gate-title">
|
||||
<div class="wordmark">DADA</div>
|
||||
<div id="status-code" class="code">BROWSER_UNSUPPORTED</div>
|
||||
<h1 id="gate-title" tabindex="0">当前浏览器无法使用 Dada</h1>
|
||||
<p id="gate-description" class="description">
|
||||
本次 P0-A 发布仅支持当前这台 Windows 电脑上、已经完成验收的 Chrome 或 Edge
|
||||
版本。当前环境无法可靠通过支持检查，因此不会加载任何产品功能。
|
||||
</p>
|
||||
|
||||
<div class="detection" role="status" aria-live="assertive" aria-atomic="true">
|
||||
<dl>
|
||||
<div>
|
||||
<dt>检测原因</dt>
|
||||
<dd id="reason-value" class="danger">identity_unavailable</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>当前浏览器</dt>
|
||||
<dd id="browser-value">正在检测</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>受支持环境</dt>
|
||||
<dd id="supported-value">等待发布记录</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<details>
|
||||
<summary>查看如何在 Chrome / Edge 中打开本机地址</summary>
|
||||
<p>
|
||||
请在当前 Windows 电脑上使用本次发布记录支持的 Chrome 或 Edge，打开
|
||||
<code>http://127.0.0.1:43121/</code>。
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<div class="actions">
|
||||
<button id="retry-button" type="button">重新检测</button>
|
||||
<button id="copy-button" class="secondary" type="button">复制本机地址</button>
|
||||
</div>
|
||||
<p id="no-bypass" class="no-bypass">没有“仍然继续”入口，也不会提供绕过令牌或参数。</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>P0-A · LOCALHOST ONLY · WINDOWS</footer>
|
||||
<script type="module" src="/support-gate.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,212 @@
|
||||
:root {
|
||||
color: #111111;
|
||||
background: #ffffff;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
font-synthesis: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: 10px minmax(0, 1fr) 48px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.top-rule {
|
||||
background: #eaff00;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.gate {
|
||||
width: min(700px, 100%);
|
||||
}
|
||||
|
||||
.wordmark {
|
||||
margin-bottom: 16px;
|
||||
font-size: 34px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.code {
|
||||
display: inline-block;
|
||||
padding: 6px 9px;
|
||||
color: #eaff00;
|
||||
background: #111111;
|
||||
font-family: Consolas, monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 18px 0 12px;
|
||||
font-size: 38px;
|
||||
line-height: 1.15;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
color: #555555;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.detection {
|
||||
min-height: 120px;
|
||||
margin-top: 20px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #111111;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dl > div {
|
||||
min-height: 30px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr);
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: right;
|
||||
font-family: Consolas, monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.danger,
|
||||
.no-bypass {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
details {
|
||||
margin-top: 14px;
|
||||
border: 1px solid #c7c7c7;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
details p {
|
||||
margin: 12px 0 0;
|
||||
color: #444444;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, monospace;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 170px;
|
||||
min-height: 44px;
|
||||
border: 1px solid #111111;
|
||||
border-radius: 0;
|
||||
padding: 0 16px;
|
||||
color: #111111;
|
||||
background: #eaff00;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
summary:focus-visible {
|
||||
outline: 3px solid #0067c0;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.no-bypass {
|
||||
margin: 14px 0 0;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #eaff00;
|
||||
background: #111111;
|
||||
font-family: Consolas, monospace;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
body {
|
||||
grid-template-rows: 8px auto 48px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
dl > div {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.actions,
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
const localAddress = "http://127.0.0.1:43121/";
|
||||
const root = document.documentElement;
|
||||
const gateTitle = document.querySelector("#gate-title");
|
||||
const gateDescription = document.querySelector("#gate-description");
|
||||
const statusCode = document.querySelector("#status-code");
|
||||
const noBypass = document.querySelector("#no-bypass");
|
||||
const reasonValue = document.querySelector("#reason-value");
|
||||
const browserValue = document.querySelector("#browser-value");
|
||||
const supportedValue = document.querySelector("#supported-value");
|
||||
const retryButton = document.querySelector("#retry-button");
|
||||
const copyButton = document.querySelector("#copy-button");
|
||||
|
||||
function browserLabel(fullVersionList) {
|
||||
const known = fullVersionList?.find(({ brand }) =>
|
||||
brand === "Google Chrome" || brand === "Microsoft Edge");
|
||||
return known ? `${known.brand} ${known.version.split(".")[0]}` : "无法可靠识别";
|
||||
}
|
||||
|
||||
function supportedLabel(supportedBrowsers) {
|
||||
if (!Array.isArray(supportedBrowsers) || supportedBrowsers.length === 0) return "等待发布记录";
|
||||
return supportedBrowsers.map(({ brand, major }) => `${brand} ${major}`).join(" / ");
|
||||
}
|
||||
|
||||
function showBlocked(reason, supportedBrowsers, fullVersionList) {
|
||||
root.dataset.supportStatus = "blocked";
|
||||
gateTitle.textContent = "当前浏览器无法使用 Dada";
|
||||
gateDescription.textContent = "本次 P0-A 发布仅支持当前这台 Windows 电脑上、已经完成验收的 Chrome 或 Edge 版本。当前环境无法可靠通过支持检查，因此不会加载任何产品功能。";
|
||||
statusCode.hidden = false;
|
||||
noBypass.hidden = false;
|
||||
reasonValue.classList.add("danger");
|
||||
reasonValue.textContent = reason;
|
||||
browserValue.textContent = browserLabel(fullVersionList);
|
||||
supportedValue.textContent = supportedLabel(supportedBrowsers);
|
||||
}
|
||||
|
||||
async function checkSupport() {
|
||||
root.dataset.supportStatus = "checking";
|
||||
reasonValue.textContent = "identity_unavailable";
|
||||
browserValue.textContent = "正在检测";
|
||||
|
||||
const userAgentData = navigator.userAgentData;
|
||||
if (!userAgentData || typeof userAgentData.getHighEntropyValues !== "function") {
|
||||
showBlocked("identity_unavailable", [], []);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const entropy = await userAgentData.getHighEntropyValues(["fullVersionList", "platform"]);
|
||||
const body = {
|
||||
brands: userAgentData.brands ?? [],
|
||||
full_version_list: entropy.fullVersionList ?? [],
|
||||
platform: entropy.platform ?? "",
|
||||
};
|
||||
const response = await fetch("/api/v1/support/check", {
|
||||
body: JSON.stringify(body),
|
||||
credentials: "same-origin",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
method: "POST",
|
||||
});
|
||||
const result = await response.json();
|
||||
if (response.ok && result.status === "supported") {
|
||||
root.dataset.supportStatus = "supported";
|
||||
gateTitle.textContent = "浏览器支持检查已通过";
|
||||
gateDescription.textContent = "当前浏览器已通过 Dada 支持检查。";
|
||||
statusCode.hidden = true;
|
||||
noBypass.hidden = true;
|
||||
reasonValue.classList.remove("danger");
|
||||
reasonValue.textContent = "supported";
|
||||
browserValue.textContent = `${result.browser.brand} ${result.browser.major}`;
|
||||
supportedValue.textContent = supportedLabel(result.supported_browsers);
|
||||
window.dispatchEvent(new CustomEvent("dada:support-ready"));
|
||||
return;
|
||||
}
|
||||
showBlocked(
|
||||
result.error?.details?.reason ?? "identity_unavailable",
|
||||
result.error?.details?.supported_browsers ?? [],
|
||||
body.full_version_list,
|
||||
);
|
||||
} catch {
|
||||
showBlocked("identity_unavailable", [], []);
|
||||
}
|
||||
}
|
||||
|
||||
retryButton.addEventListener("click", () => void checkSupport());
|
||||
copyButton.addEventListener("click", async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(localAddress);
|
||||
copyButton.textContent = "已复制本机地址";
|
||||
} catch {
|
||||
copyButton.textContent = localAddress;
|
||||
}
|
||||
});
|
||||
|
||||
void checkSupport();
|
||||
Reference in New Issue
Block a user