mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-22 16:43:35 +00:00
feat: 支持sessionKey完成oauth授权
This commit is contained in:
@@ -2029,6 +2029,7 @@
|
||||
<!-- 步骤2: OAuth授权 -->
|
||||
<OAuthFlow
|
||||
v-if="oauthStep === 2 && form.addType === 'oauth'"
|
||||
ref="oauthFlowRef"
|
||||
:platform="form.platform"
|
||||
:proxy="form.proxy"
|
||||
@back="oauthStep = 1"
|
||||
@@ -2052,11 +2053,45 @@
|
||||
<h4 class="mb-3 font-semibold text-blue-900 dark:text-blue-200">
|
||||
Claude Setup Token 授权
|
||||
</h4>
|
||||
<p class="mb-4 text-sm text-blue-800 dark:text-blue-300">
|
||||
请按照以下步骤通过 Setup Token 完成 Claude 账户的授权:
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- 授权方式选择 -->
|
||||
<div class="mb-4">
|
||||
<p class="mb-3 text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
选择授权方式:
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<label class="flex cursor-pointer items-center">
|
||||
<input
|
||||
v-model="authMethod"
|
||||
class="mr-2 text-blue-600 focus:ring-blue-500"
|
||||
type="radio"
|
||||
value="manual"
|
||||
@change="onAuthMethodChange"
|
||||
/>
|
||||
<span class="text-sm text-blue-800 dark:text-blue-300">
|
||||
<i class="fas fa-link mr-1" />手动授权
|
||||
</span>
|
||||
</label>
|
||||
<label class="flex cursor-pointer items-center">
|
||||
<input
|
||||
v-model="authMethod"
|
||||
class="mr-2 text-blue-600 focus:ring-blue-500"
|
||||
type="radio"
|
||||
value="cookie"
|
||||
@change="onAuthMethodChange"
|
||||
/>
|
||||
<span class="text-sm text-blue-800 dark:text-blue-300">
|
||||
<i class="fas fa-cookie mr-1" />Cookie 自动授权
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手动授权流程 -->
|
||||
<div v-if="authMethod === 'manual'" class="space-y-4">
|
||||
<p class="mb-4 text-sm text-blue-800 dark:text-blue-300">
|
||||
请按照以下步骤通过 Setup Token 完成 Claude 账户的授权:
|
||||
</p>
|
||||
<!-- 步骤1: 生成授权链接 -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
@@ -2182,6 +2217,113 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cookie自动授权流程 -->
|
||||
<div v-if="authMethod === 'cookie'" class="space-y-4">
|
||||
<p class="mb-4 text-sm text-blue-800 dark:text-blue-300">
|
||||
使用 sessionKey 自动完成授权,无需手动打开链接。
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<i class="fas fa-cookie text-blue-500" />sessionKey
|
||||
<span
|
||||
v-if="parsedSessionKeyCount > 1"
|
||||
class="rounded-full bg-blue-500 px-2 py-0.5 text-xs text-white"
|
||||
>
|
||||
{{ parsedSessionKeyCount }} 个
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="sessionKey"
|
||||
class="form-input w-full resize-y border-gray-300 font-mono text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
|
||||
:class="{ 'border-red-500': cookieAuthError }"
|
||||
placeholder="每行一个 sessionKey,例如: sk-ant-sid01-xxxxx... sk-ant-sid01-yyyyy..."
|
||||
rows="3"
|
||||
/>
|
||||
<p
|
||||
v-if="parsedSessionKeyCount > 1"
|
||||
class="mt-1 text-xs text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
<i class="fas fa-info-circle mr-1" />
|
||||
将批量创建 {{ parsedSessionKeyCount }} 个账户
|
||||
</p>
|
||||
<p v-if="cookieAuthError" class="mt-1 text-xs text-red-500">
|
||||
{{ cookieAuthError }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 帮助说明 -->
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center text-xs text-blue-600 hover:text-blue-700"
|
||||
type="button"
|
||||
@click="showSessionKeyHelp = !showSessionKeyHelp"
|
||||
>
|
||||
<i
|
||||
:class="
|
||||
showSessionKeyHelp
|
||||
? 'fas fa-chevron-down mr-1'
|
||||
: 'fas fa-chevron-right mr-1'
|
||||
"
|
||||
/>
|
||||
如何获取 sessionKey?
|
||||
</button>
|
||||
<div
|
||||
v-if="showSessionKeyHelp"
|
||||
class="mt-3 rounded border border-gray-200 bg-gray-50 p-3 dark:border-gray-600 dark:bg-gray-700"
|
||||
>
|
||||
<ol class="space-y-2 text-xs text-gray-600 dark:text-gray-300">
|
||||
<li>1. 在浏览器中登录 <strong>claude.ai</strong></li>
|
||||
<li>2. 按 <strong>F12</strong> 打开开发者工具</li>
|
||||
<li>3. 切换到 <strong>"Application"</strong> (应用) 标签页</li>
|
||||
<li>
|
||||
4. 在左侧选择 <strong>"Cookies"</strong> →
|
||||
<strong>"https://claude.ai"</strong>
|
||||
</li>
|
||||
<li>5. 找到键为 <strong>"sessionKey"</strong> 的那一行</li>
|
||||
<li>6. 复制其 <strong>"Value"</strong> (值) 列的内容</li>
|
||||
</ol>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-info-circle mr-1" />
|
||||
sessionKey 通常以 "sk-ant-" 开头
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 开始授权按钮 -->
|
||||
<button
|
||||
class="btn btn-primary w-full px-4 py-3"
|
||||
:disabled="cookieAuthLoading || !sessionKey.trim()"
|
||||
type="button"
|
||||
@click="handleCookieAuth"
|
||||
>
|
||||
<div v-if="cookieAuthLoading" class="loading-spinner mr-2" />
|
||||
<i v-else class="fas fa-magic mr-2" />
|
||||
<template v-if="cookieAuthLoading && batchProgress.total > 1">
|
||||
正在授权 {{ batchProgress.current }}/{{ batchProgress.total }}...
|
||||
</template>
|
||||
<template v-else-if="cookieAuthLoading"> 授权中... </template>
|
||||
<template v-else> 开始自动授权 </template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded border border-yellow-300 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/30"
|
||||
>
|
||||
<p class="text-xs text-yellow-800 dark:text-yellow-300">
|
||||
<i class="fas fa-exclamation-triangle mr-1" />
|
||||
<strong>提示:</strong>如果您设置了代理,Cookie授权也会使用相同的代理配置。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2196,6 +2338,7 @@
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
v-if="authMethod === 'manual'"
|
||||
class="btn btn-primary flex-1 px-6 py-3 font-semibold"
|
||||
:disabled="!canExchangeSetupToken || setupTokenExchanging"
|
||||
type="button"
|
||||
@@ -3538,6 +3681,9 @@ const { showConfirmModal, confirmOptions, showConfirm, handleConfirm, handleCanc
|
||||
const isEdit = computed(() => !!props.account)
|
||||
const show = ref(true)
|
||||
|
||||
// OAuthFlow 组件引用
|
||||
const oauthFlowRef = ref(null)
|
||||
|
||||
// OAuth步骤
|
||||
const oauthStep = ref(1)
|
||||
const loading = ref(false)
|
||||
@@ -3551,6 +3697,22 @@ const setupTokenAuthCode = ref('')
|
||||
const setupTokenCopied = ref(false)
|
||||
const setupTokenSessionId = ref('')
|
||||
|
||||
// Cookie自动授权相关状态
|
||||
const authMethod = ref('manual') // 'manual' | 'cookie'
|
||||
const sessionKey = ref('')
|
||||
const cookieAuthLoading = ref(false)
|
||||
const cookieAuthError = ref('')
|
||||
const showSessionKeyHelp = ref(false)
|
||||
const batchProgress = ref({ current: 0, total: 0 }) // 批量进度
|
||||
|
||||
// 解析后的 sessionKey 数量
|
||||
const parsedSessionKeyCount = computed(() => {
|
||||
return sessionKey.value
|
||||
.split('\n')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s.length > 0).length
|
||||
})
|
||||
|
||||
// Claude Code 统一 User-Agent 信息
|
||||
const unifiedUserAgent = ref('')
|
||||
const clearingCache = ref(false)
|
||||
@@ -4193,10 +4355,198 @@ const exchangeSetupTokenCode = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 处理OAuth成功
|
||||
const handleOAuthSuccess = async (tokenInfo) => {
|
||||
// =============================================================================
|
||||
// Cookie自动授权相关方法
|
||||
// =============================================================================
|
||||
|
||||
// Cookie自动授权(支持批量)
|
||||
const handleCookieAuth = async () => {
|
||||
// 解析多行输入
|
||||
const sessionKeys = sessionKey.value
|
||||
.split('\n')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s.length > 0)
|
||||
|
||||
if (sessionKeys.length === 0) {
|
||||
cookieAuthError.value = '请输入至少一个 sessionKey'
|
||||
return
|
||||
}
|
||||
|
||||
cookieAuthLoading.value = true
|
||||
cookieAuthError.value = ''
|
||||
batchProgress.value = { current: 0, total: sessionKeys.length }
|
||||
|
||||
const isSetupToken = form.value.addType === 'setup-token'
|
||||
const proxyPayload = buildProxyPayload(form.value.proxy)
|
||||
|
||||
const results = []
|
||||
const errors = []
|
||||
|
||||
for (let i = 0; i < sessionKeys.length; i++) {
|
||||
batchProgress.value.current = i + 1
|
||||
try {
|
||||
const payload = {
|
||||
sessionKey: sessionKeys[i],
|
||||
...(proxyPayload && { proxy: proxyPayload })
|
||||
}
|
||||
|
||||
let result
|
||||
if (isSetupToken) {
|
||||
result = await accountsStore.oauthSetupTokenWithCookie(payload)
|
||||
} else {
|
||||
result = await accountsStore.oauthWithCookie(payload)
|
||||
}
|
||||
results.push(result)
|
||||
} catch (error) {
|
||||
errors.push({
|
||||
index: i + 1,
|
||||
key: sessionKeys[i].substring(0, 20) + '...',
|
||||
error: error.message
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
batchProgress.value = { current: 0, total: 0 }
|
||||
|
||||
if (results.length > 0) {
|
||||
try {
|
||||
// 成功后处理OAuth数据(传递数组)
|
||||
// cookieAuthLoading 保持 true,直到账号创建完成
|
||||
await handleOAuthSuccess(results)
|
||||
} finally {
|
||||
cookieAuthLoading.value = false
|
||||
}
|
||||
} else {
|
||||
cookieAuthLoading.value = false
|
||||
}
|
||||
|
||||
if (errors.length > 0 && results.length === 0) {
|
||||
cookieAuthError.value = '全部授权失败,请检查 sessionKey 是否有效'
|
||||
} else if (errors.length > 0) {
|
||||
cookieAuthError.value = `${errors.length} 个授权失败`
|
||||
}
|
||||
}
|
||||
|
||||
// 重置Cookie授权状态
|
||||
const resetCookieAuth = () => {
|
||||
sessionKey.value = ''
|
||||
cookieAuthError.value = ''
|
||||
showSessionKeyHelp.value = false
|
||||
batchProgress.value = { current: 0, total: 0 }
|
||||
}
|
||||
|
||||
// 切换授权方式时重置状态
|
||||
const onAuthMethodChange = () => {
|
||||
// 切换到手动模式时清除Cookie相关状态
|
||||
if (authMethod.value === 'manual') {
|
||||
resetCookieAuth()
|
||||
} else {
|
||||
// 切换到Cookie模式时清除手动授权状态
|
||||
setupTokenAuthUrl.value = ''
|
||||
setupTokenAuthCode.value = ''
|
||||
setupTokenSessionId.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 构建 Claude 账户数据(辅助函数)
|
||||
const buildClaudeAccountData = (tokenInfo, accountName, clientId) => {
|
||||
const proxyPayload = buildProxyPayload(form.value.proxy)
|
||||
const claudeOauthPayload = tokenInfo.claudeAiOauth || tokenInfo
|
||||
|
||||
const data = {
|
||||
name: accountName,
|
||||
description: form.value.description,
|
||||
accountType: form.value.accountType,
|
||||
groupId: form.value.accountType === 'group' ? form.value.groupId : undefined,
|
||||
groupIds: form.value.accountType === 'group' ? form.value.groupIds : undefined,
|
||||
expiresAt: form.value.expiresAt || undefined,
|
||||
proxy: proxyPayload,
|
||||
claudeAiOauth: claudeOauthPayload,
|
||||
priority: form.value.priority || 50,
|
||||
autoStopOnWarning: form.value.autoStopOnWarning || false,
|
||||
useUnifiedUserAgent: form.value.useUnifiedUserAgent || false,
|
||||
useUnifiedClientId: form.value.useUnifiedClientId || false,
|
||||
unifiedClientId: clientId,
|
||||
subscriptionInfo: {
|
||||
accountType: form.value.subscriptionType || 'claude_max',
|
||||
hasClaudeMax: form.value.subscriptionType === 'claude_max',
|
||||
hasClaudePro: form.value.subscriptionType === 'claude_pro',
|
||||
manuallySet: true
|
||||
}
|
||||
}
|
||||
|
||||
// 处理 extInfo
|
||||
if (claudeOauthPayload) {
|
||||
const extInfoPayload = {}
|
||||
const extSource = claudeOauthPayload.extInfo
|
||||
if (extSource?.org_uuid) extInfoPayload.org_uuid = extSource.org_uuid
|
||||
if (extSource?.account_uuid) extInfoPayload.account_uuid = extSource.account_uuid
|
||||
|
||||
if (!extSource) {
|
||||
if (claudeOauthPayload.organization?.uuid) {
|
||||
extInfoPayload.org_uuid = claudeOauthPayload.organization.uuid
|
||||
}
|
||||
if (claudeOauthPayload.account?.uuid) {
|
||||
extInfoPayload.account_uuid = claudeOauthPayload.account.uuid
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(extInfoPayload).length > 0) {
|
||||
data.extInfo = extInfoPayload
|
||||
}
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
// 处理OAuth成功(支持批量)
|
||||
const handleOAuthSuccess = async (tokenInfoOrList) => {
|
||||
loading.value = true
|
||||
try {
|
||||
const currentPlatform = form.value.platform
|
||||
|
||||
// Claude 平台支持批量创建
|
||||
if (currentPlatform === 'claude' && Array.isArray(tokenInfoOrList)) {
|
||||
const tokenInfoList = tokenInfoOrList
|
||||
const isBatch = tokenInfoList.length > 1
|
||||
const baseName = form.value.name
|
||||
|
||||
const results = []
|
||||
const errors = []
|
||||
|
||||
for (let i = 0; i < tokenInfoList.length; i++) {
|
||||
const tokenInfo = tokenInfoList[i]
|
||||
// 批量时自动命名
|
||||
const accountName = isBatch ? `${baseName}_${i + 1}` : baseName
|
||||
// 如果启用统一客户端标识,为每个账户生成独立 ID
|
||||
const clientId = form.value.useUnifiedClientId ? generateClientId() : ''
|
||||
const data = buildClaudeAccountData(tokenInfo, accountName, clientId)
|
||||
|
||||
try {
|
||||
const result = await accountsStore.createClaudeAccount(data)
|
||||
results.push(result)
|
||||
} catch (error) {
|
||||
errors.push({ name: accountName, error: error.message })
|
||||
}
|
||||
}
|
||||
|
||||
// 处理结果
|
||||
if (results.length > 0) {
|
||||
const msg = isBatch
|
||||
? `成功创建 ${results.length}/${tokenInfoList.length} 个账户`
|
||||
: '账户创建成功'
|
||||
showToast(msg, 'success')
|
||||
emit('success', results[0]) // 兼容单个创建的返回
|
||||
}
|
||||
if (errors.length > 0) {
|
||||
showToast(`${errors.length} 个账户创建失败`, 'error')
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// 单个 tokenInfo 或其他平台的处理(保持原有逻辑)
|
||||
const tokenInfo = Array.isArray(tokenInfoOrList) ? tokenInfoOrList[0] : tokenInfoOrList
|
||||
|
||||
// OAuth模式也需要确保生成客户端ID
|
||||
if (
|
||||
form.value.platform === 'claude' &&
|
||||
@@ -4218,8 +4568,6 @@ const handleOAuthSuccess = async (tokenInfo) => {
|
||||
proxy: proxyPayload
|
||||
}
|
||||
|
||||
const currentPlatform = form.value.platform
|
||||
|
||||
if (currentPlatform === 'claude') {
|
||||
// Claude使用claudeAiOauth字段
|
||||
const claudeOauthPayload = tokenInfo.claudeAiOauth || tokenInfo
|
||||
@@ -4380,6 +4728,8 @@ const handleOAuthSuccess = async (tokenInfo) => {
|
||||
// 错误已通过 toast 显示给用户
|
||||
} finally {
|
||||
loading.value = false
|
||||
// 重置 OAuthFlow 组件的加载状态(如果是通过 OAuth 模式调用)
|
||||
oauthFlowRef.value?.resetCookieAuth()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -13,128 +13,269 @@
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="mb-3 font-semibold text-blue-900 dark:text-blue-200">Claude 账户授权</h4>
|
||||
<p class="mb-4 text-sm text-blue-800 dark:text-blue-300">
|
||||
请按照以下步骤完成 Claude 账户的授权:
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- 步骤1: 生成授权链接 -->
|
||||
<!-- 授权方式选择 -->
|
||||
<div class="mb-4">
|
||||
<label class="mb-2 block text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
选择授权方式
|
||||
</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex cursor-pointer items-center gap-2">
|
||||
<input
|
||||
v-model="authMethod"
|
||||
class="text-blue-600 focus:ring-blue-500"
|
||||
name="claude-auth-method"
|
||||
type="radio"
|
||||
value="manual"
|
||||
@change="onAuthMethodChange"
|
||||
/>
|
||||
<span class="text-sm text-blue-900 dark:text-blue-200">手动授权</span>
|
||||
</label>
|
||||
<label class="flex cursor-pointer items-center gap-2">
|
||||
<input
|
||||
v-model="authMethod"
|
||||
class="text-blue-600 focus:ring-blue-500"
|
||||
name="claude-auth-method"
|
||||
type="radio"
|
||||
value="cookie"
|
||||
@change="onAuthMethodChange"
|
||||
/>
|
||||
<span class="text-sm text-blue-900 dark:text-blue-200">Cookie自动授权</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cookie自动授权表单 -->
|
||||
<div v-if="authMethod === 'cookie'" class="space-y-4">
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
<p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
|
||||
使用 claude.ai 的 sessionKey 自动完成 OAuth 授权流程,无需手动打开浏览器。
|
||||
</p>
|
||||
|
||||
<!-- sessionKey输入 -->
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
点击下方按钮生成授权链接
|
||||
</p>
|
||||
<button
|
||||
v-if="!authUrl"
|
||||
class="btn btn-primary px-4 py-2 text-sm"
|
||||
:disabled="loading"
|
||||
@click="generateAuthUrl"
|
||||
<i class="fas fa-cookie text-blue-500" />
|
||||
sessionKey
|
||||
<span
|
||||
v-if="parsedSessionKeyCount > 1"
|
||||
class="rounded-full bg-blue-500 px-2 py-0.5 text-xs text-white"
|
||||
>
|
||||
<i v-if="!loading" class="fas fa-link mr-2" />
|
||||
<div v-else class="loading-spinner mr-2" />
|
||||
{{ loading ? '生成中...' : '生成授权链接' }}
|
||||
{{ parsedSessionKeyCount }} 个
|
||||
</span>
|
||||
<button
|
||||
class="text-blue-500 hover:text-blue-600"
|
||||
type="button"
|
||||
@click="showSessionKeyHelp = !showSessionKeyHelp"
|
||||
>
|
||||
<i class="fas fa-question-circle" />
|
||||
</button>
|
||||
<div v-else class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
class="form-input flex-1 bg-gray-50 font-mono text-xs dark:bg-gray-700"
|
||||
readonly
|
||||
type="text"
|
||||
:value="authUrl"
|
||||
/>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="sessionKey"
|
||||
class="form-input w-full resize-y font-mono text-sm"
|
||||
placeholder="每行一个 sessionKey,例如: sk-ant-sid01-xxxxx... sk-ant-sid01-yyyyy..."
|
||||
rows="3"
|
||||
/>
|
||||
<p
|
||||
v-if="parsedSessionKeyCount > 1"
|
||||
class="mt-1 text-xs text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
<i class="fas fa-info-circle mr-1" />
|
||||
将批量创建 {{ parsedSessionKeyCount }} 个账户
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 帮助说明 -->
|
||||
<div
|
||||
v-if="showSessionKeyHelp"
|
||||
class="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900/30"
|
||||
>
|
||||
<h5 class="mb-2 font-semibold text-amber-800 dark:text-amber-200">
|
||||
<i class="fas fa-lightbulb mr-1" />如何获取 sessionKey
|
||||
</h5>
|
||||
<ol
|
||||
class="list-inside list-decimal space-y-1 text-xs text-amber-700 dark:text-amber-300"
|
||||
>
|
||||
<li>在浏览器中登录 <strong>claude.ai</strong></li>
|
||||
<li>
|
||||
按
|
||||
<kbd class="rounded bg-gray-200 px-1 dark:bg-gray-700">F12</kbd>
|
||||
打开开发者工具
|
||||
</li>
|
||||
<li>切换到 <strong>Application</strong>(应用)标签页</li>
|
||||
<li>
|
||||
在左侧找到 <strong>Cookies</strong> → <strong>https://claude.ai</strong>
|
||||
</li>
|
||||
<li>找到键为 <strong>sessionKey</strong> 的那一行</li>
|
||||
<li>复制其 <strong>Value</strong>(值)列的内容</li>
|
||||
</ol>
|
||||
<p class="mt-2 text-xs text-amber-600 dark:text-amber-400">
|
||||
<i class="fas fa-info-circle mr-1" />
|
||||
sessionKey 通常以
|
||||
<code class="rounded bg-gray-200 px-1 dark:bg-gray-700">sk-ant-sid01-</code>
|
||||
开头
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 错误信息 -->
|
||||
<div
|
||||
v-if="cookieAuthError"
|
||||
class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
|
||||
>
|
||||
<p class="text-sm text-red-600 dark:text-red-400">
|
||||
<i class="fas fa-exclamation-circle mr-1" />
|
||||
{{ cookieAuthError }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 授权按钮 -->
|
||||
<button
|
||||
class="btn btn-primary w-full px-4 py-3 text-base font-semibold"
|
||||
:disabled="cookieAuthLoading || !sessionKey.trim()"
|
||||
type="button"
|
||||
@click="handleCookieAuth"
|
||||
>
|
||||
<div v-if="cookieAuthLoading" class="loading-spinner mr-2" />
|
||||
<i v-else class="fas fa-magic mr-2" />
|
||||
<template v-if="cookieAuthLoading && batchProgress.total > 1">
|
||||
正在授权 {{ batchProgress.current }}/{{ batchProgress.total }}...
|
||||
</template>
|
||||
<template v-else-if="cookieAuthLoading"> 正在授权... </template>
|
||||
<template v-else> 开始自动授权 </template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手动授权流程 -->
|
||||
<div v-else>
|
||||
<p class="mb-4 text-sm text-blue-800 dark:text-blue-300">
|
||||
请按照以下步骤完成 Claude 账户的授权:
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- 步骤1: 生成授权链接 -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
点击下方按钮生成授权链接
|
||||
</p>
|
||||
<button
|
||||
v-if="!authUrl"
|
||||
class="btn btn-primary px-4 py-2 text-sm"
|
||||
:disabled="loading"
|
||||
@click="generateAuthUrl"
|
||||
>
|
||||
<i v-if="!loading" class="fas fa-link mr-2" />
|
||||
<div v-else class="loading-spinner mr-2" />
|
||||
{{ loading ? '生成中...' : '生成授权链接' }}
|
||||
</button>
|
||||
<div v-else class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
class="form-input flex-1 bg-gray-50 font-mono text-xs dark:bg-gray-700"
|
||||
readonly
|
||||
type="text"
|
||||
:value="authUrl"
|
||||
/>
|
||||
<button
|
||||
class="rounded-lg bg-gray-100 px-3 py-2 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
title="复制链接"
|
||||
@click="copyAuthUrl"
|
||||
>
|
||||
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="rounded-lg bg-gray-100 px-3 py-2 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
title="复制链接"
|
||||
@click="copyAuthUrl"
|
||||
class="text-xs text-blue-600 hover:text-blue-700"
|
||||
@click="regenerateAuthUrl"
|
||||
>
|
||||
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'" />
|
||||
<i class="fas fa-sync-alt mr-1" />重新生成
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="text-xs text-blue-600 hover:text-blue-700"
|
||||
@click="regenerateAuthUrl"
|
||||
>
|
||||
<i class="fas fa-sync-alt mr-1" />重新生成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2: 访问链接并授权 -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
在浏览器中打开链接并完成授权
|
||||
</p>
|
||||
<p class="mb-2 text-sm text-blue-700 dark:text-blue-300">
|
||||
请在新标签页中打开授权链接,登录您的 Claude 账户并授权。
|
||||
</p>
|
||||
<!-- 步骤2: 访问链接并授权 -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="rounded border border-yellow-300 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/30"
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
>
|
||||
<p class="text-xs text-yellow-800 dark:text-yellow-300">
|
||||
<i class="fas fa-exclamation-triangle mr-1" />
|
||||
<strong>注意:</strong
|
||||
>如果您设置了代理,请确保浏览器也使用相同的代理访问授权页面。
|
||||
2
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
在浏览器中打开链接并完成授权
|
||||
</p>
|
||||
<p class="mb-2 text-sm text-blue-700 dark:text-blue-300">
|
||||
请在新标签页中打开授权链接,登录您的 Claude 账户并授权。
|
||||
</p>
|
||||
<div
|
||||
class="rounded border border-yellow-300 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/30"
|
||||
>
|
||||
<p class="text-xs text-yellow-800 dark:text-yellow-300">
|
||||
<i class="fas fa-exclamation-triangle mr-1" />
|
||||
<strong>注意:</strong
|
||||
>如果您设置了代理,请确保浏览器也使用相同的代理访问授权页面。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3: 输入授权码 -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
输入 Authorization Code
|
||||
</p>
|
||||
<p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
|
||||
授权完成后,页面会显示一个
|
||||
<strong>Authorization Code</strong>,请将其复制并粘贴到下方输入框:
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label
|
||||
class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<i class="fas fa-key mr-2 text-blue-500" />Authorization Code
|
||||
</label>
|
||||
<textarea
|
||||
v-model="authCode"
|
||||
class="form-input w-full resize-none font-mono text-sm"
|
||||
placeholder="粘贴从Claude页面获取的Authorization Code..."
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-info-circle mr-1" />
|
||||
请粘贴从Claude页面复制的Authorization Code
|
||||
<!-- 步骤3: 输入授权码 -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
输入 Authorization Code
|
||||
</p>
|
||||
<p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
|
||||
授权完成后,页面会显示一个
|
||||
<strong>Authorization Code</strong>,请将其复制并粘贴到下方输入框:
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label
|
||||
class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<i class="fas fa-key mr-2 text-blue-500" />Authorization Code
|
||||
</label>
|
||||
<textarea
|
||||
v-model="authCode"
|
||||
class="form-input w-full resize-none font-mono text-sm"
|
||||
placeholder="粘贴从Claude页面获取的Authorization Code..."
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-info-circle mr-1" />
|
||||
请粘贴从Claude页面复制的Authorization Code
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -636,7 +777,9 @@
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<!-- Cookie自动授权模式不显示此按钮(Claude平台) -->
|
||||
<button
|
||||
v-if="!(platform === 'claude' && authMethod === 'cookie')"
|
||||
class="btn btn-primary flex-1 px-6 py-3 font-semibold"
|
||||
:disabled="!canExchange || exchanging"
|
||||
type="button"
|
||||
@@ -682,6 +825,22 @@ const verificationUriComplete = ref('')
|
||||
const remainingSeconds = ref(0)
|
||||
let countdownTimer = null
|
||||
|
||||
// Cookie自动授权相关状态
|
||||
const authMethod = ref('manual') // 'manual' | 'cookie'
|
||||
const sessionKey = ref('')
|
||||
const cookieAuthLoading = ref(false)
|
||||
const cookieAuthError = ref('')
|
||||
const showSessionKeyHelp = ref(false)
|
||||
const batchProgress = ref({ current: 0, total: 0 }) // 批量进度
|
||||
|
||||
// 解析后的 sessionKey 数量
|
||||
const parsedSessionKeyCount = computed(() => {
|
||||
return sessionKey.value
|
||||
.split('\n')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s.length > 0).length
|
||||
})
|
||||
|
||||
// 计算是否可以交换code
|
||||
const canExchange = computed(() => {
|
||||
if (props.platform === 'droid') {
|
||||
@@ -984,4 +1143,93 @@ const exchangeCode = async () => {
|
||||
onBeforeUnmount(() => {
|
||||
stopCountdown()
|
||||
})
|
||||
|
||||
// Cookie自动授权处理(支持批量)
|
||||
const handleCookieAuth = async () => {
|
||||
// 解析多行输入
|
||||
const sessionKeys = sessionKey.value
|
||||
.split('\n')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s.length > 0)
|
||||
|
||||
if (sessionKeys.length === 0) {
|
||||
cookieAuthError.value = '请输入至少一个 sessionKey'
|
||||
return
|
||||
}
|
||||
|
||||
cookieAuthLoading.value = true
|
||||
cookieAuthError.value = ''
|
||||
batchProgress.value = { current: 0, total: sessionKeys.length }
|
||||
|
||||
// 构建代理配置
|
||||
const proxyConfig = props.proxy?.enabled
|
||||
? {
|
||||
type: props.proxy.type,
|
||||
host: props.proxy.host,
|
||||
port: parseInt(props.proxy.port),
|
||||
username: props.proxy.username || null,
|
||||
password: props.proxy.password || null
|
||||
}
|
||||
: null
|
||||
|
||||
const results = []
|
||||
const errors = []
|
||||
|
||||
for (let i = 0; i < sessionKeys.length; i++) {
|
||||
batchProgress.value.current = i + 1
|
||||
try {
|
||||
const result = await accountsStore.oauthWithCookie({
|
||||
sessionKey: sessionKeys[i],
|
||||
proxy: proxyConfig
|
||||
})
|
||||
results.push(result)
|
||||
} catch (error) {
|
||||
errors.push({
|
||||
index: i + 1,
|
||||
key: sessionKeys[i].substring(0, 20) + '...',
|
||||
error: error.message
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
batchProgress.value = { current: 0, total: 0 }
|
||||
|
||||
if (results.length > 0) {
|
||||
// emit 后父组件会调用 handleOAuthSuccess 创建账号
|
||||
// cookieAuthLoading 保持 true,成功后表单会关闭,失败时父组件会处理
|
||||
emit('success', results) // 返回数组(单个时也是数组)
|
||||
// 注意:不在这里设置 cookieAuthLoading = false
|
||||
// 父组件创建账号完成后表单会关闭/重置
|
||||
} else {
|
||||
// 全部授权失败时才恢复按钮状态
|
||||
cookieAuthLoading.value = false
|
||||
}
|
||||
|
||||
if (errors.length > 0 && results.length === 0) {
|
||||
cookieAuthError.value = '全部授权失败,请检查 sessionKey 是否有效'
|
||||
} else if (errors.length > 0) {
|
||||
cookieAuthError.value = `${errors.length} 个授权失败`
|
||||
}
|
||||
}
|
||||
|
||||
// 重置Cookie授权状态
|
||||
const resetCookieAuth = () => {
|
||||
sessionKey.value = ''
|
||||
cookieAuthError.value = ''
|
||||
cookieAuthLoading.value = false
|
||||
batchProgress.value = { current: 0, total: 0 }
|
||||
}
|
||||
|
||||
// 切换授权方式时重置状态
|
||||
const onAuthMethodChange = () => {
|
||||
resetCookieAuth()
|
||||
authUrl.value = ''
|
||||
authCode.value = ''
|
||||
sessionId.value = ''
|
||||
}
|
||||
|
||||
// 暴露方法供父组件调用
|
||||
defineExpose({
|
||||
resetCookieAuth
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -750,6 +750,39 @@ export const useAccountsStore = defineStore('accounts', () => {
|
||||
}
|
||||
}
|
||||
|
||||
// Cookie自动授权 - 普通OAuth
|
||||
const oauthWithCookie = async (payload) => {
|
||||
try {
|
||||
const response = await apiClient.post('/admin/claude-accounts/oauth-with-cookie', payload)
|
||||
if (response.success) {
|
||||
return response.data
|
||||
} else {
|
||||
throw new Error(response.message || 'Cookie授权失败')
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
// Cookie自动授权 - Setup Token
|
||||
const oauthSetupTokenWithCookie = async (payload) => {
|
||||
try {
|
||||
const response = await apiClient.post(
|
||||
'/admin/claude-accounts/setup-token-with-cookie',
|
||||
payload
|
||||
)
|
||||
if (response.success) {
|
||||
return response.data
|
||||
} else {
|
||||
throw new Error(response.message || 'Cookie授权失败')
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
// 生成Gemini OAuth URL
|
||||
const generateGeminiAuthUrl = async (proxyConfig) => {
|
||||
try {
|
||||
@@ -914,6 +947,8 @@ export const useAccountsStore = defineStore('accounts', () => {
|
||||
exchangeClaudeCode,
|
||||
generateClaudeSetupTokenUrl,
|
||||
exchangeClaudeSetupTokenCode,
|
||||
oauthWithCookie,
|
||||
oauthSetupTokenWithCookie,
|
||||
generateGeminiAuthUrl,
|
||||
exchangeGeminiCode,
|
||||
generateOpenAIAuthUrl,
|
||||
|
||||
Reference in New Issue
Block a user