mirror of https://github.com/Silentely/eSIM-Tools.git synced 2026-09-03 06:24:20 +08:00

Files

Abner ad16472fad 📝 docs: 全面审查并修复项目文档质量

- 重构 ARCHITECTURE.md，拆分未来架构到独立文件，修复 TypeScript 伪代码
- 修正 CLAUDE.md 模块结构图路径与实际代码一致
- 统一 README 中英文版快速开始步骤，补充环境变量配置
- 修复 TOKEN_REFRESH_FIX.md 未声明变量错误
- 统一修复文档格式模板，更新 reference 文件引用路径
- 优化 CORS_SOLUTION.md 标题语义和安全建议
- 补充 SECURITY.md CSP 配置上下文说明
- 调整 User_Guide.md 视频位置，补充扫码安装步骤

2026-05-19 19:30:37 +08:00

2.7 KiB

Raw Blame History

Giffgaff eSIM Tool - Technical Reference

A complete eSIM device change web tool built based on the Giffgaff-swap-esim.json Postman script.

📁 File Description

Main Files

src/giffgaff/giffgaff_modular.html - eSIM Device Change Tool (Production Version, Modular Architecture)
tests/test_giffgaff_esim.html - Comprehensive Test Page (Development/Test Version)

Reference Files

postman/giffgaff.html - Original single-file version (Reference)
postman/Giffgaff-swap-esim.json - Original Postman Script

🔧 Technical Architecture

Frontend Technology Stack

HTML5 - Semantic Structure
CSS3 - Responsive Design, Bootstrap 5.3.0
JavaScript (ES6+) - Modern JavaScript Features
Font Awesome 6.0.0 - Icon Library

API Integration

OAuth 2.0 PKCE - Secure Authentication Process
Giffgaff ID API - User Authentication and MFA
Giffgaff GraphQL API - Business Logic Processing
QR Code API - QR Code Generation Service (Prefer https://qrcode.show/, alternatives: quickchart.io and chart.googleapis.com)

Key API Endpoints

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/"
};

📝 Development Instructions

Core Component Architecture

// Global State Management
const appState = {
    accessToken: "",      // OAuth access token
    codeVerifier: "",     // PKCE code verifier
    emailCodeRef: "",     // Email verification reference
    emailSignature: "",   // MFA signature
    memberId: "",         // Member ID
    esimSSN: "",         // eSIM serial number
    lpaString: "",        // LPA download string
    currentStep: 1        // Current step
};

Main Function Description

generateCodeVerifier() - Generate PKCE code verifier
generateCodeChallenge() - Generate PKCE code challenge
showSection(stepNumber) - Show specified step
showStatus(element, message, type) - Show status information
generateQRCode(data) - Generate QR code

GraphQL Query Example

# Get Member Information
query getMemberProfileAndSim {
    memberProfile {
        id
        memberName
        __typename
    }
    sim {
        phoneNumber
        status
        __typename
    }
}

# Reserve eSIM
mutation reserveESim($input: ESimReservationInput!) {
    reserveESim: reserveESim(input: $input) {
        id
        esim {
            ssn
            activationCode
            __typename
        }
        __typename
    }
}

Document Version: 1.1.0 Last Updated: 2026-05-18 Maintainer: eSIM Tools Team

2.7 KiB Raw Blame History