如何使用 Twitter 和 NextAuth.js 验证 Next.js 应用程序

用户2291246544941
1,947 阅读13分钟

如何使用 Twitter 和 NextAuth.js 验证 Next.js 应用程序

使网络成为一个好地方的部分原因是开发人员能够为使用它的人个性化内容和应用程序体验。我们如何向 Next.js 应用程序添加身份验证，以便为访问者定制这些体验？

里面是什么🧐

什么是认证？

身份验证是识别个人或实体并确保他们与他们声称的身份相符的过程。虽然这通常是一个人，但它也可以是机器人帐户或组织之类的东西。

这通常被视为访问网站或应用程序时的登录表单，您在其中向服务提供凭据，并且该服务验证它们是否正确。

使用 Next.js 进行身份验证的挑战是什么？

身份验证的挑战不是 Next.js 所固有的，而是技术，能够提供一种安全、准确地验证人们身份的方法。

这有很多含义，因为错误地识别某人可能会允许人们访问其他人的帐户，而安全性差可能会导致敏感数据泄露。

就 JavaScript 应用程序而言，实现解决方案也面临挑战。您需要能够在保持安全的同时跨不同服务（如客户端、API 或服务器）进行通信的东西。

当这些请求在服务器端时会简单一些，因为您可以在请求中隐藏敏感数据，但您仍然希望在浏览器中提供动态体验。

NextAuth.js 是什么？

这就是NextAuth.js作为一体化解决方案出现的地方，它为 Next.js 应用程序提供各种身份验证层。

NextAuth.js 的核心是利用 Next.js 无服务器功能来提供身份验证 API。为了保持会话和用户身份验证状态，它将 JWT 存储为HttpOnly cookie，然后它能够发出经过身份验证的请求，直到它过期或刷新。

很酷的是，它包含了各种开箱即用的身份验证提供程序，包括 Twitter、Google 和 GitHub 等流行的身份验证提供程序，您只需提供 API 密钥，人们就可以开始登录。

使用推特登录推特登录

如果您想管理比现成的更复杂的会话状态，您甚至可以通过适配器提供您自己的数据库。

为了与 NextAuth 交互，他们提供了一个易于使用的 API，可以在客户端、内部getServerSideProps以及其他无服务器功能内部工作，使其成为管理和访问会话状态的超级灵活方式。

我们要建造什么？

我们将利用 NextAuth.js API 将 Twitter 登录添加到我们的 Next.js 应用程序中。

我们将使用Create Next App从头开始，学习如何安装 NextAuth.js，设置和配置 Twitter 应用程序，并使用 Twitter 作为提供者来验证我们应用程序的访问者。

首先，我们将设置应用程序以获取用户会话客户端，但还将了解如何将其移动到getServerSideProps两个选项之间的权衡中。

第 0 步：使用 Create Next App 创建一个新的 Next.js 应用程序

我们将使用Create Next App开始一个新的 Next.js 应用程序。

在终端内，运行：

yarn create next-app my-auth-app
# or
npx create-next-app my-auth-app

注意：可以随意使用与my-auth-app项目名称不同的值！

安装完成后，您可以导航到该目录并启动您的开发服务器：

cd my-auth-app

yarn dev
# or
npm run dev

加载后，您现在应该可以在http://localhost:3000上打开您的新应用程序！

新的 Next.js 应用程序下一个 Next.js 应用程序

跟随提交！

第 1 步：安装和配置 NextAuth.js

开始使用 NextAuth.js，我们首先要将它安装为我们项目的依赖项：

yarn add next-auth
# or
npm install next-auth --save

如果您还记得之前的内容，NextAuth.js 依靠无服务器功能来提供身份验证功能。所以我们需要做的第一件事就是创建一个新函数。

创建一个名为authinside of的新文件夹pages/api，并在里面创建一个名为[…nextauth].js.

提示：括号[将我们的 API 路由定义为一个参数（或变量），并...告诉 Next.js 可以有多个参数，或者 Next.js 调用它，一个包罗万象的路由。这意味着我们将能够同时命中两个端点/api/auth/session，/api/auth/callback/twitter并且两个端点都将解析为该函数。

在里面pages/api/auth/[…nextauth].js，添加：

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Twitter({
      clientId: process.env.TWITTER_CONSUMER_KEY,
      clientSecret: process.env.TWITTER_CONSUMER_SECRET
    })
  ]
});

以下是正在发生的事情的细分：

  • 我们正在导入主要的 NextAuth 模块以及允许我们设置身份验证提供程序的 Providers 模块
  • 我们导出 NextAuth 的默认调用，它将构建我们需要支持各种身份验证 API 路由的所有 API 代码和配置
  • 在 NextAuth 中，我们添加了一个配置，我们在其中创建了一个新的提供者数组，特别是传入 Twitter 提供者
  • Twitter Provider 有 2 个配置属性，aclientId和clientSecret，它们指向我们接下来要设置的环境变量

如果我们尝试加载应用程序，此时什么也不会发生，因为我们并没有尝试访问该端点，但即使我们加载了，我们也没有配置 Twitter。

那么接下来，让我们定义我们的环境变量。这些将允许我们存储敏感值，例如 API 密钥，这些值将在运行时注入到环境中。它有助于防止这些值存储在可能危及它们的公共位置。

在名为的项目的根目录创建一个新文件.env.local并在里面添加：

TWITTER_CONSUMER_KEY="key"
TWITTER_CONSUMER_SECRET="secret"
NEXTAUTH_URL="http://localhost:3000/"

这里定义了 2 个 Twitter 环境变量和一个我们将用于 NextAuth 的 URL。我们将在下一步中获取 Twitter 环境变量，但 NextAuth URL 最终将是您的身份验证服务将连接到的位置，在我们的示例中，我们在本地工作，因此我们可以使用我们的测试环境。

当我们启动 Next.js 服务器时，我们将可以通过process.env前面看到的 where访问这些值，我们可以像这样使用它：

process.env.TWITTER_CONSUMER_KEY

但与之前类似，如果您尝试加载应用程序，则什么也不会发生。接下来，我们将逐步创建一个 Twitter 应用程序，获取凭据，在我们的环境中配置它们，最后使用 NextAuth 登录。

跟随提交！

第 2 步：创建 Twitter 应用程序并配置消费者和客户端密钥

为了允许人们使用 Twitter 登录，我们必须创建一个应用程序并在 Twitter 上注册。

前往developer.twitter.com，您可以在其中使用新的或现有的 Twitter 帐户登录开发者门户，我们将使用该帐户创建我们的应用程序。

进入后，我们要创建一个新的独立应用程序。为此，导航到项目和应用程序，然后导航到概览，然后单击创建应用程序按钮。

Twitter 门户创建应用程序按钮创建一个新的 Twitter 应用程序

接下来，Twitter 会要求您为您的应用命名。这可以是任何东西，但它必须是唯一的。我将使用“Space Jelly App”。

在下一个屏幕上，Twitter 将为您提供 API 密钥。这些是不应与任何人共享的敏感价值观，除非您与团队合作。确保将它们保存在安全的地方，因为我们很快就会在我们的应用程序中使用它们。

注意：您将无法再次看到这些密钥，但如果您碰巧丢失了它们，您可以在 Keys & Tokens 下重新生成它们。但是，重新生成它们会使以前的密钥无效，需要您在使用它们的任何地方更新它们。

保存密钥后，点击应用程序设置，我们现在位于应用程序的仪表板中。随意更新名称、描述，甚至添加图标，但这些对我们的演练并不重要。

我们需要更新两件事，即应用程序权限和身份验证设置。

在App 权限下选择Edit，我们希望将可用权限更改为Read 和 Write。然后点击保存。

Twitter 应用程序权限Twitter API 的读写应用权限

我们还想导航到我们的应用程序仪表板上的身份验证设置，在这里，我们想做一些事情。

首先，我们要同时启用3-legged OAuth和Request email address from users。

Twitter 应用程序身份验证设置更新 Twitter API 的身份验证设置

我们还想为我们的应用程序配置一些 URL。

Twitter 应用程序的 URL 配置Twitter API 的身份验证 URL 配置

以下是我们需要的细分：

  • 回调 URL：这将是我们的身份验证服务在身份验证时用于与 Twitter 通信的内容。在本地开发的时候，应该是你服务器的地址。在生产中，它应该是您面向公众的 URL（例如：http://localhost:3000/api/auth/callback/twitter）
  • **网站 URL：**这应该是您的应用程序最终所在的网站
  • **服务条款、隐私政策：**这 2 个页面应该位于您的网站或公共地方，向您的应用程序用户提供有关您将如何处理他们的应用程序信息的信息

一旦这些都填好并保存，我们就可以回到我们的应用程序了。

现在我们有了 API 密钥，我们想将它们添加到我们的应用程序中。

回到我们的.env.local文件中，更新以下 API 密钥的值：

  • TWITTER_CONSUMER_KEY – API 密钥（或消费者密钥）
  • TWITTER_CONSUMER_SECRET – API 秘密（或消费者秘密）

此时，我们已准备好开始将身份验证集成到我们的应用程序中！

第 3 步：使用 NextAuth.js 将客户端 Twitter 登录添加到 Next.js

将 NextAuth 集成到我们的应用程序中有两个主要组件：

  • NextAuthProvider允许我们的应用程序通过 React Context 全局访问会话
  • NextAuth 客户端 API 包括signIn、signOut和useSession，这将允许我们执行他们描述的操作以及访问我们用户会话的信息

首先，让我们添加 NextAuth 提供程序。pages/_app.js首先导入内部Provider：

import { Provider } from 'next-auth/client';

然后我们需要包装我们现有的<Component. 将MyApp组件更新为以下内容：

function MyApp({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  );
}

在这里，我们包装了我们的组件，并且我们还将我们的会话作为道具传递给该提供者。

全局设置 NextAuth 后，我们现在可以使用客户端 API。

内pages/index.js首次进口的情况如下：

import { signIn, signOut, useSession, } from 'next-auth/client';

然后我们可以使用useSession钩子来获取我们的会话数据：

export default function Home() {
  const [session] = useSession();

不过，在我们可以检查用户的会话之前，我们需要能够让某人能够登录。

还在里面，pages/index.js让我们将主要内容顶部的描述段落替换为：

现在如果我们在浏览器中打开并重新加载我们的应用程序，我们可以看到我们没有登录，但我们有一个登录按钮。

Next.js 应用程序未登录带有登录按钮的 Next.js 应用程序

如果我们继续单击该按钮，我们将进入一个包含另一个按钮的屏幕，我们现在可以在其中使用我们的提供商（在我们的示例中为 Twitter）登录。

使用 Twitter 按钮登录使用推特登录

完成后，您将进入一个新屏幕，该屏幕将允许您使用您在第 2 步中创建的应用程序登录并授权您的 Twitter 帐户。

你做的一个，你会被带回你的 Next.js 应用程序，你现在应该看到你的 Twitter 帐户的电子邮件，说明它“已登录”！

Next.js 应用程序已登录 Twitter 帐户使用 Twitter 电子邮件登录

要了解这是如何工作的，让我们看看session变量的内部。在我们的useSession钩子正下方，让我们添加一个console.log：

const [session] = useSession();
console.log('session', session)

Chrome 开发工具会话数据Chrome 开发工具中的会话数据

我们可以看到我们可以访问我们 Twitter 帐户的名称、电子邮件，甚至头像。

这意味着，我们可以更新我们的 UI 以欢迎 Twitter 帐户而不是 Next.js，例如：

<h1 className={styles.title}>
  Welcome { session ? session.user.name : 'to Next.js' }
</h1>

如果我们在浏览器中查看，我们现在可以看到我们的欢迎信息！

个性化欢迎信息欢迎太空水母 Cosmo

跟随提交！

第 4 步：在 getServerSideProps 中使用 NextAuth 访问用户的会话服务器端

最后，第 3 步向我们展示了如何在客户端访问该信息，这意味着我们向浏览器中的 API 发出请求以访问我们的会话数据。

像客户端那样加载信息有其优点，您可以完全静态地导出应用程序，而不需要服务器渲染，但它也有它的缺点，比如第一次加载时的闪烁，它首先显示未经身份验证的信息。

如果我们想在服务器上加载该信息怎么办？

NextAuth 的伟大之处在于我们可以在 Next.js getServerSideProps函数内部访问相同的信息。

要了解它是如何工作的，首先让我们首先添加getSession到我们的 import 语句中pages/index.js：

import { signIn, signOut, useSession, getSession } from 'next-auth/client';

然后在页面底部添加：

export async function getServerSideProps(context) {
  const session = await getSession(context);
  return {
    props: {
      session
    }
  }
}

在上面，我们是：

  • 创建一个 nsesew 异步getServerSideProps函数
  • 我们正在使用我们的getSession函数为我们的会话发出请求
  • 我们将这个函数传递给我们的应用程序context，它作为参数来自getServerSideProps
  • 然后我们最终将该会话信息作为新的 prop 返回

现在我们有了新的 prop，我们需要在我们的 home 组件中定义这个 prop。

export default function Home({ session }) {
  // const [session] = useSession();

在这里，我们添加session了一个 prop，并且我们还注释掉了我们的useSession钩子，因为我们已经在服务器端获取会话信息。

但是现在如果我们重新加载页面，我们应该会看到我们在第 3 步之后看到的内容，我们现在可以看到来自 Twitter 的登录用户信息，这些信息都是在服务器端加载的！

imgCosmo 的 Twitter 信息加载服务器端

跟随提交！

下一步是什么？

将应用程序部署到生产环境！

无论您使用 Vercel 还是 Netlify，部署应用程序都应该非常简单。

这两个选项都开箱即用地与 Next.js 一起使用，允许您部署无服务器功能。

不过，您需要做两件事才能使其在生产中工作：

  • 将环境变量添加.env.local到您的环境中
  • 将 Twitter 开发人员门户中的回调 URL 更新为生产 URL

一旦这些设置完成，您就应该准备好在网络上实时登录了！

使用数据库存储与应用程序相关的用户信息

构建具有登录功能的应用程序的部分好处是能够存储帐户信息以个性化某人的体验。

也许您正在创建课程或某种配置文件，无论如何，使用 NextAuth 适配器设置数据库可让您轻松连接和存储该信息。

添加更多身份验证提供程序，例如 GitHub 和 Google

NextAuth 的伟大之处在于它使您能够与许多开箱即用的身份验证提供商合作。

在 NextAuth 上查看完整列表。

供应商 | NextAuth.js

avatar
文章
阅读
粉丝