使用 Netlify Identity 进行 Next.js 身份验证
介绍
Next.js 是一个基于 Node.js 的开源开发框架，它支持基于 React 的 Web 应用程序功能，例如服务器端渲染和生成静态网站。
在本指南中，我将向您展示如何使用 Netlify Identity 为您的 Next.js 应用程序添加身份验证。
先决条件
Next.js 基础知识
React 中的上下文
1. Next.js 应用
首先，创建/选择一个要添加身份验证的应用。将该应用部署到 Netlify，以便使用 Netlify Identity，这是 Netlify 提供的一项服务，用于为您的应用添加身份验证。
如果你还没有安装应用，可以下载启动代码。
npx create-next-app [your_project_name] -e https://github.com/bhagatpratik07/next-js-auth-blog/tree/blog
注意：运行命令前请更改应用程序名称。
在终端中运行上述命令。您将获得一个简单的 Next.js 应用程序，其中包含首页和关于页面。我们将为该应用程序添加身份验证功能。
在我们的应用程序中安装 Netlify Identity
Netlify Identity 是 Netlify 提供的一项服务，用于为我们的应用程序添加身份验证功能。
在编写代码之前，我们需要在应用程序中安装 Netlify Identity。
npm install netlify-identity-widget
在终端中运行上述命令以安装 Netlify Identity。
部署到 Netlify
现在您已经下载了初始代码，接下来需要将其部署到 Netlify。请访问https://www.netlify.com/并部署您的网站。部署完成后，您应该会看到类似这样的内容：
接下来，点击导航栏中的“身份”，然后点击“启用身份”。现在，Netlify Identity 已在我们的应用中启用。
让我们开始吧
在应用程序根目录下创建一个名为 contexts 的新目录，并在该目录下创建一个名为 authContext.js 的新文件。文件结构应如下所示：
编写我们的身份验证上下文
将以下代码添加到我们的 AuthContext 中。
import { createContext} from "react";
export const AuthContext = createContext({
user: null,
login: () => {},
logout: () => {},
authReady: false,
});
const AuthContextProvider = ({ children }) => {
return <AuthContext.Provider>{children}</AuthContext.Provider>;
};
export default AuthContextProvider;
首先，我们创建 AuthContext 并为其设置默认值，例如将 user 初始设置为 null。我们提供了默认的登录和注销函数。我们还有一个 authReady 状态，它是一个布尔值，用于跟踪何时已与 Netlify Identity 建立连接。之所以需要 authReady 状态，是因为当我们的应用在浏览器中运行时，它无法确定用户是否已登录。
在与 Netlify 建立连接之前，authReady 将为 false；当与 Netlify 建立连接后，它将被设置为 true。
另外，请注意，我们需要将应用（pages/_app.js）包裹在上下文中，因为我们需要在整个应用中访问上下文。NavBar 和 Component 现在都是上下文的子组件。
// pages/_app.js
import NavBar from "../components/NavBar";
import AuthContextProvider from "../contexts/authContext";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<AuthContextProvider>
<NavBar />
<Component {...pageProps} />
</AuthContextProvider>
);
}
export default MyApp;
请相应地更新 pages/_app.js 文件。
建立与 Netlify Identity 的连接
为了与 Netlify Identity 建立连接，我们将使用 React 中的 useEffect hook。
// contexts/authContext
import { createContext, useState, useEffect } from "react";
import { netlifyIdentity } from "netlify-identity-widget";
export const AuthContext = createContext({
user: null,
login: () => {},
logout: () => {},
authReady: false,
});
const AuthContextProvider = ({ children }) => {
useEffect(() => {
netlifyIdentity.init();
}, []);
return <AuthContext.Provider>{children}</AuthContext.Provider>;
};
export default AuthContextProvider;
我们导入 netlifyIdentity，然后在 useEffect hook 中只需添加 netlifyIdentity.init() 即可。这样做会初始化与 netlify identity 的连接。
为我们的应用程序创造价值
接下来，我们需要为我们的应用程序提供登录、注销和用户值。
import { createContext, useState, useEffect } from "react";
import netlifyIdentity from "netlify-identity-widget";
export const AuthContext = createContext({
user: null,
login: () => {},
logout: () => {},
authReady: false,
});
const AuthContextProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
// on login
netlifyIdentity.on("login", (user) => {
setUser(user);
netlifyIdentity.close();
});
// on logout
netlifyIdentity.on("logout", (user) => {
setUser(null);
});
// connect with Netlify Identity
netlifyIdentity.init();
}, []);
const login = () => {
netlifyIdentity.open();
};
const logout = () => {
netlifyIdentity.logout();
};
const context = {
login,
logout,
user,
};
return (
<AuthContext.Provider value={context}>
{children}
</AuthContext.Provider>
);
};
export default AuthContextProvider;
代码量很大……让我解释一下
1.登录
我们创建了一个登录函数，其中只使用了 Netlify Identity 的内置函数 open()。它的作用是打开一个登录/注册表单。我们将把它用作登录按钮的回调函数。
2.注销
注销功能与登录功能相同，但我们使用 logout()，这是一个内置的 netlify 函数来注销用户。
此外，我们更新了 useEffect，并添加了登录和注销操作的事件监听器。
登录时，用户将从 null 设置为该用户，然后我们关闭表单。
注销时，我们将用户设置为 null。
我们提供所有这些信息都是为了向我们的应用程序提供背景信息。
创建登录/注销按钮
现在是时候更新导航栏了。在代码编辑器中打开 components/navbar 文件。
// components/navbar
import styles from "../styles/Home.module.css";
import Link from "next/link";
import { useContext } from "react";
import { AuthContext } from "../contexts/authContext";
const NavBar = () => {
const { user, login, logout } = useContext(AuthContext);
return (
<nav className={styles.nav}>
<Link href="/">
<a>Home</a>
</Link>
<Link href="/about">
<a>About</a>
</Link>
<li>{!user && <button onClick={login}>Login/Signup</button>}</li>
<li>{user && <button onClick={logout}>Logout</button>}</li>
</nav>
);
};
export default NavBar;
首先，我们使用 useContext 钩子从上下文中访问登录、注销、用户值。
然后我们创建一个登录按钮，点击该按钮会触发我们在上下文中创建的登录函数。注销按钮也一样。
我们根据用户是否登录来有条件地渲染按钮。
现在点击登录按钮，大功告成。
它会要求你输入网站 URL。你只需输入你在 Netlify 上部署的网站 URL 即可。
您还可以添加外部提供商，例如 Google 和 GitHub，作为登录选项。为此，请返回 Netlify，然后转到“站点设置”->“身份”（位于侧边栏），并在“外部提供商”中选择您要包含的选项。
结论
首先，我们创建了 authContext，以便为我们的应用程序全局提供用户值。我们在 authContext 中添加了用户和登录、注销函数（Netlify Identity 内置函数），并将它们用作登录和注销按钮的回调函数。