Next-Auth 是Next.Js应用的完整开源认证。您可以在此处了解更多信息。

在本博客教程中,我将向您展示如何在 NextJs 项目中使用NextAuth.js添加 Google 身份验证。在这个特定的教程中,我使用的是Typescript,但你可以按照它来学习Javascript。

安装

您可以使用 yarn 或 npm 安装它。

yarn add next-auth

npm install next-auth

添加api路由

要在您的项目中添加 NextAuth.js,您需要首先在您的pages/api/auth中创建[...nextauth].ts。

// pages/api/auth/[...nextauth].ts

import NextAuth, { NextAuthOptions } from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export const authOptions: NextAuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID, // 'Your Google Client ID'
            clientSecret: process.env.GOOGLE_CLIENT_SECRET, //  'Your Google Client SECRET'
        }),
        // you can add more providers here
    ],
}

export default NextAuth(authOptions)

从 Google Cloud 获取您的密钥

点击这里并设置你的应用程序

第 1 步:使用您想要的任何名称创建一个项目。第 2 步:转到凭据选项卡第 3 步:创建凭据第 4 步:选择 OAuth 客户端 ID 选项第 5 步:填写一些详细信息以获取您的 google 客户端 ID 和机密

第 6 步:按下创建按钮后,您将获得 google 客户端 ID 和 google 客户端密码。将这些凭据保存在您的电脑中。

设置环境变量

在根目录中创建一个.env.local文件。

GOOGLE_CLIENT_ID="Paste your google client ID here"
GOOGLE_CLIENT_SECRET="Paste you google client secret here"

在我们的应用程序中设置 OAuth

为了能够在您的应用程序中使用useSession,您首先需要将顶级组件包装在来自next-auth/react的<SessionProvider></SessionProvider>中

// _app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'

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

export default MyApp

现在我们可以走了。

在我们的应用程序中使用 Google 身份验证

要使用认证,我们需要从next-auth/react中导入一些函数

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

现在,在我们的组件中,我们可以使用useSession、signin和signout函数

export const MyComponent = () => {
  const { data: session } = useSession()

    //... Your code

    return (
        <>
            {/* Your Code */}

            {session ? (
                    <>
                        <h2>
                            Signed in as {session.user.email}
                        </h2>
                        <button    onClick={() => signOut()}>
                            Sign out
                        </button>
                    </>
                ) : (
                    <button onClick={() => signIn()}>
                        Login With Google
                    </button>
                )}


            {/* Your Code */}
        </>
    )
}

恭喜🎉🎉🎉

您已成功将 NextAuth.js 添加到您的项目中以进行 Google 身份验证。

完整源代码

你可以在 GitHub 上看到完整的代码 -链接

感谢您阅读我的文章。

如有任何疑问,您可以通过Twitter或LinkedIn直接与我联系