Supabase 前端示例合集（登录、上传、下载）
This commit is contained in:
zly
146
supabase-stack/examples/test_frontend_config.html
Normal file
146
supabase-stack/examples/test_frontend_config.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>前端配置测试</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; padding: 20px; }
|
||||
.section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
|
||||
.debug { background: #f0f0f0; padding: 10px; border-radius: 5px; font-family: monospace; white-space: pre-wrap; }
|
||||
button { padding: 10px 20px; margin: 5px; border: none; border-radius: 5px; background: #007bff; color: white; cursor: pointer; }
|
||||
.error { color: red; }
|
||||
.success { color: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section">
|
||||
<h2>前端配置测试</h2>
|
||||
<button onclick="testConfig()">测试配置</button>
|
||||
<div id="result" class="debug">点击按钮开始测试...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 复制upload.html的配置
|
||||
const SUPABASE_URL = 'https://amiap.hzau.edu.cn/supa';
|
||||
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzYzODAyNjY5LCJleHAiOjIwNzkxNjI2Njl9.ltGXvQKpguLaf8Vzomn310hLgOZbrjqZT-F3rR00ulg';
|
||||
|
||||
const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
|
||||
|
||||
console.log('🌐 当前环境:', isLocalhost ? '本地测试' : '生产环境');
|
||||
console.log('🔗 Supabase URL:', SUPABASE_URL);
|
||||
|
||||
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
||||
|
||||
async function testConfig() {
|
||||
const resultDiv = document.getElementById('result');
|
||||
resultDiv.textContent = '测试中...';
|
||||
|
||||
try {
|
||||
console.log('🧪 开始配置测试...');
|
||||
|
||||
// 1. 测试存储桶列表
|
||||
console.log('1️⃣ 测试存储桶列表...');
|
||||
const { data: buckets, error: bucketError } = await supabase.storage.listBuckets();
|
||||
|
||||
if (bucketError) {
|
||||
throw new Error(`存储桶列表失败: ${bucketError.message}`);
|
||||
}
|
||||
|
||||
console.log('✅ 存储桶列表成功:', buckets.length, '个存储桶');
|
||||
const bucketNames = buckets.map(b => b.name);
|
||||
|
||||
// 2. 测试认证
|
||||
console.log('2️⃣ 测试认证状态...');
|
||||
const { data: { session }, error: authError } = await supabase.auth.getSession();
|
||||
|
||||
if (authError) {
|
||||
console.warn('⚠️ 认证错误:', authError.message);
|
||||
}
|
||||
|
||||
const hasAuth = !!session;
|
||||
const token = hasAuth ? session.access_token : SUPABASE_ANON_KEY;
|
||||
console.log(hasAuth ? '✅ 已登录' : '🔓 使用匿名模式');
|
||||
|
||||
// 3. 测试TUS上传创建
|
||||
console.log('3️⃣ 测试TUS上传创建...');
|
||||
if (buckets.length === 0) {
|
||||
throw new Error('没有可用的存储桶');
|
||||
}
|
||||
|
||||
const testBucket = buckets[0].name;
|
||||
console.log('🎯 使用存储桶:', testBucket);
|
||||
|
||||
// 准备元数据
|
||||
const metadata = {
|
||||
bucketName: btoa(testBucket),
|
||||
objectName: btoa(`config-test-${Date.now()}.txt`),
|
||||
contentType: btoa('text/plain'),
|
||||
cacheControl: btoa('3600')
|
||||
};
|
||||
|
||||
const headers = {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'apikey': SUPABASE_ANON_KEY,
|
||||
'Content-Type': 'application/offset+octet-stream',
|
||||
'Tus-Resumable': '1.0.0',
|
||||
'Upload-Length': '100',
|
||||
'Upload-Metadata': Object.entries(metadata).map(([k, v]) => `${k} ${v}`).join(','),
|
||||
'x-upsert': 'true'
|
||||
};
|
||||
|
||||
console.log('📤 发送TUS请求...');
|
||||
const response = await fetch(`${SUPABASE_URL}/storage/v1/upload/resumable`, {
|
||||
method: 'POST',
|
||||
headers: headers
|
||||
});
|
||||
|
||||
console.log('📊 TUS响应状态:', response.status, response.statusText);
|
||||
const responseText = await response.text();
|
||||
|
||||
// 4. 生成测试报告
|
||||
const report = {
|
||||
timestamp: new Date().toISOString(),
|
||||
environment: isLocalhost ? '本地测试' : '生产环境',
|
||||
supabaseUrl: SUPABASE_URL,
|
||||
anonKey: SUPABASE_ANON_KEY.substring(0, 20) + '...',
|
||||
buckets: {
|
||||
count: buckets.length,
|
||||
names: bucketNames
|
||||
},
|
||||
authentication: {
|
||||
hasSession: hasAuth,
|
||||
tokenType: hasAuth ? 'JWT' : '匿名',
|
||||
tokenPreview: token.substring(0, 20) + '...'
|
||||
},
|
||||
tusTest: {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
response: responseText || '空响应',
|
||||
success: response.status === 201,
|
||||
location: response.headers.get('Location') || '无Location头'
|
||||
}
|
||||
};
|
||||
|
||||
console.log('✅ 测试完成!');
|
||||
resultDiv.textContent = JSON.stringify(report, null, 2);
|
||||
|
||||
// 高亮显示结果
|
||||
if (response.status === 201) {
|
||||
resultDiv.innerHTML = resultDiv.innerHTML.replace('tusTest', '🎉 tusTest');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 测试失败:', error);
|
||||
resultDiv.innerHTML = `<span class="error">❌ 测试失败: ${error.message}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时自动测试
|
||||
window.addEventListener('load', () => {
|
||||
console.log('🔍 前端配置测试页面加载完成');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user