使用 React Context、Hooks 和 Suspense 在 5 分钟内将 Netlify Identity Authentication 添加到任何 React App

💁🏼‍♂️ 底线在前：以下是我们将在本文中看到的身份小部件的演示，尽管您可以自由编写自己的身份验证UI！
💁🏼‍♂️ 如果您想跳过解释，直接快速入门，请跳至下面的React Netlify Identity Widget部分！

添加身份验证是许多 React 初学者的痛点。我们create-react-app通过一个简单的 React Hook 将 Netlify Identity 封装到任何 React 应用（包括 Gatsby、Next.js 或您可能拥有的任何其他设置）中，使其变得异常简单！然而，本文更侧重于在 React 应用中引入身份验证的有效设计模式，任何读者都应该能够为自己喜欢的身份验证提供程序编写类似的封装器。

不过，为了便于示例，我们将使用Netlify Identity。这是 Netlify 提供的一项非常简单的身份验证服务，并提供免费套餐。您可以将其用于门控内容、站点管理、身份验证功能等。用户主要通过3kb 的 JS 客户端GoTrue-JS访问此功能，该客户端用于访问 Netlify Identity。由于它只是一个开源 API（您可以自行托管），因此您无需在 Netlify 上托管您的应用，甚至无需拥有JAMstack 应用即可使用它。

Hooks 和 Contextreact-netlify-identity

对于 React 用户，我们最近将所有功能打包GoTrue-JS成一个非常易于使用的 React Hook。这使得 Netlify Identity 成为大多数 React 应用的嵌入式身份验证解决方案，使用起来更加便捷。

假设您有一个现有的 Netlify 站点实例（如果没有，您可以点击此处进行设置）并且已在其上启用 Netlify Identity，您可以通过安装来开始：

    npm i react-netlify-identity

该库内部有一个IdentityContext，但你无需手动操作。只需将其IdentityContextProvider包裹在应用程序的根目录即可：

import React from "react"
import { IdentityContextProvider } from "react-netlify-identity"
function App() {
  const url = "https://your-identity-instance.netlify.com/" // supply the url of your Netlify site instance with Identity enabled. VERY IMPORTANT
  return <IdentityContextProvider url={url}>{/* rest of your app */}</IdentityContextProvider>
}

这就是您需要的所有设置！

现在，您可以在应用程序的任何位置使用公开的身份方法（它们记录在README中，但由于该库是用 TypeScript 编写的，因此您也可以获得自动完成提示）：

import { useIdentityContext } from "react-netlify-identity"

// log in/sign up example
function Login() {
  const { loginUser, signupUser } = useIdentityContext()
  const formRef = React.useRef()
  const signup = () => {
    const email = formRef.current.email.value
    const password = formRef.current.password.value
    signupUser(email, password)
      .then((user) => console.log("Success! Signed up", user))
      .catch((err) => console.error(err))
  }
  // write similar logic for loginUser
  // return a form attached to formRef, with email and password fields
}

通常情况下，我会向您指出一个带有源代码的工作演示，然后让您“继续编写经过身份验证的应用程序”，但即使这样，工作量也太大了，尤其是对于“快速简便”的演示而言。

当我们说 5 分钟时，我们的意思就是 5 分钟。

侧边栏：这是一个钩子还是一个上下文？

如果你正眯着眼睛useIdentityContext琢磨那是什么，你并不孤单。如果它是一个 Context，为什么不导出一个IdentityContext以便用户调用？如果它是一个 Hook，为什么一开始useContext(IdentityContext)需要在应用程序根目录下包装一个？IdentityContextProvider

简短的回答：两者都是。

react-netlify-identity导出一个自定义提供程序和一个自定义消费者钩子，这是 Kent C Dodds 推广的一种模式。自定义提供程序允许我们初始化一次所需信息（Netlify Identity 实例），而自定义消费者钩子允许我们处理空值检查的具体细节，并允许我们为 TypeScript 用户优化类型。

React.lazy 和 Suspensereact-netlify-identity-widget

虽然react-netlify-identity它导出了可复用的身份验证行为，但它对你的身份验证 UI 没有任何意见。这会降低你的工作效率，让你忙于设计理想的身份验证 UI，同时又无法从核心应用或网站上获得你真正想要展示的真实用户的反馈。

我们的目标react-netlify-identity-widget是提供一个“足够好”的身份验证 UI，让您能够快速上手，同时提供可自定义的样式，并成为几乎任何应用的嵌入式解决方案。要成为嵌入式解决方案，最好的 UI 范例是使用模态窗口，但这本身就存在可访问性问题，因此我们依靠优秀的Reach UI项目来提供可访问的组件。

要开始，请安装：

    ## this re-exports react-netlify-identity, no separate install needed
    npm i react-netlify-identity-widget
    ## peer dependencies, if you don't already have them
    npm i @reach/dialog @reach/tabs @reach/visually-hidden

要使用此小部件，请按照上述步骤进行设置IdentityContextProvider：

import { useIdentityContext, IdentityContextProvider } from "react-netlify-identity-widget"

function App() {
  const url = "https://your-identity-instance.netlify.com/"
  return <IdentityContextProvider value={url}>{/** rest of your app **/}</IdentityContextProvider>
}
export default App

您唯一需要做的新事情是渲染 Modal 小部件（它是库的默认导出），以及（可选）导入 CSS（如果您不想自己编写）。它是一个受控组件，因此您只需传递一个布尔值来showDialog指示它是打开还是关闭（以及给它一个onCloseDialog回调来关闭它）：

import "react-netlify-identity-widget/styles.css"
// code split the modal til you need it!
const IdentityModal = React.lazy(() => import("react-netlify-identity-widget"))

function Main() {
  const identity = useIdentityContext()
  const [dialog, setDialog] = React.useState(false)
  const isLoggedIn = identity && identity.isLoggedIn
  return (
    <div className="App">
      <button className="btn" onClick={() => setDialog(isLoggedIn)}>
        {isLoggedIn ? "LOG OUT" : "LOG IN"}
      </button>
      <React.Suspense fallback="loading...">
        <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
      </React.Suspense>
    </div>
  )
}

那个React.lazy函数和React.Suspense组件是什么？这些是React 中相对较新的功能，它通过声明式地实现代码拆分。这样，即使最小加载 + gzipreact-netlify-identity-widget压缩后只有6kb ，用户在尝试登录之前也无需承担不必要的 JS 导入成本，从而显著提升应用的加载速度。

运行您的应用程序（此处为示例），单击您的登录按钮，然后获取此模式：

该小部件有助于融入您需要考虑的一系列身份验证 UI 标准（或避免为您的 MVP 实现）：

• 登录
• 报名
• 登出
• 电子邮件确认
• 使用 Google/GitHub/GitLab/Bitbucket 进行外部提供商身份验证
• （待定）密码恢复

更重要的是，它让您无需在现有应用上添加身份验证 UI，只需付出极低的成本即可完成所有决策。要在您的应用中的任何地方（例如，用于受保护的路由或获取规范用户 ID）检查身份验证信息，您只需useIdentityContext像以前一样调用即可。

结论

虽然本文使用 Netlify Identity 作为其身份验证提供程序，但我们描述的设计模式也适用于任何其他提供程序，例如 Auth0、Okta 或您自己开发的提供程序。我们认为，这些是结合 React 最佳新功能的绝佳用例，旨在为开发者带来卓越的身份验证体验。身份验证传统上是一项耗时且功能单一的功能，添加并做好这项工作至关重要。未来，此库可能会发展为支持多种身份验证提供程序适配器——如果您有兴趣合作开发一个适用于 React 中所有身份验证的统一 API，欢迎联系我们！