5、实现用户登录

现在我们的“后端仓库”已经有了坚实的地基（数据库），但它还缺少一个最重要的东西：一个安全、可靠的“前门”，用来欢迎我们的用户，并验证他们的身份。

这一课，我们就来攻克所有应用中最核心的功能之一——用户认证 (Authentication)，也就是登录。我们将以最常见的“使用 Google 登录”为例，让你在几分钟内，为你的网站集成世界级的登录体验。

这个过程分为三步：在 Supabase 后台进行配置，在 Google Cloud 平台进行“登记”，最后回到我们的项目中，指挥 AI 完成前端代码。我们一步步来。

第 1 步：在 Supabase 后台开启 Google 登录

首先，我们需要告诉 Supabase：“嘿，我准备允许用户通过 Google 账号来登录我的网站了。”

:::warning

1. 登录你的 Supabase 项目后台，在左侧菜单中，找到并点击那个“人像”图标，进入 Authentication (身份验证) 页面。
2. 在子菜单中，点击 Providers (提供商)。
3. 你会看到一个长长的列表，包含了所有支持的登录方式。找到 Google 并点击它。
4. 打开 Enable Google provider (启用 Google 提供商) 的开关。
5. 现在你会看到两个需要填写的空栏：Client ID (客户端 ID) 和 Client Secret (客户端密钥)。先别急，我们下一步就去 Google 那里拿到它们。
6. 最重要的一步：在 Client ID 输入框下方，你会看到一个 Redirect URI (重定向 URI)。它看起来像这样：https://<你的项目ID>.supabase.co/auth/v1/callback。点击旁边的按钮把它复制下来，我们马上就要用到。

:::

第 2 步：在 Google Cloud 后台“登记备案”

现在，我们需要去 Google 的“管理后台”进行登记，告诉 Google：“我有一个网站，想使用你的登录功能，请给我一个许可凭证。”

这个过程看起来步骤很多，但你只需要严格跟着我的指引操作，忽略所有其他无关选项即可。

:::warning

1. 前往 Google Cloud Console。用你的 Google 账号登录。
2. 在页面顶部，点击项目选择器，然后点击 NEW PROJECT (新建项目)，给你的项目起个名字（比如 My Awesome App），然后创建它。
3. 项目创建成功后，确保你已经选中了它。在左上角的汉堡菜单中，导航到 APIs & Services > Credentials (API 和服务 > 凭据)。
4. 点击页面顶部的 + CREATE CREDENTIALS (创建凭据)，然后选择 OAuth client ID (OAuth 客户端 ID)。
5. 如果这是你第一次配置，Google 会要求你先配置 OAuth consent screen (OAuth 同意屏幕)。
   • 选择 External (外部)，然后点击创建。
   • 在下一页，你只需要填写必填项：应用名称（你的网站名）、用户支持电子邮箱，以及开发者联系信息里的邮箱。其他都可以暂时不填，直接拉到最下方保存并继续。
6. 现在回到创建凭据的流程。在 Application type (应用类型) 中，选择 Web application (Web 应用)。