OneDrive API 申请配置指南 - 实现网盘同步功能

OneDrive/
└── Apps/
    └── QuickFillForm/
        ├── quickfillform-data.json
        └── backup/

class OneDriveSync {
    constructor() {
        // 替换为你的 Azure 应用程序 ID (Client ID)
        this.clientId = '12345678-1234-1234-1234-123456789abc';
        
        // 获取当前插件的 ID
        this.redirectUri = `https://${chrome.runtime.id}.chromiumapp.org/onedrive`;
        
        // Microsoft Graph API 端点
        this.graphEndpoint = 'https://graph.microsoft.com/v1.0';
        
        // 应用专用文件夹路径
        this.appFolderPath = '/me/drive/special/approot';
        
        // 请求的权限范围
        this.scopes = [
            'Files.ReadWrite.AppFolder',
            'offline_access'
        ];
    }
    
    // 获取访问令牌
    async getAccessToken() {
        return new Promise((resolve, reject) => {
            chrome.identity.launchWebAuthFlow({
                url: this.getAuthUrl(),
                interactive: true
            }, (redirectUrl) => {
                if (chrome.runtime.lastError) {
                    reject(chrome.runtime.lastError);
                    return;
                }
                
                // 从回调 URL 中提取 access_token
                const url = new URL(redirectUrl);
                const token = url.hash.match(/access_token=([^&]*)/)?.[1];
                
                if (token) {
                    resolve(token);
                } else {
                    reject(new Error('无法获取访问令牌'));
                }
            });
        });
    }
    
    // 构建授权 URL
    getAuthUrl() {
        const params = new URLSearchParams({
            client_id: this.clientId,
            response_type: 'token',
            redirect_uri: this.redirectUri,
            scope: this.scopes.join(' '),
            response_mode: 'fragment'
        });
        
        return `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?${params}`;
    }
    
    // 上传文件到 OneDrive
    async uploadFile(fileName, content) {
        const token = await this.getAccessToken();
        
        const response = await fetch(
            `${this.graphEndpoint}${this.appFolderPath}:/${fileName}:/content`,
            {
                method: 'PUT',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(content)
            }
        );
        
        if (!response.ok) {
            throw new Error(`上传失败: ${response.statusText}`);
        }
        
        return await response.json();
    }
    
    // 从 OneDrive 下载文件
    async downloadFile(fileName) {
        const token = await this.getAccessToken();
        
        const response = await fetch(
            `${this.graphEndpoint}${this.appFolderPath}:/${fileName}:/content`,
            {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            }
        );
        
        if (!response.ok) {
            throw new Error(`下载失败: ${response.statusText}`);
        }
        
        return await response.json();
    }
}

// 使用示例
const onedriveSync = new OneDriveSync();

// 上传数据
onedriveSync.uploadFile('data.json', { key: 'value' })
    .then(() => console.log('上传成功'))
    .catch(err => console.error('上传失败:', err));

// 下载数据
onedriveSync.downloadFile('data.json')
    .then(data => console.log('下载的数据:', data))
    .catch(err => console.error('下载失败:', err));

// 前端代码
function loginWithOneDrive() {
    const clientId = 'YOUR_CLIENT_ID';
    const redirectUri = 'https://yourdomain.com/callback';
    const scopes = 'Files.ReadWrite.AppFolder offline_access';
    
    const authUrl = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?` +
        `client_id=${clientId}` +
        `&response_type=code` +
        `&redirect_uri=${encodeURIComponent(redirectUri)}` +
        `&scope=${encodeURIComponent(scopes)}`;
    
    window.location.href = authUrl;
}

// 后端代码 (Node.js Express 示例)
app.get('/callback', async (req, res) => {
    const code = req.query.code;
    
    // 用授权码换取访问令牌
    const tokenResponse = await fetch('https://login.microsoftonline.com/common/oauth2/v2.0/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            client_id: process.env.CLIENT_ID,
            client_secret: process.env.CLIENT_SECRET,
            code: code,
            redirect_uri: 'https://yourdomain.com/callback',
            grant_type: 'authorization_code'
        })
    });
    
    const tokenData = await tokenResponse.json();
    
    // 保存 access_token 和 refresh_token
    req.session.accessToken = tokenData.access_token;
    req.session.refreshToken = tokenData.refresh_token;
    
    res.redirect('/dashboard');
});

{
    "manifest_version": 3,
    "name": "QuickFillForm",
    "version": "1.0.0",
    "permissions": [
        "identity",
        "storage"
    ],
    "host_permissions": [
        "https://login.microsoftonline.com/*",
        "https://graph.microsoft.com/*"
    ],
    "oauth2": {
        "client_id": "12345678-1234-1234-1234-123456789abc.chromiumapp.org",
        "scopes": [
            "Files.ReadWrite.AppFolder",
            "offline_access"
        ]
    }
}

// 测试上传功能
async function testUpload() {
    const testData = {
        name: '张三',
        email: 'zhangsan@example.com',
        phone: '13800138000'
    };
    
    try {
        const result = await onedriveSync.uploadFile('test-data.json', testData);
        console.log('✅ 上传成功:', result);
    } catch (error) {
        console.error('❌ 上传失败:', error);
    }
}

testUpload();

// 测试下载功能
async function testDownload() {
    try {
        const data = await onedriveSync.downloadFile('test-data.json');
        console.log('✅ 下载成功:', data);
    } catch (error) {
        console.error('❌ 下载失败:', error);
    }
}

testDownload();

AADSTS50011: The redirect URI specified in the request does not match

403 Forbidden: Access denied

401 Unauthorized: The access token has expired

class OneDriveSync {
    constructor() {
        this.accessToken = null;
        this.refreshToken = null;
        this.tokenExpiry = null;
    }
    
    // 获取有效的访问令牌
    async getValidAccessToken() {
        // 如果令牌未过期,直接返回
        if (this.accessToken && this.tokenExpiry > Date.now()) {
            return this.accessToken;
        }
        
        // 如果有刷新令牌,尝试刷新
        if (this.refreshToken) {
            return await this.refreshAccessToken();
        }
        
        // 否则重新登录
        return await this.getAccessToken();
    }
    
    // 刷新访问令牌
    async refreshAccessToken() {
        const response = await fetch('https://login.microsoftonline.com/common/oauth2/v2.0/token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                client_id: this.clientId,
                refresh_token: this.refreshToken,
                grant_type: 'refresh_token'
            })
        });
        
        const data = await response.json();
        
        this.accessToken = data.access_token;
        this.refreshToken = data.refresh_token;
        this.tokenExpiry = Date.now() + (data.expires_in * 1000);
        
        // 保存到本地存储
        chrome.storage.local.set({
            onedrive_access_token: this.accessToken,
            onedrive_refresh_token: this.refreshToken,
            onedrive_token_expiry: this.tokenExpiry
        });
        
        return this.accessToken;
    }
}

Access to fetch at 'https://graph.microsoft.com/...' has been blocked by CORS policy

// 前端调用后端 API
fetch('/api/onedrive/upload', {
    method: 'POST',
    body: JSON.stringify(data)
});

// 后端转发到 Microsoft Graph
app.post('/api/onedrive/upload', async (req, res) => {
    const response = await fetch('https://graph.microsoft.com/v1.0/...', {
        headers: { 'Authorization': `Bearer ${accessToken}` }
    });
    // ...
});

{
    "host_permissions": [
        "https://login.microsoftonline.com/*",
        "https://graph.microsoft.com/*"
    ]
}

AADSTS65001: The user or administrator has not consented to use the application

// ❌ 错误: 在前端代码中硬编码密钥
const clientSecret = 'your-secret-key-123456';

// ✅ 正确: 在后端使用环境变量
const clientSecret = process.env.AZURE_CLIENT_SECRET;

// ❌ 错误: 请求过多权限
const scopes = [
    'Files.ReadWrite.All',
    'Mail.Read',
    'Contacts.ReadWrite'
];

// ✅ 正确: 只请求必需的权限
const scopes = [
    'Files.ReadWrite.AppFolder',
    'offline_access'
];

// ✅ 浏览器插件: 使用 chrome.storage.local
chrome.storage.local.set({
    onedrive_token: encryptedToken  // 最好加密存储
});

// ✅ Web 应用: 使用 HttpOnly Cookie
res.cookie('access_token', token, {
    httpOnly: true,
    secure: true,
    sameSite: 'strict'
});

// 上传前加密敏感数据
async function uploadSecureData(data) {
    const encrypted = await encryptData(data);
    await onedriveSync.uploadFile('secure-data.enc', encrypted);
}

// 下载后解密
async function downloadSecureData() {
    const encrypted = await onedriveSync.downloadFile('secure-data.enc');
    return await decryptData(encrypted);
}

async function getFileVersions(fileName) {
    const token = await onedriveSync.getValidAccessToken();
    
    const response = await fetch(
        `https://graph.microsoft.com/v1.0/me/drive/special/approot:/${fileName}:/versions`,
        {
            headers: { 'Authorization': `Bearer ${token}` }
        }
    );
    
    const data = await response.json();
    return data.value;  // 返回版本列表
}

async function syncChanges(deltaLink) {
    const token = await onedriveSync.getValidAccessToken();
    
    const url = deltaLink || 
        'https://graph.microsoft.com/v1.0/me/drive/special/approot/delta';
    
    const response = await fetch(url, {
        headers: { 'Authorization': `Bearer ${token}` }
    });
    
    const data = await response.json();
    
    // 处理变化的文件
    for (const item of data.value) {
        if (item.deleted) {
            console.log('文件已删除:', item.name);
        } else {
            console.log('文件已更新:', item.name);
        }
    }
    
    // 保存 deltaLink 供下次使用
    return data['@odata.deltaLink'];
}

async function smartSync(fileName, localData) {
    try {
        // 下载远程文件
        const remoteData = await onedriveSync.downloadFile(fileName);
        
        // 比较时间戳
        if (remoteData.lastModified > localData.lastModified) {
            // 远程更新,下载覆盖本地
            return { action: 'download', data: remoteData };
        } else if (localData.lastModified > remoteData.lastModified) {
            // 本地更新,上传覆盖远程
            await onedriveSync.uploadFile(fileName, localData);
            return { action: 'upload', data: localData };
        } else {
            // 智能合并
            const merged = mergeData(localData, remoteData);
            await onedriveSync.uploadFile(fileName, merged);
            return { action: 'merge', data: merged };
        }
    } catch (error) {
        // 文件不存在,直接上传
        if (error.status === 404) {
            await onedriveSync.uploadFile(fileName, localData);
            return { action: 'create', data: localData };
        }
        throw error;
    }
}

async function batchUpload(files) {
    const token = await onedriveSync.getValidAccessToken();
    
    const requests = files.map((file, index) => ({
        id: index.toString(),
        method: 'PUT',
        url: `/me/drive/special/approot:/${file.name}:/content`,
        headers: {
            'Content-Type': 'application/json'
        },
        body: file.content
    }));
    
    const response = await fetch('https://graph.microsoft.com/v1.0/$batch', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ requests })
    });
    
    return await response.json();
}