Next.js 中如何使用 Authentication 和 Authorization？-JavaScript中文网-JavaScript教程资源分享门户

在现代的 Web 应用程序中，认证和授权通常是不可或缺的功能，以确保用户安全地访问应用程序和资源。Next.js 是一种流行的 React 框架，提供了许多集成认证和授权的方案，让我们来探讨一下如何使用它们。

认证（Authentication）

认证是指验证用户的身份以确定他们是否有权访问系统中的资源。在 Next.js 中有多种方式可以提供认证。

JWT 身份验证

JWT（JSON Web Token）是一种常见的用于认证的方法。它是一种基于 JSON 的开放标准（RFC 7519），用于声明用户的安全令牌，以便作为访问授权和声明的手段。Next.js 具有 next-auth 包与 JWT 集成，可以快速轻松地实现身份验证。

安装 next-auth 包：

npm install next-auth

在 _app.js 文件中添加以下代码：

// javascriptcn.com 代码示例
import { Provider } from 'next-auth/client'

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

export default MyApp

然后在需要身份验证的页面中，通过引用 useSession 钩子获取已验证的用户信息：

// javascriptcn.com 代码示例
import { useSession } from 'next-auth/client'

function MyPage() {
  const [session, loading] = useSession()

  if (loading) {
    return <p>Loading…</p>
  }

  if (session) {
    return <p>Hello, {session.user.name}!</p>
  } else {
    return <p>Access Denied</p>
  }
}

export default MyPage

在 pages/api/auth/[...nextauth].js 文件中，您需要配置身份验证策略和 JWT 标记。具体请参见 next-auth 官方文件。

Firebase 身份验证

Firebase 是一个 Google 提供的应用程序开发平台，可为身份验证和实时数据库提供支持。Next.js 有一个称为 next-firebase-auth 的第三方库，该库将 Next.js 和 Firebase 无缝集成，从而可以非常方便地进行身份验证。

安装 next-firebase-auth 包：

npm install next-firebase-auth firebase

在 pages/_app.js 中部署 firebaseConfig，以便在应用程序中使用 Firebase：

// javascriptcn.com 代码示例
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import { FirebaseAuthProvider } from 'next-firebase-auth'
import 'styles/globals.css'

const firebaseConfig = {
  // your firebase config
}

function MyApp({ Component, pageProps }) {
  return (
    <FirebaseAuthProvider firebase={firebase} {...firebaseConfig}>
      <Component {...pageProps} />
    </FirebaseAuthProvider>
  )
}

export default MyApp

在您的身份验证页面中，您可以注入 signInWithEmailAndPassword 和 useAuth 钩子以访问已验证的用户和提供身份验证：

// javascriptcn.com 代码示例
import { signin, signout, useSession } from 'next-auth/client'

function SignIn() {
  const [session, loading] = useSession()

  function handleSignin() {
    signin('google')
  }

  function handleSignout() {
    signout()
  }

  // 身份验证逻辑

  return (
    <>
      {!session && (
        <>
          Not signed in <br />
          <button onClick={handleSignin}>Sign in</button>
        </>
      )}
      {session && (
        <>
          Signed in <br />
          <button onClick={handleSignout}>Sign out</button>
        </>
      )}
    </>
  )
}

export default SignIn

其他认证方式

Next.js 支持 OpenID 和 OAuth 2.0 等其他身份验证方案。可以使用 next-callback、next-auth0、next-oidc、next-oauth 等第三方库实现这些功能。

授权（Authorization）

授权是指确定请求方是否能够执行特定操作或访问资源。授权通常需要结合认证，以确保用户只能访问他们有权访问的资源。在 Next.js 中，有多种方法可以实现授权：

基于角色的访问控制

基于角色的访问控制（RBAC）是一种常见的授权方法，它将用户分组，并授权对不同资源进行不同程度的访问权限。这种授权策略可以使用任何数据存储方案（例如 MySQL、PostgreSQL、MongoDB 等）来实现。

例如，您可以创建一张存储用户角色的表，然后使用此表来授权对资源的访问。以下是使用 MySQL 实现 RBAC 的示例代码：

// javascriptcn.com 代码示例
import mysql from 'mysql'
import nextConnect from 'next-connect'

const connection = mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME,
})

const checkAccess = (requiredRole) => (req, res, next) => {
  const { user } = req.session

  const query = `SELECT permission FROM roles WHERE user_id=${user.id}`
  connection.query(query, (error, results, fields) => {
    if (error) {
      console.error(error.stack)
      res.status(401).json({ message: 'Unauthorized' })
      return
    }

    const allowed = results.some((result) => result.permission === requiredRole)
    if (allowed) {
      next()
    } else {
      res.status(401).json({ message: 'Unauthorized' })
    }
  })
}

const handler = nextConnect()

// 授权 'admin' 角色
handler.get(checkAccess('admin'), (req, res) => {
  res.json({ message: 'Hello admin' })
})

export default handler

与 Firebase 实时数据库集成

Firebase 实时数据库是一种基于 JSON 的云数据库，提供了实时数据同步和安全的授权规则。可以将它与 Next.js 集成，为数据访问和授权提供全面的支持。

首先，您需要在 Firebase 控制台中创建一个项目，然后在您的 Next.js 应用程序中实例化 Firebase 实时数据库：

// javascriptcn.com 代码示例
import firebase from 'firebase/app'

const firebaseConfig = {
  // your firebase config
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

export const db = firebase.database()

然后，您可以在 pages/api 中创建一个新 API，使用 Firebase 实时数据库读取和写入数据：

// javascriptcn.com 代码示例
import { db } from 'lib/firebase'

export default async (req, res) => {
  if (req.method === 'POST') {
    // 写入数据到 Firebase 实时数据库
  } else if (req.method === 'GET') {
    // 从 Firebase 实时数据库读取数据
  } else {
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

最后，您可以使用 Firebase 规则语言编写强大的授权规则，以限制谁能够读取和写入数据。例如，以下是一个简单的规则，只允许经过身份验证的用户访问资源：

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

总结

这些只是 Next.js 中许多可用的身份验证和授权选项的快速概述。您还可以使用第三方库和其他技术来实现这些功能，具体取决于您的项目需求。无论您选择哪种方案，一定要对其进行彻底的测试和评估，以确保安全和可靠性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f77b0bf6b2d6eab3fdcf41