27、为美食发现应用添加 OAuth 认证与心愿单功能

为美食发现应用添加 OAuth 认证与心愿单功能

1. 引言

在美食发现应用中，为了提升用户体验和安全性，我们将添加 OAuth 认证功能，让用户可以使用 GitHub 账户登录。同时，还会实现心愿单页面，已认证用户可以在该页面添加和移除地点，并且会创建所需的按钮组件。最后，我们将学习如何保护 GraphQL 突变，防止未认证用户进行操作。

2. 添加 OAuth 认证

2.1 使用 next-auth 实现 OAuth

开发者通常使用第三方库或 SDK 来实现 OAuth。对于美食发现应用，我们将使用 Auth.js 的 next-auth 包，它提供了一系列预配置的模板，方便我们连接到 OAuth 服务。这些模板称为提供者，我们将使用 GitHub 提供者，为应用添加“使用 GitHub 登录”按钮。

2.2 创建 GitHub OAuth 应用

步骤如下：
1. 若没有 GitHub 账户，先在 https://github.com 创建并登录。
2. 导航到 https://github.com/settings/developers ，在 OAuth Apps 部分创建新的 OAuth 应用。
3. 在表单中输入应用详情：
- 名称：Food Finder
- 主页 URL：