feat: 集成 VSCode Authentication API 实现用户登录
- 新增 Authentication Provider，登录信息显示在左下角 - 支持浏览器登录并自动回调 - 登录/登出后自动刷新窗口 - 侧边栏根据登录状态显示不同按钮
This commit is contained in:
Roe-xin
573
docs/authentication-implementation.md
Normal file
573
docs/authentication-implementation.md
Normal file
@ -0,0 +1,573 @@
|
||||
# IC Coder 认证系统实现文档
|
||||
|
||||
## 概述
|
||||
|
||||
本文档详细说明了 IC Coder 插件如何集成 VSCode Authentication API，实现用户登录功能，并在 VSCode 左下角账户区域显示登录状态。
|
||||
|
||||
## 架构设计
|
||||
|
||||
### 核心组件
|
||||
|
||||
1. **ICCoderAuthenticationProvider** - 认证提供者
|
||||
2. **VSCode Authentication API** - VSCode 官方认证接口
|
||||
3. **本地 HTTP 服务器** - 处理登录回调
|
||||
4. **ICViewProvider** - 侧边栏视图（根据登录状态显示不同按钮）
|
||||
|
||||
### 工作流程
|
||||
|
||||
```
|
||||
用户点击登录
|
||||
↓
|
||||
调用 vscode.authentication.getSession()
|
||||
↓
|
||||
ICCoderAuthenticationProvider.createSession()
|
||||
↓
|
||||
启动本地 HTTP 服务器（动态端口）
|
||||
↓
|
||||
打开浏览器访问登录页面
|
||||
↓
|
||||
用户在网站完成登录
|
||||
↓
|
||||
网站重定向到 http://localhost:{port}/callback?token=xxx
|
||||
↓
|
||||
本地服务器接收 token
|
||||
↓
|
||||
创建 AuthenticationSession
|
||||
↓
|
||||
VSCode 左下角显示账户信息
|
||||
```
|
||||
|
||||
## 详细实现
|
||||
|
||||
### 1. Authentication Provider 实现
|
||||
|
||||
文件：`src/services/icCoderAuthProvider.ts`
|
||||
|
||||
#### 1.1 类定义
|
||||
|
||||
```typescript
|
||||
export class ICCoderAuthenticationProvider
|
||||
implements vscode.AuthenticationProvider
|
||||
{
|
||||
private _onDidChangeSessions =
|
||||
new vscode.EventEmitter<vscode.AuthenticationProviderAuthenticationSessionsChangeEvent>();
|
||||
public readonly onDidChangeSessions = this._onDidChangeSessions.event;
|
||||
|
||||
private _sessions: vscode.AuthenticationSession[] = [];
|
||||
}
|
||||
```
|
||||
|
||||
**关键点：**
|
||||
|
||||
- 实现 `vscode.AuthenticationProvider` 接口
|
||||
- 使用 `EventEmitter` 通知会话变化
|
||||
- 在内存中维护会话列表
|
||||
|
||||
#### 1.2 核心方法
|
||||
|
||||
##### getSessions() - 获取会话列表
|
||||
|
||||
```typescript
|
||||
async getSessions(scopes?: readonly string[]): Promise<readonly vscode.AuthenticationSession[]> {
|
||||
return this._sessions;
|
||||
}
|
||||
```
|
||||
|
||||
##### createSession() - 创建会话（登录）
|
||||
|
||||
```typescript
|
||||
async createSession(scopes: readonly string[]): Promise<vscode.AuthenticationSession> {
|
||||
const token = await this.login();
|
||||
|
||||
const session: vscode.AuthenticationSession = {
|
||||
id: this.generateSessionId(),
|
||||
accessToken: token,
|
||||
account: {
|
||||
id: "iccoder-user",
|
||||
label: "IC Coder 用户",
|
||||
},
|
||||
scopes: [...scopes],
|
||||
};
|
||||
|
||||
this._sessions.push(session);
|
||||
await this.saveSessions();
|
||||
|
||||
this._onDidChangeSessions.fire({
|
||||
added: [session],
|
||||
removed: [],
|
||||
changed: [],
|
||||
});
|
||||
|
||||
return session;
|
||||
}
|
||||
```
|
||||
|
||||
**关键点：**
|
||||
|
||||
- 调用 `login()` 方法获取 token
|
||||
- 创建 `AuthenticationSession` 对象
|
||||
- 保存到 `globalState`
|
||||
- 触发 `onDidChangeSessions` 事件通知 VSCode
|
||||
|
||||
##### removeSession() - 删除会话（登出）
|
||||
|
||||
```typescript
|
||||
async removeSession(sessionId: string): Promise<void> {
|
||||
const sessionIndex = this._sessions.findIndex((s) => s.id === sessionId);
|
||||
if (sessionIndex > -1) {
|
||||
const session = this._sessions[sessionIndex];
|
||||
this._sessions.splice(sessionIndex, 1);
|
||||
await this.saveSessions();
|
||||
|
||||
this._onDidChangeSessions.fire({
|
||||
added: [],
|
||||
removed: [session],
|
||||
changed: [],
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 本地 HTTP 服务器实现
|
||||
|
||||
#### 2.1 动态端口分配
|
||||
|
||||
```typescript
|
||||
server.listen(0, () => {
|
||||
const address = server.address();
|
||||
const port = typeof address === "object" && address ? address.port : 3000;
|
||||
resolve({ server, port });
|
||||
});
|
||||
```
|
||||
|
||||
**关键点：**
|
||||
|
||||
- 使用端口 `0` 让系统自动分配可用端口
|
||||
- 避免端口冲突问题
|
||||
- 支持多个用户同时使用
|
||||
|
||||
#### 2.2 回调处理
|
||||
|
||||
```typescript
|
||||
if (url.pathname === "/callback") {
|
||||
const token = url.searchParams.get("token");
|
||||
|
||||
if (token) {
|
||||
// 返回成功页面
|
||||
res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
|
||||
res.end(this.getSuccessPage(iconBase64));
|
||||
|
||||
// 关闭服务器
|
||||
server.close();
|
||||
|
||||
// 返回 token
|
||||
if ((server as any)._loginResolve) {
|
||||
(server as any)._loginResolve(token);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. package.json 配置
|
||||
|
||||
#### 3.1 注册 Authentication Provider
|
||||
|
||||
```json
|
||||
{
|
||||
"contributes": {
|
||||
"authentication": [
|
||||
{
|
||||
"id": "iccoder",
|
||||
"label": "IC Coder"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**关键点：**
|
||||
|
||||
- `id` 必须与代码中使用的 ID 一致
|
||||
- `label` 会显示在 VSCode 账户菜单中
|
||||
|
||||
#### 3.2 注册命令
|
||||
|
||||
```json
|
||||
{
|
||||
"contributes": {
|
||||
"commands": [
|
||||
{
|
||||
"command": "ic-coder.login",
|
||||
"title": "IC Coder: 登录账户",
|
||||
"category": "IC Coder"
|
||||
},
|
||||
{
|
||||
"command": "ic-coder.logout",
|
||||
"title": "IC Coder: 退出登录",
|
||||
"category": "IC Coder"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. extension.ts 注册
|
||||
|
||||
#### 4.1 注册 Authentication Provider
|
||||
|
||||
```typescript
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
// 注册 Authentication Provider
|
||||
const authProvider = new ICCoderAuthenticationProvider(context);
|
||||
context.subscriptions.push(
|
||||
vscode.authentication.registerAuthenticationProvider(
|
||||
"iccoder",
|
||||
"IC Coder",
|
||||
authProvider
|
||||
)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### 4.2 登录命令
|
||||
|
||||
```typescript
|
||||
const loginCommand = vscode.commands.registerCommand(
|
||||
"ic-coder.login",
|
||||
async () => {
|
||||
try {
|
||||
await vscode.authentication.getSession("iccoder", [], {
|
||||
createIfNone: true,
|
||||
});
|
||||
} catch (error) {
|
||||
vscode.window.showErrorMessage(`登录失败: ${error}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
**关键点：**
|
||||
|
||||
- `createIfNone: true` 会在没有会话时自动调用 `createSession()`
|
||||
- VSCode 会自动处理 UI 交互
|
||||
|
||||
#### 4.3 登出命令
|
||||
|
||||
```typescript
|
||||
const logoutCommand = vscode.commands.registerCommand(
|
||||
"ic-coder.logout",
|
||||
async () => {
|
||||
try {
|
||||
const session = await vscode.authentication.getSession("iccoder", [], {
|
||||
createIfNone: false,
|
||||
});
|
||||
if (session) {
|
||||
await vscode.authentication.getSession("iccoder", [], {
|
||||
clearSessionPreference: true,
|
||||
forceNewSession: true,
|
||||
});
|
||||
vscode.window.showInformationMessage("已退出登录");
|
||||
}
|
||||
} catch (error) {
|
||||
vscode.window.showInformationMessage("当前未登录");
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### 5. ICViewProvider 集成
|
||||
|
||||
#### 5.1 检查登录状态
|
||||
|
||||
```typescript
|
||||
private async checkLoginStatus(): Promise<boolean> {
|
||||
try {
|
||||
const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
|
||||
return !!session;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.2 根据登录状态显示不同按钮
|
||||
|
||||
```typescript
|
||||
resolveWebviewView(webviewView: vscode.WebviewView) {
|
||||
this.checkLoginStatus().then((isLoggedIn) => {
|
||||
webviewView.webview.html = this.getWebviewContent(
|
||||
webviewView.webview,
|
||||
isLoggedIn
|
||||
);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
```typescript
|
||||
${isLoggedIn
|
||||
? '<button class="btn" onclick="openChat()">开始创作</button>'
|
||||
: '<button class="btn" onclick="login()">登录账户</button>'
|
||||
}
|
||||
```
|
||||
|
||||
### 6. 网站前端配置
|
||||
|
||||
#### 6.1 检测插件登录请求
|
||||
|
||||
```javascript
|
||||
// 在登录页面检测 redirect_uri 参数
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const redirectUri = urlParams.get("redirect_uri");
|
||||
|
||||
if (redirectUri) {
|
||||
// 保存回调地址
|
||||
localStorage.setItem("plugin_redirect_uri", redirectUri);
|
||||
}
|
||||
```
|
||||
|
||||
#### 6.2 登录成功后重定向
|
||||
|
||||
```javascript
|
||||
// 用户登录成功，拿到 token
|
||||
const token = response.data.token;
|
||||
|
||||
// 检查是否需要重定向回插件
|
||||
const redirectUri = localStorage.getItem("plugin_redirect_uri");
|
||||
|
||||
if (redirectUri) {
|
||||
// 重定向回插件，带上 token
|
||||
window.location.href = `${redirectUri}?token=${token}`;
|
||||
localStorage.removeItem("plugin_redirect_uri");
|
||||
} else {
|
||||
// 正常登录流程
|
||||
router.push("/dashboard");
|
||||
}
|
||||
```
|
||||
|
||||
## 关键技术点
|
||||
|
||||
### 1. 动态端口分配
|
||||
|
||||
**问题：** 固定端口可能被占用，导致登录失败
|
||||
|
||||
**解决方案：** 使用端口 `0` 让系统自动分配可用端口
|
||||
|
||||
```typescript
|
||||
server.listen(0, () => {
|
||||
const address = server.address();
|
||||
const port = typeof address === "object" && address ? address.port : 3000;
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Promise 异步等待
|
||||
|
||||
**问题：** 需要等待浏览器登录完成后才能继续
|
||||
|
||||
**解决方案：** 使用 Promise 包装回调逻辑
|
||||
|
||||
```typescript
|
||||
return new Promise((resolve, reject) => {
|
||||
(server as any)._loginResolve = resolve;
|
||||
(server as any)._loginReject = reject;
|
||||
});
|
||||
```
|
||||
|
||||
### 3. 会话持久化
|
||||
|
||||
**问题：** 重启 VSCode 后需要重新登录
|
||||
|
||||
**解决方案：** 使用 `globalState` 保存会话
|
||||
|
||||
```typescript
|
||||
await this.context.globalState.update("icCoderSessions", this._sessions);
|
||||
```
|
||||
|
||||
### 4. 事件通知机制
|
||||
|
||||
**问题：** VSCode 需要知道会话状态变化
|
||||
|
||||
**解决方案：** 使用 `EventEmitter` 触发事件
|
||||
|
||||
```typescript
|
||||
this._onDidChangeSessions.fire({
|
||||
added: [session],
|
||||
removed: [],
|
||||
changed: [],
|
||||
});
|
||||
```
|
||||
|
||||
## 用户体验
|
||||
|
||||
### 登录流程
|
||||
|
||||
1. 用户点击侧边栏"登录账户"按钮
|
||||
2. 浏览器自动打开登录页面
|
||||
3. 用户在网站完成登录
|
||||
4. 浏览器自动跳转到成功页面
|
||||
5. VSCode 左下角显示"IC Coder 用户"
|
||||
6. 侧边栏按钮变为"开始创作"
|
||||
|
||||
### 登出流程
|
||||
|
||||
1. 点击 VSCode 左下角账户图标
|
||||
2. 选择"IC Coder"账户
|
||||
3. 点击"退出"按钮
|
||||
4. 或使用命令 `IC Coder: 退出登录`
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q1: 为什么不直接使用 globalState 存储 token？
|
||||
|
||||
**A:** 使用 VSCode Authentication API 的优势：
|
||||
|
||||
- ✅ 统一的用户体验（左下角账户区域）
|
||||
- ✅ VSCode 自动管理会话生命周期
|
||||
- ✅ 支持多账户切换
|
||||
- ✅ 更好的安全性（VSCode 负责加密存储）
|
||||
|
||||
### Q2: 如何处理 token 过期？
|
||||
|
||||
**A:** 可以在 API 请求失败时：
|
||||
|
||||
1. 检测 401 错误
|
||||
2. 调用 `removeSession()` 清除过期会话
|
||||
3. 提示用户重新登录
|
||||
|
||||
### Q3: 如何支持多个账户？
|
||||
|
||||
**A:** 修改 `account` 对象：
|
||||
|
||||
```typescript
|
||||
account: {
|
||||
id: userInfo.id,
|
||||
label: userInfo.username,
|
||||
}
|
||||
```
|
||||
|
||||
### Q4: 登录页面如何获取用户信息？
|
||||
|
||||
**A:** 可以在登录成功后，通过 API 获取用户信息：
|
||||
|
||||
```typescript
|
||||
const userInfo = await fetch("https://api.iccoder.com/user/info", {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
const session: vscode.AuthenticationSession = {
|
||||
account: {
|
||||
id: userInfo.id,
|
||||
label: userInfo.username,
|
||||
},
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
## 安全考虑
|
||||
|
||||
### 1. Token 存储
|
||||
|
||||
- ✅ 使用 VSCode `globalState` 加密存储
|
||||
- ✅ 不在代码中硬编码敏感信息
|
||||
- ✅ Token 仅在内存和加密存储中传递
|
||||
|
||||
### 2. 本地服务器
|
||||
|
||||
- ✅ 仅监听 `localhost`，不暴露到外网
|
||||
- ✅ 使用动态端口，避免固定端口被劫持
|
||||
- ✅ 接收到 token 后立即关闭服务器
|
||||
- ✅ 设置 5 分钟超时，防止服务器长期运行
|
||||
|
||||
### 3. HTTPS 考虑
|
||||
|
||||
**当前实现：** 使用 HTTP 本地回调
|
||||
|
||||
**生产环境建议：**
|
||||
|
||||
- 网站使用 HTTPS
|
||||
- 本地回调使用 HTTP（localhost 不受浏览器限制）
|
||||
- 或使用 `vscode://` 协议（需要网站支持）
|
||||
|
||||
## 测试指南
|
||||
|
||||
### 1. 本地测试
|
||||
|
||||
```bash
|
||||
# 启动调试模式
|
||||
按 F5
|
||||
|
||||
# 测试登录
|
||||
1. 打开侧边栏
|
||||
2. 点击"登录账户"
|
||||
3. 在浏览器完成登录
|
||||
4. 检查左下角是否显示账户
|
||||
|
||||
# 测试登出
|
||||
1. 点击左下角账户
|
||||
2. 选择"IC Coder"
|
||||
3. 点击"退出"
|
||||
```
|
||||
|
||||
### 2. 调试技巧
|
||||
|
||||
```typescript
|
||||
// 在 ICCoderAuthenticationProvider 中添加日志
|
||||
console.log("🔐 创建会话:", session);
|
||||
console.log("🔑 Token:", token);
|
||||
|
||||
// 在 ICViewProvider 中添加日志
|
||||
console.log("🔍 登录状态:", isLoggedIn);
|
||||
```
|
||||
|
||||
### 3. 常见错误排查
|
||||
|
||||
| 错误 | 原因 | 解决方案 |
|
||||
| ------------------------------- | --------------- | ---------------------------------- |
|
||||
| `getSessions is not a function` | VSCode 版本过低 | 升级到 1.63.0+ |
|
||||
| 端口被占用 | 固定端口冲突 | 使用动态端口（已实现） |
|
||||
| 登录后未显示账户 | 未触发事件 | 检查 `_onDidChangeSessions.fire()` |
|
||||
| 重启后需要重新登录 | 未保存会话 | 检查 `saveSessions()` 调用 |
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
ic-coder/
|
||||
├── src/
|
||||
│ ├── services/
|
||||
│ │ └── icCoderAuthProvider.ts # Authentication Provider 实现
|
||||
│ ├── views/
|
||||
│ │ └── ICViewProvider.ts # 侧边栏视图（集成登录状态）
|
||||
│ └── extension.ts # 注册 Provider 和命令
|
||||
├── package.json # 配置 authentication 和 commands
|
||||
└── docs/
|
||||
└── authentication-implementation.md # 本文档
|
||||
```
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [VSCode Authentication API](https://code.visualstudio.com/api/references/vscode-api#authentication)
|
||||
- [Authentication Provider Sample](https://github.com/microsoft/vscode-extension-samples/tree/main/authentication-sample)
|
||||
- [VSCode Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
|
||||
|
||||
## 总结
|
||||
|
||||
本实现通过以下步骤完成了 VSCode Authentication API 的集成：
|
||||
|
||||
1. ✅ 创建 `ICCoderAuthenticationProvider` 类实现认证逻辑
|
||||
2. ✅ 在 `package.json` 中注册 authentication provider
|
||||
3. ✅ 在 `extension.ts` 中注册 provider 和命令
|
||||
4. ✅ 实现本地 HTTP 服务器处理登录回调
|
||||
5. ✅ 使用动态端口避免冲突
|
||||
6. ✅ 集成到侧边栏视图，根据登录状态显示不同按钮
|
||||
7. ✅ 配置网站前端支持插件登录重定向
|
||||
|
||||
**最终效果：**
|
||||
|
||||
- 用户登录后，VSCode 左下角显示"IC Coder 用户"
|
||||
- 侧边栏根据登录状态显示"登录账户"或"开始创作"按钮
|
||||
- 支持通过账户菜单或命令进行登录/登出操作
|
||||
|
||||
---
|
||||
|
||||
**文档版本：** 1.0
|
||||
**最后更新：** 2025-12-29
|
||||
**作者：** Roe-xin
|
||||
@ -64,6 +64,12 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"authentication": [
|
||||
{
|
||||
"id": "iccoder",
|
||||
"label": "IC Coder"
|
||||
}
|
||||
],
|
||||
"configuration": {
|
||||
"title": "IC Coder",
|
||||
"properties": {
|
||||
|
||||
@ -3,10 +3,21 @@ import { ICViewProvider } from "./views/ICViewProvider";
|
||||
import { showICHelperPanel } from "./panels/ICHelperPanel";
|
||||
import { VCDViewerPanel } from "./panels/VCDViewerPanel";
|
||||
import { ChatHistoryManager } from "./utils/chatHistoryManager";
|
||||
import { ICCoderAuthenticationProvider } from "./services/icCoderAuthProvider";
|
||||
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
console.log("🎉 IC Coder 插件已激活！");
|
||||
|
||||
// 注册 Authentication Provider
|
||||
const authProvider = new ICCoderAuthenticationProvider(context);
|
||||
context.subscriptions.push(
|
||||
vscode.authentication.registerAuthenticationProvider(
|
||||
"iccoder",
|
||||
"IC Coder",
|
||||
authProvider
|
||||
)
|
||||
);
|
||||
|
||||
// 自动打开聊天面板
|
||||
vscode.commands.executeCommand("ic-coder.openChat");
|
||||
|
||||
@ -54,6 +65,40 @@ export function activate(context: vscode.ExtensionContext) {
|
||||
}
|
||||
);
|
||||
|
||||
// 注册命令：用户登录
|
||||
const loginCommand = vscode.commands.registerCommand(
|
||||
"ic-coder.login",
|
||||
async () => {
|
||||
try {
|
||||
await vscode.authentication.getSession("iccoder", [], { createIfNone: true });
|
||||
} catch (error) {
|
||||
vscode.window.showErrorMessage(`登录失败: ${error}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 注册命令：用户登出
|
||||
const logoutCommand = vscode.commands.registerCommand(
|
||||
"ic-coder.logout",
|
||||
async () => {
|
||||
try {
|
||||
const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
|
||||
if (session) {
|
||||
// 通过创建新会话并清除偏好来实现登出
|
||||
await vscode.authentication.getSession("iccoder", [], {
|
||||
clearSessionPreference: true,
|
||||
forceNewSession: true
|
||||
});
|
||||
vscode.window.showInformationMessage("已退出登录");
|
||||
} else {
|
||||
vscode.window.showInformationMessage("当前未登录");
|
||||
}
|
||||
} catch (error) {
|
||||
vscode.window.showInformationMessage("当前未登录");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 注册命令：查看会话历史
|
||||
// TODO: 这些命令需要根据新的任务架构重新实现
|
||||
// 暂时注释掉，等待重新实现
|
||||
@ -102,7 +147,7 @@ export function activate(context: vscode.ExtensionContext) {
|
||||
*/
|
||||
|
||||
// 注册侧边栏视图
|
||||
const viewProvider = new ICViewProvider(context.extensionUri);
|
||||
const viewProvider = new ICViewProvider(context.extensionUri, context);
|
||||
const viewRegistration = vscode.window.registerWebviewViewProvider(
|
||||
"ic-coder.mainView",
|
||||
viewProvider
|
||||
@ -113,6 +158,8 @@ export function activate(context: vscode.ExtensionContext) {
|
||||
openPanelCommand,
|
||||
openChatCommand,
|
||||
openVCDViewerCommand,
|
||||
loginCommand,
|
||||
logoutCommand,
|
||||
// TODO: 等待重新实现这些命令
|
||||
// viewHistoryCommand,
|
||||
// newSessionCommand,
|
||||
|
||||
437
src/services/icCoderAuthProvider.ts
Normal file
437
src/services/icCoderAuthProvider.ts
Normal file
@ -0,0 +1,437 @@
|
||||
import * as vscode from "vscode";
|
||||
import * as http from "http";
|
||||
import * as path from "path";
|
||||
import * as fs from "fs";
|
||||
|
||||
/**
|
||||
* IC Coder Authentication Provider
|
||||
* 集成到 VSCode 账户系统
|
||||
*/
|
||||
export class ICCoderAuthenticationProvider
|
||||
implements vscode.AuthenticationProvider
|
||||
{
|
||||
private static readonly AUTH_TYPE = "iccoder";
|
||||
private static readonly AUTH_NAME = "IC Coder";
|
||||
private static readonly LOGIN_URL = "http://192.168.1.108:2005/login";
|
||||
private static loginServer: http.Server | null = null;
|
||||
private static currentPort: number | null = null;
|
||||
|
||||
private _onDidChangeSessions =
|
||||
new vscode.EventEmitter<vscode.AuthenticationProviderAuthenticationSessionsChangeEvent>();
|
||||
public readonly onDidChangeSessions = this._onDidChangeSessions.event;
|
||||
|
||||
private _sessions: vscode.AuthenticationSession[] = [];
|
||||
|
||||
constructor(private readonly context: vscode.ExtensionContext) {
|
||||
// 从存储中恢复会话
|
||||
this.loadSessions();
|
||||
}
|
||||
|
||||
/**
|
||||
* 从存储中加载会话
|
||||
*/
|
||||
private async loadSessions(): Promise<void> {
|
||||
const storedSessions = this.context.globalState.get<
|
||||
vscode.AuthenticationSession[]
|
||||
>("icCoderSessions", []);
|
||||
this._sessions = storedSessions;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存会话到存储
|
||||
*/
|
||||
private async saveSessions(): Promise<void> {
|
||||
await this.context.globalState.update("icCoderSessions", this._sessions);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取会话列表
|
||||
*/
|
||||
async getSessions(
|
||||
scopes?: readonly string[]
|
||||
): Promise<readonly vscode.AuthenticationSession[]> {
|
||||
return this._sessions;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建会话（登录）
|
||||
*/
|
||||
async createSession(
|
||||
scopes: readonly string[]
|
||||
): Promise<vscode.AuthenticationSession> {
|
||||
try {
|
||||
const token = await this.login();
|
||||
|
||||
// 创建会话
|
||||
const session: vscode.AuthenticationSession = {
|
||||
id: this.generateSessionId(),
|
||||
accessToken: token,
|
||||
account: {
|
||||
id: "iccoder-user",
|
||||
label: "IC Coder 用户",
|
||||
},
|
||||
scopes: [...scopes],
|
||||
};
|
||||
|
||||
this._sessions.push(session);
|
||||
await this.saveSessions();
|
||||
|
||||
// 触发会话变化事件
|
||||
this._onDidChangeSessions.fire({
|
||||
added: [session],
|
||||
removed: [],
|
||||
changed: [],
|
||||
});
|
||||
|
||||
vscode.window.showInformationMessage("登录成功！窗口将自动刷新...");
|
||||
|
||||
// 延迟 1 秒后重新加载窗口，让用户看到成功消息
|
||||
setTimeout(() => {
|
||||
vscode.commands.executeCommand("workbench.action.reloadWindow");
|
||||
}, 1000);
|
||||
|
||||
return session;
|
||||
} catch (error) {
|
||||
vscode.window.showErrorMessage(
|
||||
`登录失败: ${error instanceof Error ? error.message : String(error)}`
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除会话（登出）
|
||||
*/
|
||||
async removeSession(sessionId: string): Promise<void> {
|
||||
const sessionIndex = this._sessions.findIndex((s) => s.id === sessionId);
|
||||
if (sessionIndex > -1) {
|
||||
const session = this._sessions[sessionIndex];
|
||||
this._sessions.splice(sessionIndex, 1);
|
||||
await this.saveSessions();
|
||||
|
||||
// 触发会话变化事件
|
||||
this._onDidChangeSessions.fire({
|
||||
added: [],
|
||||
removed: [session],
|
||||
changed: [],
|
||||
});
|
||||
|
||||
vscode.window.showInformationMessage("已退出登录！窗口将自动刷新...");
|
||||
|
||||
// 延迟 1 秒后重新加载窗口，让用户看到成功消息
|
||||
setTimeout(() => {
|
||||
vscode.commands.executeCommand("workbench.action.reloadWindow");
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成会话 ID
|
||||
*/
|
||||
private generateSessionId(): string {
|
||||
return `iccoder-${Date.now()}-${Math.random().toString(36).substring(7)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录逻辑（打开浏览器并等待回调）
|
||||
*/
|
||||
private async login(): Promise<string> {
|
||||
// 如果已有服务器在运行，先关闭
|
||||
if (ICCoderAuthenticationProvider.loginServer) {
|
||||
ICCoderAuthenticationProvider.loginServer.close();
|
||||
ICCoderAuthenticationProvider.loginServer = null;
|
||||
}
|
||||
|
||||
// 创建本地服务器监听回调
|
||||
const { server, port } = await this.createCallbackServer();
|
||||
ICCoderAuthenticationProvider.loginServer = server;
|
||||
ICCoderAuthenticationProvider.currentPort = port;
|
||||
|
||||
// 构建登录 URL
|
||||
const callbackUrl = `http://localhost:${port}/callback`;
|
||||
const loginUrl = `${
|
||||
ICCoderAuthenticationProvider.LOGIN_URL
|
||||
}?redirect_uri=${encodeURIComponent(callbackUrl)}`;
|
||||
|
||||
console.log("🔐 登录服务器已启动，监听端口:", port);
|
||||
console.log("🌐 登录 URL:", loginUrl);
|
||||
|
||||
// 打开浏览器登录
|
||||
await vscode.env.openExternal(vscode.Uri.parse(loginUrl));
|
||||
|
||||
vscode.window.showInformationMessage(
|
||||
"请在浏览器中完成登录，登录成功后将自动返回..."
|
||||
);
|
||||
|
||||
// 等待 token（通过 Promise）
|
||||
return new Promise((resolve, reject) => {
|
||||
const timeout = setTimeout(() => {
|
||||
if (ICCoderAuthenticationProvider.loginServer) {
|
||||
ICCoderAuthenticationProvider.loginServer.close();
|
||||
ICCoderAuthenticationProvider.loginServer = null;
|
||||
reject(new Error("登录超时"));
|
||||
}
|
||||
}, 5 * 60 * 1000);
|
||||
|
||||
// 将 resolve 和 reject 保存到服务器上下文
|
||||
(server as any)._loginResolve = resolve;
|
||||
(server as any)._loginReject = reject;
|
||||
(server as any)._loginTimeout = timeout;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建本地回调服务器
|
||||
*/
|
||||
private createCallbackServer(): Promise<{
|
||||
server: http.Server;
|
||||
port: number;
|
||||
}> {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 读取 icon.png 并转换为 Base64
|
||||
const iconPath = path.join(
|
||||
this.context.extensionPath,
|
||||
"media",
|
||||
"icon.png"
|
||||
);
|
||||
let iconBase64 = "";
|
||||
try {
|
||||
const iconBuffer = fs.readFileSync(iconPath);
|
||||
iconBase64 = `data:image/png;base64,${iconBuffer.toString("base64")}`;
|
||||
} catch (error) {
|
||||
console.warn("无法读取 icon.png:", error);
|
||||
}
|
||||
|
||||
const server = http.createServer(async (req, res) => {
|
||||
try {
|
||||
console.log("📥 收到回调请求:", req.url);
|
||||
|
||||
const url = new URL(
|
||||
req.url!,
|
||||
`http://localhost:${ICCoderAuthenticationProvider.currentPort}`
|
||||
);
|
||||
console.log("📍 路径:", url.pathname);
|
||||
console.log("📋 所有参数:", Object.fromEntries(url.searchParams));
|
||||
|
||||
if (url.pathname === "/callback") {
|
||||
const token = url.searchParams.get("token");
|
||||
console.log("🔑 Token:", token ? "已获取" : "未找到");
|
||||
|
||||
if (token) {
|
||||
// 返回成功页面
|
||||
res.writeHead(200, {
|
||||
"Content-Type": "text/html; charset=utf-8",
|
||||
});
|
||||
res.end(this.getSuccessPage(iconBase64));
|
||||
|
||||
// 关闭服务器
|
||||
server.close();
|
||||
ICCoderAuthenticationProvider.loginServer = null;
|
||||
|
||||
// 清除超时
|
||||
if ((server as any)._loginTimeout) {
|
||||
clearTimeout((server as any)._loginTimeout);
|
||||
}
|
||||
|
||||
// 返回 token
|
||||
if ((server as any)._loginResolve) {
|
||||
(server as any)._loginResolve(token);
|
||||
}
|
||||
} else {
|
||||
res.writeHead(400, {
|
||||
"Content-Type": "text/html; charset=utf-8",
|
||||
});
|
||||
res.end(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><meta charset="utf-8"><title>登录失败</title></head>
|
||||
<body><h1>❌ 登录失败</h1><p>未获取到有效的 Token</p></body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
if ((server as any)._loginReject) {
|
||||
(server as any)._loginReject(new Error("未获取到有效的 Token"));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
res.writeHead(404);
|
||||
res.end("Not Found");
|
||||
}
|
||||
} catch (error) {
|
||||
res.writeHead(500);
|
||||
res.end("Internal Server Error");
|
||||
if ((server as any)._loginReject) {
|
||||
(server as any)._loginReject(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 监听端口（使用 0 表示自动分配可用端口）
|
||||
server.listen(0, () => {
|
||||
const address = server.address();
|
||||
const port =
|
||||
typeof address === "object" && address ? address.port : 3000;
|
||||
resolve({ server, port });
|
||||
});
|
||||
|
||||
// 处理错误
|
||||
server.on("error", (error: NodeJS.ErrnoException) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取登录成功页面 HTML
|
||||
*/
|
||||
private getSuccessPage(iconBase64: string): string {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录成功 - IC Coder</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
.bg-circle:nth-child(1) { width: 300px; height: 300px; top: -150px; left: -150px; }
|
||||
.bg-circle:nth-child(2) { width: 200px; height: 200px; bottom: -100px; right: -100px; animation-delay: 5s; }
|
||||
.bg-circle:nth-child(3) { width: 150px; height: 150px; top: 50%; right: 10%; animation-delay: 10s; }
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(30px, -30px) scale(1.1); }
|
||||
66% { transform: translate(-20px, 20px) scale(0.9); }
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 60px 50px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 30px;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: scaleIn 0.5s ease-out 0.2s both;
|
||||
}
|
||||
@keyframes scaleIn {
|
||||
from { transform: scale(0); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
.checkmark {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid white;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.checkmark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 3px;
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
border: solid white;
|
||||
border-width: 0 4px 4px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
h1 {
|
||||
color: #2d3748;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
animation: fadeIn 0.6s ease-out 0.3s both;
|
||||
}
|
||||
p {
|
||||
color: #718096;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
animation: fadeIn 0.6s ease-out 0.4s both;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
animation: fadeIn 0.6s ease-out 0.5s both;
|
||||
}
|
||||
.brand-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.brand-logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.brand-text {
|
||||
color: #4a5568;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-circle"></div>
|
||||
<div class="bg-circle"></div>
|
||||
<div class="bg-circle"></div>
|
||||
<div class="container">
|
||||
<div class="success-icon">
|
||||
<div class="checkmark"></div>
|
||||
</div>
|
||||
<h1>登录成功！</h1>
|
||||
<p>您已成功登录 IC Coder<br>现在可以返回 VSCode 继续使用</p>
|
||||
<div class="brand">
|
||||
<div class="brand-logo">
|
||||
<img src="${iconBase64}" alt="IC Coder" />
|
||||
</div>
|
||||
<span class="brand-text">IC Coder</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -103,7 +103,23 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
|
||||
* 侧边栏视图提供者
|
||||
*/
|
||||
export class ICViewProvider implements vscode.WebviewViewProvider {
|
||||
constructor(private readonly extensionUri: vscode.Uri) {}
|
||||
constructor(
|
||||
private readonly extensionUri: vscode.Uri,
|
||||
private readonly context: vscode.ExtensionContext
|
||||
) {}
|
||||
|
||||
/**
|
||||
* 检查登录状态（使用 Authentication API）
|
||||
*/
|
||||
private async checkLoginStatus(): Promise<boolean> {
|
||||
try {
|
||||
const session = await vscode.authentication.getSession("iccoder", [], { createIfNone: false });
|
||||
return !!session;
|
||||
} catch (error) {
|
||||
console.log("检查登录状态失败:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
resolveWebviewView(webviewView: vscode.WebviewView) {
|
||||
webviewView.webview.options = {
|
||||
@ -111,17 +127,28 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
|
||||
localResourceRoots: [vscode.Uri.joinPath(this.extensionUri, "media")],
|
||||
};
|
||||
|
||||
webviewView.webview.html = this.getWebviewContent(webviewView.webview);
|
||||
// 检查是否已登录（使用 Authentication API）
|
||||
this.checkLoginStatus().then((isLoggedIn) => {
|
||||
webviewView.webview.html = this.getWebviewContent(
|
||||
webviewView.webview,
|
||||
isLoggedIn
|
||||
);
|
||||
});
|
||||
|
||||
// 处理侧边栏的消息
|
||||
webviewView.webview.onDidReceiveMessage((message) => {
|
||||
if (message.command === "openChat") {
|
||||
vscode.commands.executeCommand("ic-coder.openChat");
|
||||
} else if (message.command === "login") {
|
||||
vscode.commands.executeCommand("ic-coder.login");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private getWebviewContent(webview: vscode.Webview): string {
|
||||
private getWebviewContent(
|
||||
webview: vscode.Webview,
|
||||
isLoggedIn: boolean
|
||||
): string {
|
||||
const logoUri = webview.asWebviewUri(
|
||||
vscode.Uri.joinPath(this.extensionUri, "media", "icon.png")
|
||||
);
|
||||
@ -184,7 +211,11 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
|
||||
<div class="container">
|
||||
<img src="${logoUri}" alt="IC Coder" width="120" />
|
||||
<h2>欢迎使用 IC Coder</h2>
|
||||
<button class="btn" onclick="openChat()">开始创作</button>
|
||||
${
|
||||
isLoggedIn
|
||||
? '<button class="btn" onclick="openChat()">开始创作</button>'
|
||||
: '<button class="btn" onclick="login()">登录账户</button>'
|
||||
}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -194,6 +225,11 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
|
||||
vscode.postMessage({ command: 'openChat' });
|
||||
}
|
||||
|
||||
// 登录功能
|
||||
function login() {
|
||||
vscode.postMessage({ command: 'login' });
|
||||
}
|
||||
|
||||
function generateCode(type) {
|
||||
const code = getCodeTemplate(type);
|
||||
vscode.postMessage({
|
||||
|
||||
Reference in New Issue
Block a user