如何在Next.js中使用NextAuth.js进行客户端身份验证

2020年12月30日11:15:09 发表评论 114 次浏览

本文概述

介绍

身份验证是应用程序中的一项重要且敏感的功能, 在该应用程序中, 将验证用户的凭据(例如用户名, 电子邮件和密码)以确认用户的身份。

这是一种询问用户的身份, 然后接收证据以验证其身份的方法。系统采用用户提供的凭据, 并检查它们是否有效。

在本文中, 我们将逐步指导你如何设置不需要密码的客户端身份验证Next.js使用功能强大且安全的库NextAuth.js.

到本文结束时, 你将创建一个带有身份验证的应用程序, 你的用户将可以使用其Github, Google和Facebook帐户登录。成功注册后, 我们将显示用户的个人资料图片, 电子邮件, 我们将从他们的社交媒体帐户中检索该图片。

我们将利用React Hooks和功能组件来构建我们的应用程序。但是, 在深入探讨之前, 让我们看一下将要使用的两种主要工具。

什么是Next.js?

Next.js是建立在React之上的框架, 它使开发就绪, 完全优化的React应用程序的开发变得非常快速和容易。这是React生态系统中最好的事情之一, 因为它具有零配置的强大功能。

Netflix, Tiktok和Nike等顶级公司在生产中使用Next.js。它非常容易学习, 尤其是在你熟悉React的时候。

什么是NextAuth.js?

NextAuth.js是一个完全安全的身份验证解决方案, 用于在Next.js应用程序中实现身份验证。它是一个灵活的身份验证库, 旨在与任何OAuth服务同步, 并完全支持无密码登录。

它可以与数据库一起使用, 也可以不与数据库一起使用, 并且对流行的数据库(例如MySQL, MongoDB, PostgreSQL和MariaDB)具有默认支持。

通过与OAuth和JSON Web令牌等服务同步, 可以在没有数据库的情况下使用它。

NextAuth.js的工作方式

使用Auth-Next.js之类的库, 你无需像使用OAuth来构建受保护的Next.js应用程序时那样, 就可以成为身份协议方面的专家。 Auth-Next.js的构建是为了避免存储敏感数据(例如用户的密码)的需要。它与Next.js完美配合。仅需20行代码, 你就可以在应用程序中实现身份验证功能。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

如何在Next.js中使用NextAuth.js进行客户端身份验证1

NextAuth.js具有客户端API, 可用于与应用程序中的会话进行交互。从会话返回的会话数据提供者包含用户有效负载, 可以在成功登录后向用户显示。

返回给客户端的会话数据如下所示:

{
  expires: '2055-12-07T09:56:01.450Z';
  user: {
        email: 'sample@example.com';
        image: 'https://avatars2.githubusercontent.com/u/45228014?v=4';
        name: 'Ejiro Asiuwhu';
    }
}

请注意, 有效负载不包含任何敏感数据。会话有效负载或数据用于表示目的。也就是说, 它会向用户显示b

NextAuth.js提供了" useSession()" React Hook, 可用于检查用户登录状态。

同时, NextAuth.js提供了一个React API, 供React应用程序使用。要了解有关NextAuth公开的REST API的更多信息, 请查看官方文档.

要求

  • 你的本地计算机上安装了Nodejs 10.13或更高版本
  • 基础知识React.js

获取入门应用程序

我使用创建了一个Next.js项目npx create-next-app.

克隆这个资料库如果要继续, 请签到"入门"分支。如果要查看完成的代码, 请签出到complete分支。

git clone https://github.com/ejirocodes/Nextjs_Authentication.git

克隆存储库后, 切换到工作目录:

cd Nextjs_Authentication

安装Next.js依赖项:

npm i

切换到"入门"分支:

git checkout starter

启动开发服务器:

npm run dev

默认情况下, 该项目将在端口3000上运行。启动浏览器并导航到http://本地主机:3000。你应该以此结束:

入门项目

将你的Next.js应用程序与NextAuth.js连接

第一步是安装下次验证.下次验证是一个npm软件包, 因此安装它很容易。

npm i next-auth

成功安装后, 下次验证应该添加到package.json文件的依赖项中。我们将让用户选择使用其GitHub, Google和Facebook帐户登录我们的应用程序。

安装后的Next-Auth

创建GitHub OAuth应用

接下来, 我们将添加一个GitHub身份验证提供程序, 它实质上允许用户使用其GitHub帐户登录我们的应用程序。但首先, 我们需要创建一个GitHub OAuth应用。点击"新的OAuth应用", 并相应地填写表格。结帐官方文档了解更多。

应用名称:这是你的应用程序的名称。可以称为任何东西-并不重要。

主页网址:这是我们应用程序首页的完整URL。由于我们仍处于开发模式, 因此我们将填写运行我们的开发服务器的完整URL。就我而言http://本地主机:3000.

授权回调网址:这是网址GitHub将在用户成功登录到我们的应用后将其重定向到。它应该是你的首页网址加上" / api / auth / callback", 结果是:http:// localhost:3000 / api / auth / callback

注册我们的OAuth应用后, GitHub会创建一个客户编号和客户机密专门针对我们新创建的应用。将客户端ID和密钥复制到剪贴板:

单击生成新的客户密码去获取客户密码

添加环境变量

创建一个

.env.local

文件位于项目的根目录中。它不能是随机名称。之后。用以下内容填充它:

GITHUB_ID=<cilent id of your github auth app should go in here>
GITHUB_SECRET=<clent secret of your github app should go in here>
NEXTAUTH_URL=http://localhost:3000

NEXTAUTH_URL是我们应用的网址。确保使用开发服务器正在运行的端口。

现在, 回到我们的应用程序。我们将创建一个名为[... nextauth] .jsin页面/ api / auth并添加以下代码行:

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

const options = {
    providers: [
        Providers.GitHub({
            clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET
        }), ], }

export default (req, res) => NextAuth(req, res, options)

在第1行中, 我们将导入NextAuth, 这是我们的主要包。在第2行中, 我们正在导入提供者来自下次验证库, 这些服务可以集成到我们的应用中, 以允许用户使用OAuth登录。

在第6行中, 我们在提供程序上配置GitHub, 并通过环境变量传递GitHub机密和客户端ID。最后, 在第13行中, 我们导出了一个函数, 该函数返回NextAuth并接受options变量作为第三个参数。

女士们和男士们, 魔术已经发生了。如果我们利用REST API那下次验证提供给我们, 我们可以使用我们的GitHub帐户登录到我们的应用程序。导航http:// localhost:3000 / api / auth / signin你应该看到这个👇🏽

使用Github激活登录

遵循该过程, 然后赞!你已登录。接下来, 我们需要保存并显示用户的登录状态。

使用来检查用户登录状态useSession()钩

我们需要获取用户的登录状态, 并将用户的详细信息呈现在应用程序的前端。这可以通过使用称为Next.js的功能轻松实现定制应用。然后, 将组件包装在提供程序中。

创建一个_ap.js档案在页数目录(如果尚不存在), 并添加以下代码行:

import { Provider } from 'next-auth/client'
function MyApp({ Component, pageProps }) {
  return (
      <Provider session={pageProps.session}>
        <Component {...pageProps} />
      </Provider>
  )
}
export default MyApp

通过将我们的组件包装在提供程序中, 它将允许会话状态在页面之间共享, 这又将在页面导航期间保留我们的状态, 提高性能并减少网络流量。

接下来, 打开组件/Header.js档案并汇入useSession, SignIn和SignOut从下一认证/客户端:

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

useSession将用于管理用户的登录和注销状态, 而" signIn"和" signOut"将用于执行应用程序中的登录和注销功能。

让我们利用useSession Hook:

const [session] = useSession();

该会话将返回用户的详细信息。让我们使用返回的详细信息有条件地呈现"登录和退出"按钮。

替换return语句中的所有内容组件/Header.js使用以下代码行:

<div className='header'>
      <Link href='/'>
        <a className='logo'>NextAuth.js</a>
      </Link>
           {session && <a href="#" onClick={handleSignout} className="btn-signin">Sign             out</a>  } 
           {!session && <a href="#" onClick={handleSignin}  className="btn-signin">               Sign in</a>  } 
    </div>

我们需要创建登录和注销方法, 以使我们的用户可以登录和注销:

const handleSignin = (e) => {
      e.preventDefault()
      signIn()
  }    
const handleSignout = (e) => {
      e.preventDefault()
      signOut()
    }

你的Header.js现在应该看起来像这样:

import Link from 'next/link'
import { useSession, signIn, signOut } from 'next-auth/client'
export default function Header() {

  const [session] = useSession();

    const handleSignin = (e) => {
      e.preventDefault()
      signIn()
  }
    const handleSignout = (e) => {
      e.preventDefault()
      signOut()
    }
  return (
    <div className='header'>
      <Link href='/'>
        <a className='logo'>NextAuth.js</a>
      </Link>
           {session && <a href="#" onClick={handleSignout} className="btn-signin">Sign out</a>  } 
           {!session && <a href="#" onClick={handleSignin}  className="btn-signin">Sign in</a>  } 
    </div>
  )
}

随时使用标题按钮登录和退出应用程序。

检索并显示用户信息

现在, 到我们的pages / index.js。我们需要根据用户的登录详细信息来显示并有条件地呈现用户的详细信息。首先, 我们必须导入useSession钩从下次验证在我们的node_modules文件夹中。

因此, 更换你的index.js具有以下内容:

import Head from 'next/head'
import Header from '../components/Header'
import styles from '../styles/Home.module.css'
import { useSession } from 'next-auth/client'

export default function Home() {

  const [session, loading] = useSession();

  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs | Next-Auth</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <main className={styles.main}>
        <h1 className={styles.title}>Authentication in Next.js app using Next-Auth</h1>
        <div className={styles.user}>
          {loading && <div className={styles.title}>Loading...</div>}
          {session && <> <p style={{ marginBottom: '10px' }}> Welcome, {session.user.name ?? session.user.email}</p> <br />
            <img src={session.user.image} alt="" className={styles.avatar} />
          </>}
          {!session &&
            <>
              <p className={styles.title}>Please Sign in</p>
              <img src="https://cdn.dribbble.com/users/759083/screenshots/6915953/2.gif" alt="如何在Next.js中使用NextAuth.js进行客户端身份验证" alt="" className={styles.avatar} />
        <p className={styles.credit}>GIF by <a href="https://dribbble.com/shots/6915953-Another-man-down/attachments/6915953-Another-man-down?mode=media">Another man</a> </p>            
</>
          }
        </div>
      </main>
    </div>
  )
}

上方, 如果有用户登录到我们的应用中, 我们将有条件地使用从会话状态中获取的数据来渲染用户的图像, 名称和照片。如果没有, 我们将显示一个虚拟的GIF, 并带有指示其登录的文字。

创建一个Google OAuth应用

为了允许用户使用其Google帐户登录我们的应用, 我们必须从以下网址获取OAuth 2.0客户端凭据:Google API控制台。导航至凭据, 然后单击"创建凭据", 然后单击" OAuth客户端ID":

创建Google Oauth客户端ID

你将被要求填写以下内容:

名称:这是你的应用程序的名称。它可以被称为任何东西。

URIs:这是我们应用程序首页的完整URL。由于我们仍处于开发模式, 因此我们将填写运行我们的开发服务器的完整URL。就我而言http://本地主机:3000.

授权回调网址:用户在通过Google身份验证后将被重定向到以下路径:http:// localhost:3000 / api / auth / callback / google

在编码时, 将弹出一个显示你的客户端ID和客户端密码的弹出窗口。复制它们并添加到你的本地环境文件:

GOOGLE_ID=<cilent id of your google auth app should go in here>
GOOGLE_SECRET=<cilent secret of your google auth app should go in here>

接下来, 导航至pages / api / auth / [... nextauth] .js并将以下内容添加到你的提供商列表中:

Providers.Google({
      clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET, }), 

你的[... nextauth] .js现在应该看起来像这样:

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
const options = {
    providers: [
        Providers.GitHub({
            clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET
        }), Providers.Google({
            clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET, }), ], }
export default (req, res) => NextAuth(req, res, options)

要测试使用Google帐户登录的用户, 请退出开发服务器并运行npm run dev.

现在, 在我们的手指交叉且头顶高昂的情况下, 我们应该能够使用我们的Google帐户登录我们的应用程序:

使用Google激活登录

创建Facebook OAuth应用

要使用我们的应用程序的Facebook登录名, 我们需要一个Facebook开发者帐户。创建一个帐户, 然后寄存器你的应用并相应地填写表格。当系统询问你为应用选择平台时, 请选择网路.

完成后, 它应该出现在屏幕上:

登录选项

单击" Facebook登录"并选择网站。相应地添加以下内容

网站网址:开发服务器的完整URLhttp://本地主机:3000 /

要获取你的App ID和App Secret, 请导航至"设置"中的"基本", 将其复制并添加到你的本地环境文件如下:

FACEBOOK_ID=<app id of your facebook app should go in here>
FACEBOOK_SECRET=<app secret of your facebook app should go in here>

不要忘记在"应用程序域"字段中添加http:// localhost:3000 /

接下来, 导航至pages / api / auth / [... nextauth] .js并将以下内容添加到你的提供商列表中:

Providers.Facebook({
            clientId: process.env.FACEBOOK_ID, clientSecret: process.env.FACEBOOK_SECRET
      })

你的[... nextauth] .js现在应该看起来像这样:

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
const options = {
    providers: [
        Providers.GitHub({
            clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET
        }), Providers.Google({
            clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET, }), Providers.Facebook({
            clientId: process.env.FACEBOOK_ID, clientSecret: process.env.FACEBOOK_SECRET
        })
    ], }
export default (req, res) => NextAuth(req, res, options)

重新启动开发服务器, 用户应该能够使用其GitHub, Google和Facebook帐户登录Next.js应用程序:

使用Facebook登录已激活

总结

在本文中, 我们使用NextAuth.js在Next.js中实现了用户身份验证, 这是一个安全的库, 用于标识我们的用户, 获取用户个人资料信息并将其呈现在前端。

我们已经介绍了大多数用例, 但是NextAuth.js可以做很多事情。你可以使用JSON Web令牌, 安全页面等添加数据库。

如果你渴望获得更多内容, 请查看教程页面来自NextAuth.js官方文档。

在下面的评论部分中让我知道你对本教程的看法。我社交推特和的GitHub。感谢你的阅读和关注。

日志火箭:全面了解生产Next.js应用程序

调试Next应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪状态, 自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间,

尝试notlogy

.

如何在Next.js中使用NextAuth.js进行客户端身份验证2
LogRocket仪表板免费试用横幅

日志火箭就像Web应用程序的DVR, 实际上记录了Next应用程序中发生的所有事情。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 并使用客户端CPU负载, 客户端内存使用情况等指标进行报告。

notlogy Redux中间件软件包在你的用户会话中增加了一层可见性。 notlogy记录Redux存储中的所有操作和状态。

现代化调试Next.js应用程序的方式—免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: