使用 Next.js 集成 Passport 实现 OAuth 认证教程-JavaScript中文网-JavaScript教程资源分享门户

OAuth 是一种授权框架，它允许第三方应用程序使用 API 访问用户的资源，同时保护用户的安全和隐私。在前端开发中，OAuth 认证通常被用于登录、授权和访问 API。Next.js 是一个流行的 React 框架，它提供了服务器渲染和静态网站生成的功能。在本文中，我们将使用 Next.js 和 Passport 库来实现 OAuth 认证。

准备工作

在开始之前，我们需要准备一些工作：

在 OAuth 服务提供商的网站上注册一个应用程序，并获取客户端 ID 和客户端密钥。在本文中，我们将使用 GitHub 作为 OAuth 服务提供商。
安装 Node.js 和 npm。
创建一个 Next.js 应用程序。你可以使用以下命令来创建一个简单的 Next.js 应用程序：
```
npx create-next-app my-app
cd my-app
npm run dev
```

安装 Passport 和相关策略

在 Next.js 应用程序中使用 Passport，我们需要安装以下依赖项：

passport：Passport.js 库。
passport-github：GitHub OAuth2.0 策略。
```
npm install passport passport-github
```

配置 Passport

在 Next.js 应用程序中配置 Passport，我们需要创建一个 Passport 实例并使用策略。

在 pages/api/auth/[...nextauth].js 文件中添加以下代码：

// javascriptcn.com 代码示例
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

在这个文件中，我们使用 next-auth 库创建了一个 NextAuth 实例，并使用 GitHub 策略作为认证提供商。我们还通过环境变量传递了 GitHub 应用程序的客户端 ID 和客户端密钥。你需要在 .env.local 文件中添加以下内容：

GITHUB_CLIENT_ID=your-client-id
GITHUB_CLIENT_SECRET=your-client-secret

在 pages/api/auth/[...nextauth].js 文件中添加以下代码：

// javascriptcn.com 代码示例
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import passport from "passport";
import GitHubStrategy from "passport-github";

passport.use(
  new GitHubStrategy(
    {
      clientID: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
      callbackURL: "http://localhost:3000/api/auth/callback/github",
    },
    function (accessToken, refreshToken, profile, done) {
      return done(null, profile);
    }
  )
);

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

在这个文件中，我们使用 passport 库创建了一个新的 GitHub 策略，并将其添加到 Passport 实例中。我们还指定了 GitHub 回调 URL。

创建登录页面

在 Next.js 应用程序中创建登录页面，我们需要添加一个链接到 GitHub 登录页面的按钮，并处理登录回调。

在 pages/index.js 文件中添加以下代码：

// javascriptcn.com 代码示例
import { signIn, signOut, useSession } from "next-auth/client";

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

  return (
    <div>
      {!session && (
        <>
          <button onClick={() => signIn("github")}>Sign in with GitHub</button>
        </>
      )}
      {session && (
        <>
          <p>Signed in as {session.user.name}</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
}

在这个文件中，我们使用 next-auth/client 库的 useSession 钩子来检查用户是否已经登录。如果用户未登录，我们将显示一个按钮，该按钮将触发 GitHub 登录流程。如果用户已经登录，我们将显示用户的姓名和一个注销按钮。

在 pages/api/auth/callback/github.js 文件中添加以下代码：

// javascriptcn.com 代码示例
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import passport from "passport";
import GitHubStrategy from "passport-github";

passport.use(
  new GitHubStrategy(
    {
      clientID: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
      callbackURL: "http://localhost:3000/api/auth/callback/github",
    },
    function (accessToken, refreshToken, profile, done) {
      return done(null, profile);
    }
  )
);

export default (req, res) => {
  passport.authenticate("github", function (err, user, info) {
    if (err) {
      console.log(err);
      return res.redirect("/");
    }
    if (!user) {
      console.log(info);
      return res.redirect("/");
    }
    req.logIn(user, function (err) {
      if (err) {
        console.log(err);
        return res.redirect("/");
      }
      return res.redirect("/");
    });
  })(req, res);
};

在这个文件中，我们使用 passport 库的 authenticate 方法来处理 GitHub 登录回调。如果登录成功，我们将用户信息保存在会话中，并将用户重定向到主页。如果登录失败，我们将用户重定向到主页并记录错误消息。

测试应用程序

现在，你可以启动 Next.js 应用程序，并访问主页。如果你点击 "Sign in with GitHub" 按钮，将会重定向到 GitHub 的登录页面。在登录成功后，你将会被重定向到应用程序的主页，并看到你的 GitHub 用户名。

总结

在本文中，我们使用 Next.js 和 Passport 库来实现 OAuth 认证。我们学习了如何配置 Passport 和 GitHub 策略，并创建了一个登录页面来处理 GitHub 登录回调。通过学习本文，你可以将 OAuth 认证应用到你的 Next.js 应用程序中，并保护用户的安全和隐私。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657acce1d2f5e1655d547496