js代码 demo Js代码怎么加入授权

转载

网猴儿 2024-04-30 07:00:47

文章标签 js代码 demo javascript 前端开发语言应用程序 文章分类 机器学习人工智能

本教程的重点是帮助开发人员学习如何将用户授权的职责委托给其他一些服务，例如 GitHub 或 Google，而不是在他们的应用程序中管理它们。

我们将涵盖：

Next.js 中的身份验证与授权
在 Next.js 中介绍我们的用户授权项目
创建 Next.js 应用
创建 GitHub OAuth 应用程序
将 API 密钥添加到环境变量
安装 NextAuth.js 并配置 GitHub 提供程序
访问用户会话 <SessionProvider>
检查用户登录状态 useSession()
检索和显示用户信息
获取其他范围数据

Next.js 中的身份验证与授权

身份验证是验证用户是他们声称的身份的行为。用户名和密码是最常见的身份验证因素。

在对用户进行身份验证时，如果用户输入了正确的数据，服务器将假定该身份是有效的，并授予用户访问服务器资源的权限。

另一方面，安全系统中的授权是授予用户访问服务器上特定资源或功能的权限的过程。该术语通常与访问控制或客户端特权互换使用。

通常，身份验证先于授权；用户应该首先证明他们的身份是真实的，然后后端管理员才授予他们访问所请求资源的权限。

在 Next.js 中介绍我们的用户授权项目

OAuth2.0 是一种行业标准的授权协议，使互联网用户能够与第三方网站和应用程序共享其帐户信息，而无需提供其帐户凭据。

本指南使用 NextAuth.js 库在 Next.js 应用程序中实现用户授权 (OAuth2.0)。

NextAuth.js 是用于 Next.js 的成熟的身份验证和授权解决方案，旨在与任何 OAuth 服务一起使用。它内置了对许多流行登录服务的支持，包括 Google 和 GitHub。

要学习本教程，您需要 Node.js 12.0 或更高版本以及 React 的基本知识。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

创建 Next.js 应用

让我们从创建一个新的 Next.js 项目开始。

以下命令分别展示了如何使用 npm、Yarn 和 pnpm 创建新的 Next.js 项目。打开终端并运行其中一个：

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

CLI 将提示您为新项目提供名称。在命令提示符中键入您的首选名称，然后单击 enter在键盘上完成安装。

安装完成后，运行以下命令在本地机器上启动开发服务器：

npm run dev
# or 
yarn dev 
# or 
pnpm dev

默认情况下，这应该在端口 3000 处启动您的开发服务器。启动您的网络浏览器并导航到 http://localhost:3000 。您应该会看到 Next.js 起始页，如下所示。

接下来，您将在 GitHub 上创建一个新的 OAuth 应用程序，以使用 OAuth 注册您的应用程序。

创建 GitHub OAuth 应用程序

我们希望用户使用他们的 GitHub 帐户登录并授权我们的应用程序从他们的帐户访问某些信息。

为此，我们需要首先创建一个新的 GitHub OAuth App 。单击“新 OAuth 应用程序”并使用您的网站信息相应地填写表格。以下是有关表格要求的信息的一些重要事项：

在“应用程序名称”字段中，输入您的应用程序的名称（例如，“我的应用程序”）
在“主页 URL”字段中，输入您网站主页的完整 URL

由于我们处于开发模式，因此它是： http://localhost:3000

在“授权回调 URL”字段中，输入您的应用的回调 URL

授权回调 URL 是您希望 GitHub 在用户授权您的应用后重定向到的 URL。它应该是您的主页网址加上 /api/auth/callback.

在这种情况下，完整的 URL 应该是 http://localhost:3000/api/auth/callback.

其他领域并不重要。因此，它们可以留空。

为下一步保留两个密钥。

将 API 密钥添加到环境变量

Next.js 内置了对环境变量的支持。要在您的项目中使用它们，请创建一个名为 .env.local在项目目录的根目录中：

来自 LogRocket 的更多精彩文章：

不要错过 The Replay 来自 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 优化应用程序的性能
之间切换在多个 Node 版本
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri ，一个用于构建二进制文件的新框架
比较 NestJS 与 Express.js

touch .env

打开 .env.local并添加以下内容：

GITHUB_ID=<your-client-id>
GITHUB_SECRET=<your-client-secret>
NEXTAUTH_URL=http://localhost:3000

将上述模板替换为您在 GitHub 中的实际值。

安装 NextAuth.js 并配置 GitHub 提供程序

现在您已经在 GitHub 上创建了 OAuth 应用程序，是时候设置前端应用程序了。

首先，通过运行以下命令安装 NextAuth.js：

npm install next-auth --save

安装库后，您现在必须创建一个名为 [...nextauth].js在 pages/api/auth. 此文件将包含您要在应用程序中使用的所有提供程序。每个提供程序都将使用凭据进行配置，以便应用程序成功连接到我们的 OAuth 身份提供程序。

由于我们在 GitHub 上注册，因此我们将仅使用 GitHub 提供程序。在新建的添加如下代码 [...nextauth].js文件：

import NextAuth from 'next-auth'
import GitHubProvider from "next-auth/providers/github";

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

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

首先，我们导入 NextAuth和 GitHubProvider. 然后我们配置 GitHubProvider跟我们 GITHUB_ID和 GITHUB_SECRET环境变量，检索自 process.env.

最后一行导出一个函数，该函数返回 NextAuth并采取 options变量作为第三个参数。

这就是我们将应用程序与 GitHub 连接所需的全部内容！

要查看此效果，请使用以下命令运行您的开发服务器 npm run dev. 使用 next-auth 提供的 REST API，您可以使用您的 GitHub 帐户登录应用程序。导航到 http://localhost:3000/api/auth/signin ，您应该会看到以下内容：

单击按钮，您将被引导到 GitHub 同意页面，告诉您授权该应用程序。如果这样做，您将使用 GitHub 登录。但是，应用程序不会反映您已登录，因为我们尚未在应用程序中获取用户会话数据。让我们接下来解决这个问题！

访问用户会话 <SessionProvider>

当用户授权我们的应用程序时，您需要通过在我们的应用程序前端呈现用户详细信息来向用户显示他们已登录。为了让这一切正常工作，我们必须首先用 <SessionProvider>.

创建一个 _app.js在您的页面目录中的文件（如果它不存在）并添加以下代码：

import { SessionProvider } from "next-auth/react"
import '../styles/globals.css'

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

export default MyApp

使用此代码，应用程序中的所有页面都可以访问用户会话，并且此会话将在站点导航期间保留。该会话还将与 OAuth 提供者共享。这样一来，应用程序就不会在用户每次访问该站点时重新进行身份验证。

检查用户登录状态 useSession()

这 useSession()hook 允许我们检查用户的登录状态并检索用户的会话信息。我们将使用这个钩子 signIn和 signOut实施一个 <Header>检查用户是否通过身份验证并呈现“登录”或“退出”链接的组件。

打开 components/Header.js文件和导入 useSession, signIn，和 signOut来自 NextAuth.js 客户端库：

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

signIn和 signOut将用于登录和退出我们的应用程序的用户。我们需要创建 handleSignin和 handleSignout触发这两个功能的方法：

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

接下来，让我们检索用户的会话数据：

const { data: session } = useSession();

一旦检索到数据，就可以在页面上向用户显示或使用 JavaScript 对其进行操作。让我们使用返回的详细信息有条件地呈现登录和注销按钮。

Replace everything in the return statement in components/Header.js with the following code:
 
<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>

您的 Header.js文件现在应该如下所示：

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

export default function Header() {  
    const handleSignin = (e) => {
        e.preventDefault()
        signIn()
    }

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

    const { data: session } = useSession();

    return (
      <div className='header'>
        <Link href='/'>
          <a className='logo'>AppLogo</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文件中，我们需要根据用户的身份验证状态显示和有条件地呈现用户详细信息。

如果用户已登录，我们将使用会话状态中的数据呈现他们的个人资料图像、姓名和照片。用户将被授权查看或与所有应用程序页面交互，以及注销。

如果用户未登录，我们将呈现一个虚拟的用户个人资料图像和文本，指示他们登录并授权应用访问他们的 GitHub 个人资料信息。用户将无权查看应用程序的任何其他部分或与之交互。

为此，请更换您的 index.js文件内容如下：

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

export default function Home() {
  const { data: session, status } = useSession()
  const loading = status === "loading"

  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs | Next-Auth</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <main className={styles.main}>        
        <div className={styles.user}>
           {loading && <div className={styles.title}>Loading...</div>}
           {
            session &&
              <>
                <h1 className={styles.title}>Welcome, {session.user.name ?? session.user.email}!</h1>
               <p style={{ marginBottom: '10px' }}> </p> <br />
               <img src={session.user.image} alt="" className={styles.avatar} />
              </>
            }
           {
            !session &&
              <>
               <p className={styles.title}>Please log in to continue</p>
               <img src="no-user.jpg" alt="" className={styles.avatar} />               
              </>
           }
         </div>
      </main>
    </div>
  )
}

这是我退出时的页面：

这是我使用 GitHub 帐户登录时的页面：

猫影视TV电视盒子，付费电影电视剧免费看，100多个内置接口任意看！

随意在 GitHub 上获取完整的源代码！

获取其他范围数据

请注意，GitHub OAuth 提供程序的默认范围是 read:users，它授权您的应用程序读取用户的个人资料数据，例如姓名、电子邮件和个人资料图片。

为了从默认范围以外的范围获取数据，您需要在 Provider 的配置对象中定义范围 pages/api/auth/[...nextauth].js目录。

例如，让我们通过添加 authorization.params.scope财产 GitHubProvider:

// imports

const options = {
    providers: [
        GitHubProvider({
            clientId: process.env.GITHUB_ID,
            clientSecret: process.env.GITHUB_SECRET,
            // add this:                     
            authorization: { params: { scope: 'notifications' } },
        }),
    ],
}

// export

在浏览器上导航到 http://localhost:3000 并尝试使用相同的 GitHub 帐户登录。你应该得到以下。

查看可用 GitHub OAuth 范围的完整列表。

要了解有关 NextAuth.js 的更多信息，包括如何使用回调、 JWT 令牌、事件和其他高级配置选项，请随时阅读 NextAuth.js 文档。