尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

基于MCP协议与OAuth 2.0构建AI银行助手:vivid-mcp项目实战解析

基于MCP协议与OAuth 2.0构建AI银行助手:vivid-mcp项目实战解析 1. 项目概述与核心价值最近在折腾AI智能体开发特别是想给Claude、ChatGPT这些大模型装上一个能直接操作我银行账户的“手”让它们能帮我查余额、看交易记录甚至分析消费趋势。这个需求听起来有点“科幻”但在实际开发中我发现了一个非常有意思的开源项目vivid-money/vivid-mcp。简单来说这是一个实现了Model Context ProtocolMCP标准的服务器专门用于连接AI助手与Vivid Money银行的账户数据。MCP这个概念可能对部分开发者来说还比较新你可以把它理解为一套“标准插座”。AI智能体比如Claude Desktop是“电器”而各种数据源和服务比如你的银行、日历、笔记软件是“电源”。MCP服务器就是这个“转换插头”它定义了一套标准的接口让AI智能体能够安全、规范地“插上”并使用这些服务。vivid-mcp项目就是为Vivid Money这个银行服务量身定做的那个“转换插头”。对于开发者、金融科技爱好者或者任何想深入探索AI智能体如何与真实世界金融服务交互的人来说这个项目提供了一个绝佳的、可实操的范本。它不仅仅是一个工具更是一个清晰展示了如何将私有API封装成标准化MCP资源Resources和工具Tools的工程案例。通过拆解它你能学到MCP协议的核心思想、OAuth 2.0授权在AI场景下的实践以及如何设计安全、高效的金融数据查询接口。接下来我就结合自己搭建和使用的经验把这个项目的里里外外、关键细节和踩过的坑给你彻底讲明白。2. MCP协议核心与项目架构解析2.1 为什么是MCP协议的核心思想在接触vivid-mcp之前我也尝试过用传统的OpenAI Function Calling或者自定义API来连接AI和银行服务但很快就遇到了问题扩展性差、配置繁琐、每个AI助手都需要单独适配。MCP的出现正是为了解决这种“烟囱式”的集成困境。MCP的核心思想是标准化与解耦。它定义了一套基于JSON-RPC的通信协议AI智能体客户端和资源服务服务器通过标准化的消息格式进行对话。服务器向客户端宣告“我这里有这些资源比如/accounts列表和工具比如search_transactions可用。” 客户端则根据用户的自然语言指令调用相应的工具或读取资源。这套协议有几个关键优势一次开发多处使用一个MCP服务器如vivid-mcp开发完成后可以同时被支持MCP的Claude Desktop、Cursor AI等客户端使用无需为每个客户端重写适配逻辑。动态发现客户端在启动时自动发现服务器提供的所有能力和资源列表实现了“即插即用”。安全性协议层定义了清晰的权限边界。服务器控制暴露哪些数据客户端只能访问被明确公开的接口。vivid-mcp项目就是MCP思想的一个完美落地。它扮演了MCP服务器的角色将Vivid Money的私有REST API“翻译”成了标准的MCP资源和工具。它的架构非常清晰主要包含以下几个层次传输层支持stdio标准输入输出和sse服务器发送事件两种方式与MCP客户端通信。本地开发调试常用stdio部署时可能用sse。协议层实现MCP标准的initialize,tools/list,resources/list,tools/call,resources/read等核心JSON-RPC方法。业务逻辑层这是项目的核心包含了与Vivid Money API交互的所有逻辑如账户管理、交易查询、空间Spaces信息获取等。认证层集成了OAuth 2.0授权码流程PKCE扩展负责安全地获取和刷新访问令牌Access Token。2.2 项目代码结构深度解读打开vivid-mcp的代码仓库它的结构体现了良好的关注点分离。以典型的Node.js实现为例src/ ├── index.ts # 服务器入口初始化并启动MCP服务器 ├── mcp/ # MCP协议核心实现 │ ├── server.ts # MCP服务器类注册资源与工具 │ └── types.ts # MCP相关类型定义 ├── services/ # 业务服务层 │ ├── vivid/ # Vivid Money API客户端 │ │ ├── client.ts # 封装HTTP请求处理错误和重试 │ │ ├── api/ # 具体的API端点模块accounts, transactions等 │ │ └── auth.ts # OAuth 2.0认证流程管理核心 │ └── cache.ts # 简单的内存缓存用于减少API调用 ├── tools/ # MCP工具定义 │ ├── accounts.ts # “获取账户列表”工具 │ ├── transactions.ts # “搜索交易”工具 │ └── spaces.ts # “获取空间信息”工具 └── resources/ # MCP资源定义 └── account.ts # “账户详情”资源关键文件剖析src/services/vivid/auth.ts这是项目安全的心脏。它完整实现了OAuth 2.0 with PKCE流程。PKCEProof Key for Code Exchange是针对公共客户端如本地应用的安全增强能有效防止授权码被拦截攻击。代码里你会看到它如何生成code_verifier和code_challenge如何启动一个临时本地服务器来接收授权回调以及如何用授权码换取access_token和refresh_token。这里有个重要细节它通常会将刷新令牌安全地存储到本地文件如~/.vivid-mcp-token.json并在访问令牌过期时自动刷新保证了长会话的可用性。src/tools/transactions.ts这是最常用的工具之一。它定义了search_transactions工具其输入参数args的设计很有讲究。除了基本的账户ID它通常支持startDate/endDate日期范围过滤格式为ISO 8601。query关键词搜索匹配交易描述或对手方信息。limit/offset用于分页。 在实现函数内部它会将这些参数映射到Vivid Money API的对应查询参数上。一个实用的技巧Vivid的API可能对日期格式或查询长度有特定限制工具层在这里可以做一层适配和校验提供更友好的错误提示。src/mcp/server.ts这里是MCP协议的组装车间。在initialize方法中服务器会将自己支持的所有工具和资源列表返回给客户端。handleToolCall和handleResourceRead是请求路由器它们根据调用名称找到对应的工具函数或资源获取函数执行。性能注意点对于resources/read如读取某个账户详情因为可能被频繁调用可以考虑在这里引入缓存逻辑避免对Vivid API的重复请求。3. 从零开始环境搭建与配置实战3.1 前置准备与依赖安装首先你需要一个Vivid Money账户。然后最关键的一步是创建OAuth应用以获取合法的client_id。登录Vivid Money开发者门户如果开放的话或者按照项目README的指引申请API访问权限。你会得到client_id可能还有client_secret如果是机密客户端但PKCE流程下公共客户端通常不需要。记下重定向URIRedirect URI本地开发通常设为http://localhost:3000/callback或http://localhost:8080/callback这需要和后面代码里的配置一致。接下来是代码环境。项目通常是Node.jsTypeScript编写。确保你的系统安装了Node.js建议LTS版本和npm或yarn。# 克隆项目 git clone https://github.com/vivid-money/vivid-mcp.git cd vivid-mcp # 安装依赖 npm install # 或 yarn install依赖解读查看package.json你会看到几个核心依赖modelcontextprotocol/sdkMCP官方SDK提供了构建服务器的工具类。axios用于发起对Vivid Money API的HTTP请求。express用于运行接收OAuth回调的临时服务器。dotenv管理环境变量。强烈建议使用.env文件来配置敏感信息。3.2 关键配置详解与首次认证在项目根目录创建.env文件VIVID_CLIENT_IDyour_client_id_from_vivid # VIVID_CLIENT_SECRETyour_secret_if_any # PKCE流程可能不需要 VIVID_REDIRECT_URIhttp://localhost:8080/callback PORT8080 # 回调服务器端口配置要点VIVID_REDIRECT_URI必须和你在Vivid开发者平台注册的一模一样包括端口。PORT是本地回调服务器监听的端口确保没有被其他程序占用。现在运行开发服务器npm run dev首次运行神奇的事情会发生。控制台会打印出一个URL你需要手动在浏览器中打开它。这个URL指向Vivid Money的授权页面你会看到熟悉的登录界面。用你的Vivid账户登录后会询问你是否授权该应用访问你的账户数据。授权后页面会跳转到你设置的localhost:8080/callback并携带一个授权码code。此时你启动的本地服务器会捕获这个code并在后台自动完成用code换取token的过程。重要提示整个OAuth流程中你的client_secret如果有和最终的access_token都不会暴露给前端浏览器它们只在你的本地服务器与Vivid的授权服务器之间安全交换。这是PKCE流程的核心安全价值。成功后令牌信息会被保存到本地文件如token.json。以后启动服务器它会自动读取并使用刷新令牌来获取新的访问令牌无需你再次手动授权除非令牌完全失效。4. 核心功能实操工具与资源的调用4.1 与MCP客户端连接以Claude Desktop为例假设你使用Claude Desktop。你需要配置Claude Desktop来识别并使用你的vivid-mcp服务器。配置方式因客户端而异对于Claude Desktop通常需要编辑其配置文件如claude_desktop_config.json在mcpServers部分添加{ mcpServers: { vivid-money: { command: node, args: [/ABSOLUTE/PATH/TO/vivid-mcp/build/index.js], env: { VIVID_CLIENT_ID: your_client_id, VIVID_REDIRECT_URI: http://localhost:8080/callback } } } }路径陷阱command和args必须指向你项目编译后的入口文件如build/index.js。确保使用绝对路径并且你已经运行过npm run build生成了构建产物。配置完成后重启Claude Desktop。4.2 工具调用实战与结果解析连接成功后你就可以在Claude的对话窗口中使用自然语言来驱动这些工具了。场景一查询所有账户你可以对Claude说“列出我的Vivid账户。” Claude会识别出需要调用list_accounts工具。背后的MCP调用流程如下ClaudeMCP客户端发送tools/call请求调用list_accounts。vivid-mcp服务器收到请求执行对应的工具函数。工具函数内部使用存储的access_token调用Vivid Money的/v1/accountsAPI端点。获取到原始的账户列表数据通常是JSON数组包含账户ID、类型Current, Savings、余额、货币等信息。vivid-mcp服务器将数据格式化为MCP标准响应返回给Claude。Claude以清晰、易读的格式如表格将信息呈现给你。原始API响应可能很冗长[ { id: acc_123, type: current, balance: {amount: 1500.75, currency: EUR}, name: Main Account, iban: DE89... } ]而经过Claude整理后你看到的可能是“您有一个活期账户余额为1,500.75欧元。”场景二搜索特定交易这是一个更强大的功能。你可以说“帮我找出上个月在‘Amazon’的所有消费。” Claude会调用search_transactions工具并自动或提示你输入填入参数query: Amazon,startDate: 2024-04-01,endDate: 2024-04-30。实操心得Vivid的搜索API可能支持模糊匹配但标点符号和大小写有时会影响结果。如果搜不到尝试更通用的关键词比如“amzn”或者去掉空格。另外注意交易日期和记账日期的区别API通常按记账日期过滤。4.3 资源访问模式除了工具MCP还有“资源”的概念。资源更像是静态的、可通过URI寻址的数据。在vivid-mcp中一个账户的详细信息可能被定义为一个资源URI模板可能是vivid://accounts/{accountId}。当Claude需要展示某个账户的详细资料时它可能会发起一个resources/read请求来获取这个资源。这与工具调用的区别在于资源访问更侧重于“获取一个已知实体的状态”而工具更侧重于“执行一个操作或查询”。在实现上两者后端可能调用同一个Vivid API但MCP协议层面的抽象不同。5. 安全、权限与最佳实践5.1 OAuth令牌的生命周期管理vivid-mcp的安全性基石是OAuth 2.0。你需要理解令牌的流转首次授权用户交互获得authorization_code换取access_token和refresh_token。日常使用用access_token调用API。它通常有较短的有效期如1小时。静默刷新当access_token过期服务器自动使用refresh_token获取新的access_token。这是用户体验流畅的关键代码中的auth.ts必须妥善处理。刷新令牌过期refresh_token也可能过期如90天。此时整个令牌文件失效需要删除并引导用户重新进行完整的OAuth授权流程。安全存储建议项目默认将令牌存储在本地明文文件。对于个人开发可以接受但如果你计划分享或部署需要考虑更安全的方式使用操作系统提供的安全存储如macOS的KeychainWindows的Credential Manager。环境变量但对于刷新令牌环境变量不适合因为它是长效的。加密后存储在文件中密钥由用户主密码派生。5.2 权限范围Scopes理解在OAuth授权时应用会请求特定的权限范围Scopes例如accounts:read,transactions:read。vivid-mcp项目请求的Scope决定了它能访问数据的广度。目前它很可能只请求了只读权限这是非常谨慎和正确的做法。这意味着AI助手只能读取你的数据绝不能进行转账、支付等写操作。这从根本上杜绝了AI误操作导致资金损失的风险。最佳实践永远遵循最小权限原则。在开发自己的MCP服务器时只申请完成功能所必需的最小编Scope。5.3 数据缓存与API限流频繁调用银行API是不礼貌的也可能触发速率限制。vivid-mcp的services/cache.ts通常实现了一个简单的内存缓存。例如账户列表可能缓存5分钟交易详情缓存1分钟。缓存策略优化建议差异化TTL静态数据如账户基本信息TTL可以设长30分钟动态数据如余额、交易TTL设短1-5分钟。缓存失效在调用任何“写”操作如果未来有后主动清除相关的缓存。考虑持久化缓存对于完全静态的数据可以缓存到磁盘避免每次重启服务都重新获取。同时要尊重Vivid Money API的速率限制。在client.ts中应该实现请求队列、退避重试逻辑如指数退避并在达到限流时向用户给出友好的提示而不是不断重试。6. 高级话题扩展、调试与问题排查6.1 如何扩展新的工具或资源假设你想增加一个查询“月度消费统计”的工具。步骤如下在src/tools/下创建新文件例如monthly_stats.ts。定义工具Schema使用MCP SDK提供的defineTool函数明确描述工具名称、描述、输入参数如yearMonth: “2024-04”。实现工具函数在这个函数内部调用Vivid API的相关端点如果存在或者通过对已有交易数据进行聚合计算来实现。在服务器中注册在src/mcp/server.ts的初始化部分导入并注册这个新工具。重新编译并重启服务。设计工具Schema的学问工具的描述description要清晰输入参数要用JSON Schema定义好类型和约束。这能极大地帮助AI客户端如Claude理解何时以及如何调用你的工具。例如yearMonth参数可以描述为“格式为YYYY-MM的字符串”并给出示例。6.2 开发调试技巧调试MCP服务器有其特殊性因为它是通过stdio与客户端通信。独立测试服务器可以写一个简单的测试脚本模拟MCP客户端向你的服务器发送JSON-RPC请求来验证工具逻辑是否正确。启用详细日志在代码中关键位置如收到请求、调用API前后、发生错误时添加详细的日志输出。这能帮你追踪数据流。使用MCP Inspector工具MCP官方或社区可能提供Inspector工具它可以作为一个图形化的MCP客户端方便你手动测试工具调用和查看资源比通过AI对话调试更直接。检查Claude Desktop日志Claude Desktop通常会有日志文件里面记录了MCP通信的原始消息可能包含错误信息是排查连接问题的重要依据。6.3 常见问题与解决方案实录以下是我在搭建和使用过程中遇到的一些典型问题及解决方法问题现象可能原因排查步骤与解决方案Claude提示“无法连接到MCP服务器”1. 配置文件路径错误。2. 服务器进程未启动或崩溃。3. 环境变量未正确设置。1.检查路径确认Claude配置中command和args的绝对路径正确无误且指向编译后的JS文件。2.手动启动服务器在终端运行node build/index.js看是否有错误输出。常见错误是缺少.env变量或令牌文件损坏。3.查看进程检查服务器进程是否在运行。授权成功后操作仍返回“未授权”或“令牌无效”1. 访问令牌已过期且刷新失败。2. 令牌文件权限或格式错误。3. 请求的Scope权限不足。1.删除令牌文件删除本地的token.json重启服务触发重新授权流程。2.检查文件确保令牌文件可读且JSON格式正确。3.检查网络确认你的网络可以访问Vivid的授权服务器和API服务器。搜索交易时返回结果为空但网页端有记录1. 查询参数格式错误如日期格式。2. API搜索逻辑与预期不符如只搜索描述不搜索对手方。3. 有交易延迟。1.核对API文档仔细阅读Vivid API文档确认query参数的确切行为和date字段的准确含义。2.简化测试先用一个非常宽泛的条件如仅日期范围搜索确认基础功能正常再逐步增加条件。3.使用原始响应在工具函数中打印出API的原始响应查看数据结构是否变化。服务器启动时报“地址已被占用”端口冲突。OAuth回调服务器使用的端口如8080被其他程序占用。1. 更改.env文件中的PORT为其他值如8081并同步更新Vivid开发者平台的重定向URI设置。2. 使用lsof -i :8080macOS/Linux或netstat -ano | findstr :8080Windows查找并结束占用端口的进程。一个深坑有时Vivid的API响应结构可能会悄无声息地升级。如果你的工具突然解析数据失败首先检查API返回的原始JSON结构是否发生了变化。在client.ts中做好健壮的类型断言和错误处理至关重要。7. 项目意义与未来展望拆解完vivid-mcp你会发现它的价值远不止于“让AI查银行余额”。它是一个标杆展示了如何将任何一个拥有现代API特别是OAuth 2.0保护的服务安全、标准地接入到蓬勃发展的AI智能体生态中。MCP协议就像当年的USB协议正在试图统一AI与外部工具的连接方式。对于个人开发者你可以借鉴它的模式为你常用的服务如Notion、Jira、智能家居平台打造自己的MCP服务器从而让你使用的AI助手真正成为你的个人效率中枢。对于企业这意味着可以构建内部数据的MCP网关让员工能通过自然语言安全地查询内部系统提升工作效率。从vivid-mcp项目本身来看未来的演进方向可能包括支持更多端点例如访问储蓄目标Spaces的详细信息、信用卡账单、或金融分析洞察如果API提供。更智能的工具不仅仅是查询可以封装一些分析工具如“本月消费最多的类别是什么”、“对比上个月的餐饮支出”。改进的缓存与同步实现增量同步只获取变更的交易减少数据流量并提高响应速度。配置化与UI提供一个简单的配置界面让非技术用户也能轻松设置和使用。我个人在深度使用和修改这个项目后最大的体会是安全与用户体验的平衡是核心。所有与资金相关的操作都必须慎之又慎只读权限是当前阶段的绝对底线。同时流畅的OAuth流程和智能的令牌管理决定了用户是否愿意持续使用。这个项目在工程实现上给出了一个很好的平衡范例。如果你也对这个领域感兴趣不妨从fork这个项目开始尝试添加一个小功能那将是理解MCP和AI智能体集成的最佳入门途径。
返回列表