SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场frontend-connect

frontend-connect

前端与建站

查看项目

更新于 10-20 01:55

技能介绍

Frontend connect 是一个技能，用于为使用者生成一个已接入其 Drupal 后端登录的 Next.js 应用。这里的后端指由 backend-setup 技能创建的站点。

用途 该技能面向以下场景：使用者希望拥有一个 Next.js 应用，并能针对本地 Drupal 后端完成登录。技能负责创建应用、铺入应用文件、安装依赖并写入环境配置，使前端与后端完成 OAuth 登录对接。

使用前提 开始前需先运行 machine-check 技能中的 bash scripts/check-machine.sh，仅当其 JSON 输出中 ready 为 true 时才继续；否则向使用者展示其报告内容并停止。 环境要求 Node 22.13 或更高版本，且必须安装 mkcert，脚本会同时检查这两项。 后端必须正在运行，并且带有名为 nextjs 的 Simple OAuth 客户端，重定向 URI 为 http://localhost:3000/api/auth/callback。由 backend-setup 以其默认模板 ref 创建的后端已包含该客户端。 需建议一个与后端文件夹并列的应用文件夹，例如 <backend-folder>-app，该文件夹必须尚不存在或为空。在运行脚本前应告知使用者该路径并等待其同意。

使用方式 以绝对路径运行该技能的脚本：

bash <this-skill-folder>/scripts/setup-frontend.sh --backend <backend-project-folder> <app-folder>

脚本按顺序执行以下步骤：

  1. 检查 Node、npm、mkcert，并确认后端可响应。
  2. 以显式参数运行 create-next-app@16.4.1（TypeScript、App Router、ESLint、Tailwind、无 src/、npm）；Next.js 16.4.1 为安全下限。
  3. 将本技能的 assets/app 文件夹复制覆盖到新应用上。
  4. 以精确版本安装 openid-client 与 iron-session。
  5. 调整 dev 脚本，使 npm run dev 在 next dev 之前从 mkcert -CAROOT 导出 NODE_EXTRA_CA_CERTS。若缺少该变量，Node 会拒绝 DDEV 的 mkcert 证书，且该变量仅在启动时读取。npm 通过 sh 运行脚本，因此该方式在原生 Windows cmd 下不可用。
  6. 写入一次 .env.local，包含 DRUPAL_BASE_URL、DRUPAL_CLIENT_ID、DRUPAL_SCOPE、APP_URL 以及随机的 SESSION_SECRET。
  7. 除非 git 确认 .env.local 已被忽略，否则停止。
  8. 打印 App folder:、Backend URL: 与启动命令，并交给使用者。 应用源码中不包含任何 Drupal 主机地址。若要指向另一后端，只需修改 .env.local 中的 DRUPAL_BASE_URL。对已由该脚本生成的应用再次运行脚本时，会跳过 create-next-app 与依赖安装，再次覆盖复制应用文件，且不会改动 .env.local。

登录与登出 登录使用 Drupal 自身的登录表单。登出会从应用会话中清除令牌，然后跳转到 Drupal 的登出页面，该页面需要一次确认点击，从而结束 Drupal 登录。 在为该应用编写的代码中，已登录的含义是会话持有访问令牌，而不仅是姓名，应使用 lib/auth-state.ts 中的 isSignedIn 判断。 令牌刷新仅在单个服务器进程内安全，例如 npm run dev 或单个 next start；若存在多个进程或多个无服务器实例，同时进行两次刷新可能导致使用者被登出。 Simple OAuth 没有撤销端点，因此登出后已签发的令牌仍会在最长 300 秒内有效，刷新令牌则在其生命周期结束前有效。若使用者询问登出的彻底程度，应告知这一点。

出错处理 修复原因后，对同一文件夹再次运行脚本。 Node 低于 22.13：按 machine-check 技能的建议安装较新的 Node。 后端无响应：在后端文件夹运行 ddev start。 文件夹存在且非空：换一个文件夹，或询问使用者。 create-next-app 或 npm install 失败：向使用者展示输出。在 package.json 列出 openid-client 之前，部分生成的应用文件夹不是有效的重跑目标；经使用者同意后可删除并重新运行。 .env.local 未被 git 忽略：将 .env.local 加入应用的 .gitignore，然后再次运行。

适用场景与限制 该技能适用于本地 Drupal 后端配合 Next.js 前端的开发场景，尤其是由 backend-setup 创建的默认后端。限制包括：依赖 Node 22.13 以上与 mkcert；需要在符合条件的环境（如非原生 Windows cmd）下运行开发脚本；令牌刷新不支持多进程或无服务器多实例；登出后令牌在短时间内仍可能有效。资料未提供其他平台支持、收费或价格信息。