VS Code扩展开发：用vscode.openExternal()打开认证页如何取消安全提示

要去掉vscode.openExternal()打开认证页面时的安全提示，核心是让VSCode信任这个跳转属于合法的认证流程，具体可以通过以下步骤实现：

• 步骤1：在package.json中注册认证提供者的合法回调URI
  在扩展的package.json的contributes字段里，为你的自定义认证提供者指定redirectUri（推荐使用VSCode协议的URI，比如vscode://你的扩展ID/认证回调路径），告诉VSCode这个跳转是认证流程的一部分：

  "contributes": {
    "authentication": [
      {
        "id": "your-custom-auth-provider",
        "label": "你的自定义认证提供者",
        "redirectUri": "vscode://com.your-extension.id/auth-callback"
      }
    ]
  }
  

• 步骤2：注册URI Handler处理认证回调
  在扩展激活时，注册一个URI处理器，用来接收认证服务器返回的回调参数（比如授权码）：

  export function activate(context: vscode.ExtensionContext) {
    // 注册URI Handler
    context.subscriptions.push(
      vscode.window.registerUriHandler({
        async handleUri(uri: vscode.Uri) {
          // 从URI查询参数中提取授权码、状态值等
          const code = uri.query.split('&').find(param => param.startsWith('code='))?.split('=')[1];
          const state = uri.query.split('&').find(param => param.startsWith('state='))?.split('=')[1];
          
          // 这里执行授权码换令牌的逻辑，生成AuthenticationSession
          const session = await yourTokenExchangeLogic(code, state);
          // 更新认证会话并触发变更事件
          yourAuthProvider.updateSession(session);
        }
      })
    );
  }
  

• 步骤3：在认证提供者的createSession方法中调用openExternal
  构建包含合法回调URI的认证链接，然后调用vscode.env.openExternal()——此时VSCode会识别这是认证流程的合法跳转，不会弹出安全提示：

  class YourAuthProvider implements vscode.AuthenticationProvider {
    private _session?: vscode.AuthenticationSession;
    private readonly _onDidChangeSession = new vscode.EventEmitter<vscode.AuthenticationProviderAuthenticationChangeEvent>();
    readonly onDidChangeAuthentication = this._onDidChangeSession.event;
  
    async createSession(scopes: string[]): Promise<vscode.AuthenticationSession> {
      // 生成随机state值防止CSRF攻击
      const state = crypto.randomUUID();
      const redirectUri = 'vscode://com.your-extension.id/auth-callback';
      
      // 构建认证URL
      const authUrl = new URL('https://your-auth-server.com/authorize');
      authUrl.searchParams.set('client_id', '你的客户端ID');
      authUrl.searchParams.set('redirect_uri', redirectUri);
      authUrl.searchParams.set('scope', scopes.join(' '));
      authUrl.searchParams.set('state', state);
      authUrl.searchParams.set('response_type', 'code');
  
      // 调用openExternal，无安全提示
      await vscode.env.openExternal(authUrl);
  
      // 等待回调完成后返回会话
      return new Promise((resolve) => {
        const listener = this.onDidChangeAuthentication(() => {
          listener.dispose();
          resolve(this._session!);
        });
      });
    }
  
    // 其他必要方法实现（比如getSessions、removeSession等）
    updateSession(session: vscode.AuthenticationSession) {
      this._session = session;
      this._onDidChangeSession.fire({ added: [session], removed: [], changed: [] });
    }
  }
  

关键说明 #

• 不要直接在非认证流程的上下文调用openExternal()打开外部链接，VSCode的安全机制会强制弹出提示，这是无法绕过的。
• 只有当跳转属于已注册的认证提供者流程时，VSCode才会信任该链接并跳过提示，这是官方推荐的合规做法。

内容的提问来源于stack exchange，提问作者toho