Next.js 身份验证

用户身份验证是任何现代 Web 应用程序的重要组成部分。它确保只有授权的用户才能访问特定的资源或功能。Next.js 提供了多种方法来实现身份验证，包括使用第三方服务、自定义 API 路由以及集成认证库。

使用第三方认证服务

使用 Auth0 实现身份验证

Auth0 是一个广泛使用的认证服务，支持多种认证方式，并提供了丰富的文档和工具来帮助开发者快速集成认证功能。以下是使用 Auth0 在 Next.js 应用程序中实现身份验证的基本步骤：

创建 Auth0 应用程序

首先，在 Auth0 管理控制台创建一个新的应用程序，选择“单页应用程序”类型。填写应用程序名称和其他必要信息，然后保存。

安装依赖

接下来，在你的 Next.js 项目中安装 next-auth 和 @auth0/nextjs-auth0 包，这些包将帮助你与 Auth0 服务进行交互：

npm install next-auth @auth0/nextjs-auth0

配置环境变量

在项目的根目录下创建一个 .env.local 文件，并添加以下环境变量：

AUTH0_CLIENT_ID=your_auth0_client_id
AUTH0_CLIENT_SECRET=your_auth0_client_secret
AUTH0_DOMAIN=your_auth0_domain
NEXTAUTH_URL=http://localhost:3000

请替换上述变量值为你的 Auth0 应用程序的实际值。

设置认证路由

在 pages/api/auth/[...auth0].js 中设置认证路由，这是处理用户登录、注册等操作的核心文件：

import initAuth from '../../utils/initAuth';

initAuth.handleRequest();

同时，确保在 utils/initAuth.js 中正确配置 initAuth 函数：

// www.javascriptcn.com code example
import { handleAuth } from '@auth0/nextjs-auth0';
import { AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_DOMAIN } from '../../../config';

export default handleAuth({
    async login(req, res) {
        try {
            await fetch(`https://${AUTH0_DOMAIN}/oauth/token`, {
                method: 'POST',
                body: JSON.stringify({
                    client_id: AUTH0_CLIENT_ID,
                    client_secret: AUTH0_CLIENT_SECRET,
                    audience: `https://${AUTH0_DOMAIN}/api/v2/`,
                    grant_type: 'client_credentials'
                }),
                headers: { 'content-type': 'application/json' }
            });
            res.redirect(302, '/profile');
        } catch (error) {
            res.status(error.status || 500).end(error.message);
        }
    },
    async logout(req, res) {
        const { returnTo } = req.query;
        res.redirect(302, `/api/auth/logout?returnTo=${encodeURIComponent(returnTo)}`);
    },
    async session(req, res) {
        // 处理会话逻辑
    },
    async key(req, res) {
        // 处理会话密钥逻辑
    }
});

添加登录和注销按钮

在需要的地方添加登录和注销按钮，例如在 pages/index.js 中：

// www.javascriptcn.com code example
import Link from 'next/link';
import { useUser } from '@auth0/nextjs-auth0';

const HomePage = () => {
    const { user, error, isLoading } = useUser();

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>{error.message}</div>;

    return (
        <div>
            {!user && (
                <Link href="/api/auth/login">
                    <a>Login</a>
                </Link>
            )}
            {user && (
                <>
                    <p>Welcome {user.name}</p>
                    <Link href="/api/auth/logout">
                        <a>Logout</a>
                    </Link>
                </>
            )}
        </div>
    );
};

export default HomePage;

保护路由

为了保护特定页面，可以使用 getServerSideProps 或 getInitialProps 方法来检查用户的认证状态：

// www.javascriptcn.com code example
import { getSession } from '@auth0/nextjs-auth0';

export async function getServerSideProps(context) {
    const session = await getSession(context.req, context.res);

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

    return { props: {} };
}

const ProfilePage = () => {
    return (
        <div>
            <h1>Profile Page</h1>
            {/* 显示用户数据 */}
        </div>
    );
};

export default ProfilePage;

自定义身份验证

除了使用第三方服务，你还可以选择完全自定义身份验证逻辑。这可能涉及到数据库操作、JWT 令牌生成与验证等。虽然这种方法更加灵活，但同时也增加了实现的复杂度。

使用 JWT 实现身份验证

JWT（JSON Web Tokens）是一种轻量级的身份验证机制，非常适合用于微服务架构或分布式系统中的认证。以下是如何在 Next.js 应用中使用 JWT 实现身份验证的一个简单示例：

创建 JWT 密钥对

首先，你需要生成一对 JWT 密钥（公钥和私钥）。可以使用 Node.js 的 jsonwebtoken 模块来完成这一任务：

npm install jsonwebtoken

const fs = require('fs');
const jwt = require('jsonwebtoken');

const privateKey = fs.readFileSync('private.key', 'utf8');
const publicKey = fs.readFileSync('public.key', 'utf8');

console.log(privateKey);
console.log(publicKey);

生成和验证 JWT

在登录过程中生成 JWT，并将其存储在客户端（如 cookies 或 localStorage），并在每次请求时发送该令牌。服务器端则负责验证 JWT 的有效性：

// www.javascriptcn.com code example
import jwt from 'jsonwebtoken';

const generateToken = (id) => {
    return jwt.sign({ id }, process.env.JWT_SECRET, {
        expiresIn: '30d',
    });
};

// 登录时
const token = generateToken(user._id);
res.cookie('jwt', token, { httpOnly: true, maxAge: 30 * 24 * 60 * 60 * 1000 });

// 保护路由
const protect = async (req, res, next) => {
    let token;

    if (req.headers.authorization && req.headers.authorization.startsWith('Bearer')) {
        try {
            token = req.headers.authorization.split(' ')[1];
            const decoded = jwt.verify(token, process.env.JWT_SECRET);
            req.user = await User.findById(decoded.id).select('-password');
            next();
        } catch (err) {
            console.error(err);
            res.status(401);
            throw new Error('Not authorized, token failed');
        }
    }

    if (!token) {
        res.status(401);
        throw new Error('Not authorized, no token');
    }
};

以上就是使用 Next.js 实现用户身份验证的两种主要方法：通过第三方认证服务和自定义认证逻辑。选择哪种方法取决于你的具体需求和项目的复杂性。希望这个教程能帮助你在 Next.js 应用中实现高效且安全的身份验证功能！