Bangumi OAuth 2.0 认证指南：第三方客户端登录与 Token 管理一次讲清

Bangumi OAuth 2.0 认证指南第三方客户端登录与 Token 管理一次讲清【免费下载链接】Bangumi:electron: An unofficial https://bgm.tv ui first app client for Android and iOS, built with React Native. 一个无广告、以爱好为驱动、不以盈利为目的、专门做 ACG 的类似豆瓣的追番记录bgm.tv 第三方客户端。为移动端重新设计内置大量加强的网页端难以实现的功能且提供了相当的自定义选项。 目前已适配 iOS / Android。项目地址: https://gitcode.com/GitHub_Trending/ba/BangumiBangumi 是一个基于 React Native 的 bgm.tv 追番记录第三方客户端。本文带你摸清它的 OAuth 认证登录流程和 Token 管理机制跑起来、看懂登录原理、绕开新手常踩的坑全部有仓库源码可查。① 它是干什么的一句话定位把 bgm.tv 的追番记录、讨论社区整体搬到手机上并且为移动端重新设计布局、加了不少网页端做不到的功能。一个典型使用画面早上刷手机打开客户端点一下昨天看完那一集标记成在看顺手翻翻每日放送页确认今天的新番再到讨论区看两楼。你标记的每一条进度都同步回 bgm.tv 账号——而这一切的前提就是客户端先通过登录拿到 API 权限。② 三步跑起来环境准备安装 Node.js 和 yarn国内网络建议先把 npm 源切回官方源README 明确提到部分依赖走淘宝源会报不允许代理的错。安卓打包还要正确的 JDK不是 JRE和 watchman。获取与启动git clone https://gitcode.com/GitHub_Trending/ba/Bangumi cd Bangumi yarnREADME 建议用 yarn 而不是 npm 装依赖因为项目年代久、依赖版本关系复杂。第一次上手注意 iOS 和安卓走的是两套运行时iOS 在 Expo 客户端里调试安卓走 metro 跑真机。安卓真机开启 USB 调试连上后按根目录 package.json 里的yarn dev启动即可看到登录界面。③ 一图看懂核心机制登录到底走哪条通道大白话结论Bangumi 用网页 cookie 维持登录态再用 OAuth 2.0 授权码模式换成 API 令牌两条通道分开走互不拖累。时间线如下你在登录页提交账号密码客户端带着表单码 formhash 请求/oauth/authorize服务器 302 跳转到一个带回调地址里面带有一次性授权码 code客户端拿 code 去/oauth/access_token换回 Bearer 令牌存进本地之后每个 API 请求自动在请求头里带上Authorization: Bearer 令牌令牌 7 天到期后客户端重新发起授权// src/stores/user/init.tsToken 初始结构与 7 天有效期 export const INIT_ACCESS_TOKEN { access_token: , expires_in: 604800, token_type: Bearer, refresh_token: }过期判断就一行逻辑当前时间戳减去更新时间超过 expires_in 就认定失效见computed.ts的isLoginExpired相关实现。④ 新手必踩的坑坑一yarn 装依赖报错或异常慢现象安装过程中途失败提示不允许代理或卡死。 原因npm 源被设成了淘宝镜像项目里的旧依赖和它不兼容。 解法npm config set registry https://registry.npmjs.org后重装。坑二照着网上 React Native 教程跑不起来现象expo start之类命令在安卓上没反应。 原因iOS 走 Expo 客户端、安卓走 metro两套运行时不能混用。 解法先确认你的目标平台按 README「本地开发」一节选对应的启动路径。坑三Token 过期了 App 居然还能用现象过了 7 天登录态显示异常但刷页面、看条目都正常。 原因API 令牌和网页 cookie 是两回事很多页面只走 cookie 通道。 解法别急着登出理解isLogin与isWebLogin的分工再判断当前是哪条通道掉了。坑四安卓打包失败现象gradlew 打包突然报 read timeout 或 watchman 相关错误。 原因依赖包缓存只有 24 小时或者本机没装 watchman。 解法进 android 目录执行./gradlew clean后重试必要时加--offline。⑤ FAQ问Token 过期了会强制掉线吗答不会直接掉线。客户端先检查isLoginExpired未过期就复用本地令牌授权换新令牌的过程失败时会重试超过上限才提示你重新登录整个过程基本无感。问为什么网页内容登出了还能看答因为网页视图走的是 cookie 通道API 令牌过期只影响接口鉴权。两条通道独立过期、独立恢复这也是它敢在网页慢或挂掉时仍保数据可用的底气。问init.ts 里那个 604800 是多久答604800 秒正好 7 天。它是令牌默认有效期配合 token_type、refresh_token 一起构成INIT_ACCESS_TOKEN的完整结构登录成功后被整体覆盖。⑥ 下一步建议想深挖认证细节直接读 src/stores/user/init.ts放初始状态、action.ts写登录登出与换令牌、computed.ts集中了登录态判断三个文件串起来就是全部流程。登录页面本身在 src/screens/login/表单、令牌两种登录形态都有独立目录。把这条链路走通你就有底气体谅多通道认证的取舍了。【免费下载链接】Bangumi:electron: An unofficial https://bgm.tv ui first app client for Android and iOS, built with React Native. 一个无广告、以爱好为驱动、不以盈利为目的、专门做 ACG 的类似豆瓣的追番记录bgm.tv 第三方客户端。为移动端重新设计内置大量加强的网页端难以实现的功能且提供了相当的自定义选项。 目前已适配 iOS / Android。项目地址: https://gitcode.com/GitHub_Trending/ba/Bangumi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考