Next.js教程：验证

身份验证可验证用户身份，而授权则可控制用户可以访问的内容。Next.js支持多种身份验证模式，每种模式都针对不同的用例而设计。该页面将介绍每种情况，以便您可以根据自己的限制进行选择。

认证方式

识别所需身份验证模式的第一步是了解所需的数据获取策略。然后，我们可以确定哪些身份验证提供程序支持此策略。主要有两种模式：

• 使用静态生成在服务器端呈现加载状态，然后从客户端获取用户数据。
• 在服务器端获取用户数据，以消除未认证内容的闪烁。

验证静态生成的页面

如果没有阻塞数据要求，那么Next.js会自动确定页面是静态的。这意味着页面中没有getServerSideProps和getInitialProps。相反，您的页面可以从服务器呈现加载状态，然后获取用户客户端。

这种模式的优点之一是，它允许从全局CDN提供页面并使用进行预加载next/link。实际上，这导致更快的TTI（互动时间）。

让我们看一下个人资料页面的示例。最初将呈现一个加载骨骼。对用户的请求完成后，将显示用户名：

// pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // Fetch the user client-side
  const { user } = useUser({ redirectTo: '/login' })

  // Server-render loading state
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>
  }

  // Once the user request finishes, show the user
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

您可以在此处查看此示例的实际操作。查看with-iron-session示例以了解其工作原理。

验证服务器渲染的页面

如果导出从页面async调用的函数getServerSideProps，则Next.js将使用所返回的数据在每个请求上预呈现此页面getServerSideProps。

export async function getServerSideProps(context) {
  return {
    props: {}, // Will be passed to the page component as props
  }
}

让我们将配置文件示例转换为使用服务器端渲染。如果有会话，请user作为道具返回Profile页面中的组件。请注意，此示例中没有加载框架。

// pages/profile.js

import withSession from '../lib/session'
import Layout from '../components/Layout'

export const getServerSideProps = withSession(async function ({ req, res }) {
  // Get the user's session based on the request
  const user = req.session.get('user')

  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  // Show the user. No loading state is required
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

这种模式的优点是可以防止重定向前未经身份验证的内容闪烁。重要的是要注意，在getServerSideProps对您的身份验证提供程序的请求解决之前，获取用户数据将阻止呈现。为避免造成瓶颈并减少TTFB（到达第一个字节的时间），您应确保身份验证查找快速。否则，请考虑静态生成。

身份验证提供者

现在，我们已经讨论了身份验证模式，让我们看一下特定的提供程序，并探讨它们如何与Next.js一起使用。

拥有自己的数据库

例子

• with-iron-session
• next-auth-example

如果您已有一个包含用户数据的数据库，则可能需要使用与提供商无关的开源解决方案。

• 如果您需要电子邮件/密码登录，请使用next-iron-session。
• 如果需要将会话数据保留在服务器上，请使用next-auth。
• 如果您需要支持社交登录（Google，Facebook等），请使用next-auth。
• 如果要使用JWT，请使用next-auth。

这两个库都支持任一身份验证模式。如果您对Passport感兴趣，我们还提供使用安全和加密cookie的示例：

• with-passport
• with-passport-and-next-connect

Firebase

例子

• with-firebase-authentication

使用Firebase身份验证时，我们建议使用静态生成模式。

可以使用Firebase Client SDK生成ID令牌，并将其直接转发到服务器上Firebase的REST API进行登录。但是，对Firebase的请求可能需要一些时间才能解决，具体取决于用户的位置。

您可以将FirebaseUI用于嵌入式UI，也可以使用自定义React hook创建自己的UI 。

Magic (Passwordless)

例子

• with-magic

使用无密码登录的Magic支持静态生成模式。与Firebase相似，必须在客户端上创建唯一标识符，然后将其作为标头转发到登录。然后，Magic的Node SDK可用于交换标识符以获取用户信息。

Auth0

例子

• Auth0

Auth0可以支持两种身份验证模式。您还可以利用API路由登录/注销和检索用户信息。使用Auth0 SDK登录后，您可以利用静态生成或getServerSideProps用于服务器端渲染。

Supabase

例子

• 与-supabase-auth-realtime-db

Supabase是Firebase的开源替代方案，支持其许多功能，包括身份验证。它允许使用JWT令牌进行行级安全保护，并支持第三方登录。两种身份验证模式均受支持。

Userbase

例子

• with-userbase

用户库支持用于身份验证的静态生成模式。它是开源的，并通过端到端加密提供了高度的安全性。您可以在他们的官方网站上了解更多有关它的信息。

SuperTokens

例子

• with-supertokens

SuperTokens是一个高度可定制的开源解决方案，分为多个模块（因此您仅使用所需的模块）。SuperTokens当前支持凭证登录，电子邮件验证，密码重置流程和第三方登录。