这篇文章发给AI，Google登录+Stripe支付就搞定了丨附提示词

这篇文章发给AI，Google登录+Stripe支付就搞定了丨附提示词 🍎 这篇文章发给AI，Google登录+Stripe支付就搞定了丨附提示词 Modified April 22 Authorized redirect URIs 填： https://xxxx.supabase.co/auth/v1/callback 规则是： https://<你的 Supabase Project Ref .加上 supabase.co/auth/v1/callback 不知道Ref在哪里你就问codex，它啥都知道。 创建后复制 Client ID 和 Client Secret。 3、回到 Supabase 保存信息 步骤1： Authentication Providers Google 把第2步拿到的 Client ID / Client Secret 粘进去，点 Save。 步骤2：supabase里，Authentication URL Configuration 1、Site URL 填： https://xxx.com这是你自己业务站点地址 2、Additional Redirect URLs 加： https://xxx.com/xxxx/pricing.html 这是你自己业务站点地址支付页 http://xxxx/xxxx/pricing.html （本地调试用那个price地址） 最后再做一次： Vercel 重新部署 （变量改动后必须）。 再补一句 其实只要不走专家路线，学ai的方式其实都是目的先行，不如想体验出海就先给codex聊天就完事了。它什么都会告诉你。然后你会在聊天中学会前端、后端、支付集成。哪怕很水，但足够跑起来。然后接着聊，然后会的更多。 毕竟绝大多数人根本不走专家路线没必要学那么多当然了出海还要报班的需要信息差。我自己垂类课和通识课加起来买了七八套课老师也有七八个，还没算claude、 codex这种天才老师。 其实还是目的先行的聊天知道自己到底要学啥，是最必不可少的。然后再去看自己买的那些课，效率会更高点。 所以如果大家遇到诸如此类不会的，一律先和codex说就可以了，循序渐进，并不困难。 ok，我是阿星， 更多AI应用，我们下期再见👋 Authorized redirect URIs 填： https://xxxx.supabase.co/auth/v1/callback 规则是： https://<你的 Supabase Project Ref .加上 supabase.co/auth/v1/callback 不知道Ref在哪里你就问codex，它啥都知道。 创建后复制 Client ID 和 Client Secret。 3、回到 Supabase 保存信息 步骤1： Authentication Providers Google 把第2步拿到的 Client ID / Client Secret 粘进去，点 Save。 步骤2：supabase里，Authentication URL Configuration 1、Site URL 填： https://xxx.com这是你自己业务站点地址 2、Additional Redirect URLs 加： https://xxx.com/xxxx/pricing.html 这是你自己业务站点地址支付页 http://xxxx/xxxx/pricing.html （本地调试用那个price地址） 最后再做一次： Vercel 重新部署 （变量改动后必须）。 再补一句 其实只要不走专家路线，学ai的方式其实都是目的先行，不如想体验出海就先给codex聊天就完事了。它什么都会告诉你。然后你会在聊天中学会前端、后端、支付集成。哪怕很水，但足够跑起来。然后接着聊，然后会的更多。 毕竟绝大多数人根本不走专家路线没必要学那么多当然了出海还要报班的需要信息差。我自己垂类课和通识课加起来买了七八套课老师也有七八个，还没算claude、 codex这种天才老师。 其实还是目的先行的聊天知道自己到底要学啥，是最必不可少的。然后再去看自己买的那些课，效率会更高点。 所以如果大家遇到诸如此类不会的，一律先和codex说就可以了，循序渐进，并不困难。 ok，我是阿星， 更多AI应用，我们下期再见👋 哈喽，大家好！ 我是阿星👋 昨天我们用ai接入了stripe但是还没讲怎么把用户登录系统做出来👉手把手教你跑通出海支付！Stripe接入+扣款成功全流程实录。 今天补充下这part，其实应该先做这part，不过自己干刚接触的话差不多能用就行了。 实现什么？这里推荐的是用google登录。用户注册后可以在右上角看到自己的账号信息和订阅状况。有用户产生新的订阅，数据库里都会有相关的记录。(可以跟AI聊天配的更详细) 使用说明（必看） 1、为了方便懒得看的同学，我让codex整理了一套不但能帮你做完本文用户登录功能、还能顺带把上篇文章的stripe集成进去的提示词，没空看文章可以直接复制。（先用他生成登录系统） 2、具体手动操作步骤的话往下划拉即可。 3、看不懂没关系，直接把这篇文章发给AI即可。 看不懂代码现在也能达到同样的功能，你是小白的话，是完全可以做出来。 懒人提示词直接用 text 你是我的全栈工程师，请在现有静态前端 + Vercel API 项目里，完整实现“Google 登录 + Stripe 订阅 + Supabase 持久化”，并满足以下硬性要求。 【目标】 1. 登录方式：Google 登录（基于 Supabase Auth OAuth）。 2. 支付方式：Stripe Checkout 订阅（月/季/年）。 3. 会员真相源：后端 webhook + Supabase 表，不允许只靠 localStorage 判权限。 4. 交互要求：会员页右上角必须有明显账号入口（头像+邮箱），可查看账号信息、管理订阅、切换账号、退出登录。 5. 安全要求：每次点击“购买/管理订阅”前，强制同步当前 Google session 到后端，防止旧账号 cookie 残留导致串号下单。 【技术栈和关键路由】 前端：pricing.html（静态页） API： GET /api/auth/config POST /api/auth/google session POST /api/auth/logout GET /api/auth/me POST /api/payments/create checkout session POST /api/payments/customer portal GET /api/payments/subscription status POST /api/webhooks/stripe GET /api/health 【数据表（Supabase）】 必须使用两张表： public.billing users public.subscriptions 字段至少包含： billing users: id /email/stripe customer id/subscription status/created at/updated at subscriptions: user id/stripe subscription id/stripe price id/plan key/status/current period end/cancel at period end/updated at 等 【环境变量】 必须读取并校验： SUPABASE URL SUPABASE ANON KEY SUPABASE SERVICE ROLE KEY AUTH JWT SECRET STRIPE SECRET KEY STRIPE WEBHOOK SECRET STRIPE PRICE MONTHLY STRIPE PRICE QUARTERLY STRIPE PRICE YEARLY APP BASE URL STRIPE TRIAL DAYS STRIPE ALLOW PROMO CODES STRIPE PORTAL ENABLED 【前端行为要求】 1. 未登录时：购买按钮可见，但点击后先提示 Google 登录。 2. 已登录时：右上角显示头像+邮箱；账号菜单可见。 3. 账号信息弹窗显示：邮箱、登录方式、会员状态、到期时间。 4. 手机端：账号信息字体不可过小（至少 text sm 以上，可读）。 5. 购买前调用 ensureAuthenticatedUser()，内部必须“先强制同步 Google session 再读后端 session”。 【支付与会员逻辑】 1. create checkout session 只接受已登录用户。 2. 首次支付自动创建 Stripe customer，并回写 billing users.stripe customer id。 3. webhook 监听至少 5 个事件： checkout.session.completed invoice.paid invoice.payment failed customer.subscription.updated customer.subscription.deleted 4. webhook 验签失败必须返回 400。 5. webhook 写入 subscriptions，确保幂等（按 user id 或 stripe subscription id upsert）。 【缺表诊断】 1. /api/health 必须返回 billing users 和 subscriptions 的检查结果。 2. 若缺表，错误信息必须明确提示“运行 supabase 建表 SQL 文件路径”。 【交付物】 代码修改 一份可直接执行的 Supabase SQL 文件（如 xxxx/supabase/billing schema.sql） 一份部署检查文档（环境变量、Webhook、测试步骤） 【验收清单（你必须自测）】 1. Google 登录后右上角显示邮箱。 2. 切换 Google 账号后，再点购买时使用的是新账号。 3. 未订阅用户可登录，但会员状态显示“未订阅”。 4. 完成 Stripe 测试支付后，会员状态变为 active，且有 current period end。 5. 取消订阅后状态正确回落。 6. /api/health 返回成功并包含两张表检查项。 现在开始直接改代码，不要只给方案。改完输出： 修改了哪些文件 每个文件的关键变更 还需要我在 Dashboard 手动完成哪些配置 ``` 代码生成完了， 接着就是配置了，步骤也非常简单， 一共就三大步—— 1、Supabase 里关联google登录 路径： Supabase Dashboard Authentication Providers Google 操作：打开 Enable Google，先停在这个页面， 等会把 Google 的 Client ID / Client Secret 粘进来并 Save。 2、Google Cloud 里创建应用并获取密钥 路径： Google Cloud Console APIs & Services Credentials 操作： 1. 先在 OAuth consent screen 把同意页配完（External + 测试用户）。 2. 再 Create Credentials OAuth client ID Web application。