mirror of
https://github.com/Silentely/eSIM-Tools.git
synced 2026-09-03 06:24:20 +08:00
- 重构 ARCHITECTURE.md,拆分未来架构到独立文件,修复 TypeScript 伪代码 - 修正 CLAUDE.md 模块结构图路径与实际代码一致 - 统一 README 中英文版快速开始步骤,补充环境变量配置 - 修复 TOKEN_REFRESH_FIX.md 未声明变量错误 - 统一修复文档格式模板,更新 reference 文件引用路径 - 优化 CORS_SOLUTION.md 标题语义和安全建议 - 补充 SECURITY.md CSP 配置上下文说明 - 调整 User_Guide.md 视频位置,补充扫码安装步骤
2.6 KiB
2.6 KiB
Giffgaff eSIM 工具 - 技术参考
基于 Giffgaff-swap-esim.json Postman 脚本构建的完整 eSIM 设备更换网页工具。
📁 文件说明
主要文件
src/giffgaff/giffgaff_modular.html- eSIM 设备更换工具(生产版本,模块化架构)tests/test_giffgaff_esim.html- 综合测试页面(开发/测试版本)
参考文件
postman/giffgaff.html- 原始单文件版本(参考)postman/Giffgaff-swap-esim.json- 原始 Postman 脚本
🔧 技术架构
前端技术栈
- HTML5 - 语义化结构
- CSS3 - 响应式设计,Bootstrap 5.3.0
- JavaScript (ES6+) - 现代 JavaScript 特性
- Font Awesome 6.0.0 - 图标库
API 集成
- OAuth 2.0 PKCE - 安全认证流程
- Giffgaff ID API - 用户认证和 MFA
- Giffgaff GraphQL API - 业务逻辑处理
- QR Code API - 二维码生成服务(优先
https://qrcode.show/,备选quickchart.io与chart.googleapis.com)
关键 API 端点
const apiEndpoints = {
mfaChallenge: "https://id.giffgaff.com/v4/mfa/challenge/me",
mfaValidation: "https://id.giffgaff.com/v4/mfa/validation",
graphql: "https://publicapi.giffgaff.com/gateway/graphql",
qrcode: "https://qrcode.show/"
};
📝 开发说明
核心组件架构
// 全局状态管理
const appState = {
accessToken: "", // OAuth 访问令牌
codeVerifier: "", // PKCE 代码验证器
emailCodeRef: "", // 邮件验证引用
emailSignature: "", // MFA 签名
memberId: "", // 会员 ID
esimSSN: "", // eSIM 序列号
lpaString: "", // LPA 下载字符串
currentStep: 1 // 当前步骤
};
主要函数说明
generateCodeVerifier()- 生成 PKCE 代码验证器generateCodeChallenge()- 生成 PKCE 代码挑战showSection(stepNumber)- 显示指定步骤showStatus(element, message, type)- 显示状态信息generateQRCode(data)- 生成二维码
GraphQL 查询示例
# 获取会员信息
query getMemberProfileAndSim {
memberProfile {
id
memberName
__typename
}
sim {
phoneNumber
status
__typename
}
}
# 预订 eSIM
mutation reserveESim($input: ESimReservationInput!) {
reserveESim: reserveESim(input: $input) {
id
esim {
ssn
activationCode
__typename
}
__typename
}
}
文档版本: 1.1.0 最后更新: 2026-05-18 维护者: eSIM Tools Team