随着现代聊天应用程序的发展,实时通信需要越来越精细的访问控制。实时管理各种聊天室和参与者的动态权限,尤其是在复杂或多用户环境中,很快就会变得具有挑战性。如果您可以轻松地为您的聊天应用程序实现细粒度授权而不影响性能,结果会怎样?
Permit.io 使将强大的实时访问控制集成到您的聊天应用程序中变得简单。通过将 Permit.io 的高级授权模型与 WebSocket 配对,您可以确保正确的用户在正确的时间进行访问,同时保持聊天应用程序所需的响应能力。
在本教程中,您将学习如何使用 Permit.io 在基于 WebSocket 的聊天应用程序中实现实时授权。最后,您将了解如何动态实施基于角色和基于属性的访问控制,保护不同的聊天室、消息可见性和实时交互。
我们都以某种形式使用聊天应用程序来与朋友和家人保持联系,与同事讨论重要事务,甚至开展业务。随着对无缝、实时通信的需求不断增长,人们很容易认为保护这些交互的复杂安全措施是理所当然的。然而,随着聊天应用程序变得越来越复杂,保护用户数据和对话的挑战也越来越大。细粒度的访问控制有助于确保只有授权用户才能访问敏感信息和操作。
细粒度的访问控制对于实时聊天应用程序至关重要,以确保安全性、用户定制和法规遵从性。
通过设置强大的身份验证方法和基于角色的权限,聊天应用程序可以防止未经授权的用户访问敏感对话,并允许管理员有效地管理用户交互。这种方法还可以根据个人角色或偏好参与各种聊天类型(公共、私人或群组),从而增强用户体验,从而创建更具吸引力的交互。
此外,细粒度的访问控制可以帮助组织满足严格的数据隐私法规(例如 GDPR),保护机密数据并最大程度地降低法律风险。
这些要点涵盖了段落中的所有主要思想。这是包含所有细节的精致版本:
Permit.io 的授权解决方案可以显着简化聊天应用程序中实时授权的实现,特别是与 WebSocket 集成时。以下概述了这种组合如何增强动态访问控制:
对于我们基于 Web 套接字的应用程序,我们将使用 Next.js 和 Ably,该服务使我们能够轻松集成和管理由 Web 套接字支持的应用程序中的实时功能。
除了 Ably 和 Next Auth 之外,我们还可以使用 Firebase 之类的东西来处理身份验证和实时功能。 Permit.io 博客上有关于此内容的完整教程。
话不多说,我们继续吧!
运行以下命令并按照提示操作:
npx create-next-app@latest live-chat Need to install the following packages: create-next-app@15.1.0 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 371 packages, and audited 372 packages in 1m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat
导航到新创建的项目文件夹并安装一些我们将用于构建应用程序的软件包:
npx create-next-app@latest live-chat Need to install the following packages: create-next-app@15.1.0 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 371 packages, and audited 372 packages in 1m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat
此外,从 Radix UI 安装一些 UI 组件:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
在项目根目录下创建一个新文件 - .prettierrc 并输入以下内容:
npm install @radix-ui/react-scroll-area
在 tailwind.config.ts 文件中,输入以下内容:
{ "plugins": ["prettier-plugin-tailwindcss"] }
// ./tailwind.config.ts import type { Config } from "tailwindcss"; import tailwindForms from "@tailwindcss/forms"; export default { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", }, }, }, plugins: [tailwindForms], } satisfies Config;
在 ./app/globals.css 文件中,输入以下内容:
In the `./next.config.ts`, enter the following: // ./next.config.ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ images: { remotePatterns: [ { protocol: "https", hostname: "lh3.googleusercontent.com", }, { protocol: "https", hostname: "www.tapback.co", }, ], }, }; export default nextConfig;
我们将使用 Auth.js,一个最初为 Next.js 构建的身份验证库。
运行以下命令来安装软件包:
/* ./app/globals.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-300; } } @layer components { .btn { @apply inline-flex items-center justify-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900; } .btn:has(> .icon:first-child) { @apply pl-2; } .btn:has(> .icon:last-child) { @apply pr-2; } .icon { @apply h-5 w-5 text-current; } .form-input { @apply flex grow rounded-full border border-none bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 outline-none hover:brightness-95 focus:border-none focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900; } .site-section { @apply py-16 md:py-24; } .site-section > .wrapper { @apply mx-auto max-w-5xl px-4 sm:px-6 lg:px-8; } .noscroll { @apply overflow-auto; scrollbar-width: none; } }
我们必须创建一个 AUTH_SECRET 环境变量。该库使用此随机值来加密令牌和电子邮件验证哈希。 (请参阅部署以了解更多信息)。您可以通过运行官方 Auth.js CLI 来生成一个:
npm install next-auth@beta
接下来,创建 Auth.js 配置文件和对象 - ./auth.js:
npx auth secret ? Created /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat/.env.local with `AUTH_SECRET`.
在 ./app/api/auth/[...nextauth]/route.ts 下添加路由处理程序:
// ./auth.ts import NextAuth from "next-auth"; export const { handlers, signIn, signOut, auth } = NextAuth({ providers: [], });
添加可选的中间件以保持会话处于活动状态;这将在每次调用时更新会话过期时间 - ./middleware.ts:
// ./app/api/auth/[...nextauth]/route.ts import { handlers } from "@/auth"; // Referring to the auth.ts we just created export const { GET, POST } = handlers;
NextAuth 支持多个 OAuth 提供商进行身份验证。在本教程中,我们将使用 Google。
要获取我们的 Google 客户端 ID 和密钥,我们必须在 Google Cloud Console 中设置一个新项目 - https://console.cloud.google.com/projectcreate
接下来,在新创建的项目中,我们将设置一个新的同意屏幕:
创建同意屏幕后,我们就可以设置凭据。从侧边栏导航至凭据。
单击 创建凭据 按钮,然后从下拉列表中选择 OAuth 客户端 ID。
在以下屏幕中,选择Web 应用程序, 输入授权的 JavaScript 来源,并重定向 URI:http://localhost:3000 和 http://localhost:3000/api/auth/callback/分别谷歌。
这样我们就应该拥有我们的客户端 ID 和秘密:
复制值并将其输入到 .env 文件中:
npx create-next-app@latest live-chat Need to install the following packages: create-next-app@15.1.0 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 371 packages, and audited 372 packages in 1m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat
接下来,在我们的 Auth.js 配置中启用 Google 作为登录选项。我们必须从包中导入 Google 提供程序,并将其传递给我们之前在 Auth.js 配置文件中设置的提供程序数组:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
让我们为我们的应用程序创建一个包含登录和注销按钮的标头。创建一个新文件 - ./components/Site/Header.tsx:
npm install @radix-ui/react-scroll-area
这里,SiteHeader 组件充当主导航栏。
如果存在用户会话(会话?.用户),则显示用户的头像、姓名和“退出”按钮。
否则,显示“登录”按钮,并且由于我们使用 Next.js 服务器操作,因此我们将其放入表单中。
登录和注销函数包装在服务器操作标记(“使用服务器”)中,以便在 Next.js 中在服务器端执行。
在我们的 ./app/layout.tsx 文件中导入 SiteHeader 组件:
{ "plugins": ["prettier-plugin-tailwindcss"] }
在主页 ./app/page.tsx 中,输入以下内容:
// ./tailwind.config.ts import type { Config } from "tailwindcss"; import tailwindForms from "@tailwindcss/forms"; export default { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", }, }, }, plugins: [tailwindForms], } satisfies Config;
有了这个,我们应该有这样的东西:
现在我们已经设置了身份验证,让我们继续使用 Ably 将 websockets 功能添加到我们的应用程序中。
要开始使用,请注册 Ably,然后使用以下选项创建一个新应用程序:
在下一个屏幕中,复制您的 API 密钥:
将其保存在 .env 文件中:
In the `./next.config.ts`, enter the following: // ./next.config.ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ images: { remotePatterns: [ { protocol: "https", hostname: "lh3.googleusercontent.com", }, { protocol: "https", hostname: "www.tapback.co", }, ], }, }; export default nextConfig;
在我们的应用程序中,安装 Ably React SDK 和 JWT 的 jose 库:
/* ./app/globals.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-300; } } @layer components { .btn { @apply inline-flex items-center justify-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900; } .btn:has(> .icon:first-child) { @apply pl-2; } .btn:has(> .icon:last-child) { @apply pr-2; } .icon { @apply h-5 w-5 text-current; } .form-input { @apply flex grow rounded-full border border-none bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 outline-none hover:brightness-95 focus:border-none focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900; } .site-section { @apply py-16 md:py-24; } .site-section > .wrapper { @apply mx-auto max-w-5xl px-4 sm:px-6 lg:px-8; } .noscroll { @apply overflow-auto; scrollbar-width: none; } }
安装 jose 和 ively 后,创建 ./app/api/ically/route.ts:
npm install next-auth@beta
让我们来分解一下这里发生的事情:
接下来,我们将构建该聊天页面所需的所有组件。我们将从显示用户发送的单条消息的消息项组件开始。
创建一个新文件 - ./components/Message/Item.tsx:
npx create-next-app@latest live-chat Need to install the following packages: create-next-app@15.1.0 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 371 packages, and audited 372 packages in 1m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat
此 MessageItem 组件根据 fromUser 属性动态调整其布局,并使用 flex-row-reverse 进行对齐。
它显示来自 message.data.avatarUrl 的发件人头像。显示消息文本 (message.data.text) 及其时间戳 (message.timestamp),格式为本地化时间字符串。
对于当前用户发送的消息,有条件地显示一个以 SVG 图标呈现的删除按钮,并通过 message.id 触发 onDelete 回调。
创建一个新文件 - ./components/Message/List.tsx:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
MessageList 组件使用 messages.map() 循环呈现可滚动的消息列表,其中每条消息都通过 MessageItem 组件显示。
它通过将会话电子邮件 (session.data.user.email) 与消息的 clientId 进行比较,确定消息是否是由登录用户发送的,并使用 self-end 设计用户消息以实现右对齐。
每个 MessageItem 都会接收其消息和 onDelete 回调。
创建新文件 - ./components/Message/Input.tsx:
npm install @radix-ui/react-scroll-area
MessageInput 组件通过 useState 管理用户输入,并通过 onSubmit 提交消息,提交后重置字段。输入字段 () 显示上下文占位符,并在禁用属性为 true 时禁用。
创建一个新文件 - ./components/Chat/ChannelList.tsx:
npx create-next-app@latest live-chat Need to install the following packages: create-next-app@15.1.0 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 371 packages, and audited 372 packages in 1m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat
ChatChannelList 组件将频道列表呈现为链接。使用基于当前路径名的 font-bold 类突出显示活动通道。
创建一个新文件 - ./components/Chat/index.tsx:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
在这个组件中,我们做了一些事情:
接下来,我们会将所有内容放在聊天页面中。
创建一个新文件 - ./app/chat/[[...channel]]/page.tsx:
npm install @radix-ui/react-scroll-area
页面组件将聊天应用程序包装在提供程序中以进行状态和上下文管理。 SessionProvider 确保对用户会话的全局访问,而 AblyProvider 和 ChannelProvider 通过共享实时客户端(authUrl:“/api/ically”)和当前频道名称(例如 chat:general)来实现与 Ably 的无缝集成。
布局使用包含三个部分的网格:左侧边栏(
有了这个,当我们导航到 http://localhost:3000/chat/general:
时,我们应该有这样的东西现在我们的茶
在 https://www.permit.io/ 创建一个新帐户:
输入您的项目名称,在此示例中我将使用实时聊天:
要为我们的聊天应用程序创建频道,Permit 允许我们创建资源,这些资源是代表用户可以访问的内容的实体,让我们将频道设置为资源以继续:
现在我们可以编辑资源并在频道资源上添加角色:
这是我们创建的角色。您可以前往政策页面上的角色选项卡查看。
现在我们可以更新我们的策略来确定谁有权访问每个资源的哪些内容:
为聊天中我们想要的每个频道创建资源实例,这里我们为常规频道创建一个实例,我们可以为随机和mod.
查看实例
现在我们已经设置了 Permit Dashboard,我们可以将 Permit 添加到我们的 Next.js 应用程序中。
将 Permit.io 添加到您的 Next.js 应用程序
首先,我们必须安装permitio包:
npx create-next-app@latest live-chat Need to install the following packages: create-next-app@15.1.0 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 371 packages, and audited 372 packages in 1m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat
将复制的密钥添加到 .env 文件中:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
从 Docker Hub 拉取 PDP 容器(点击此处安装 Docker):
npm install @radix-ui/react-scroll-area
{ "plugins": ["prettier-plugin-tailwindcss"] }
对于这个例子,我们需要设置一些可重用的函数和路由,让我们从在 ./lib/permit.ts 中创建一个 Permit 库函数开始:
npx create-next-app@latest live-chat Need to install the following packages: create-next-app@15.1.0 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 371 packages, and audited 372 packages in 1m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat
我们还将为所有与许可相关的实用函数创建 ./utils/permit.ts 文件:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
我们必须创建一个 useUser 钩子,这将使我们能够轻松地在前端检索许可用户。创建一个新文件./hooks/useUser.ts:
npm install @radix-ui/react-scroll-area
要在登录期间自动将用户添加到 Permit,请使用 NextAuth 的 signIn 回调。回调期间:
用更新后的代码替换 ./auth.ts 文件:
{ "plugins": ["prettier-plugin-tailwindcss"] }
这可确保用户经过身份验证并无缝集成到 Permit 中以进行访问控制。
如下所示,当用户登录时,他们的帐户将被添加到我们的许可仪表板中:
在继续之前,我们还需要设置一些东西,让我们从类型开始,以便在开发应用程序时安抚 TypeScript。创建一个新的 ./types/user.ts 文件并输入以下内容:
// ./tailwind.config.ts import type { Config } from "tailwindcss"; import tailwindForms from "@tailwindcss/forms"; export default { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", }, }, }, plugins: [tailwindForms], } satisfies Config;
接下来,我们将创建一些 API 路由来获取用户数据和权限以及对用户进行升级和降级。
创建一个新文件 - ./app/api/permit/getUsers/route.ts:
In the `./next.config.ts`, enter the following: // ./next.config.ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ images: { remotePatterns: [ { protocol: "https", hostname: "lh3.googleusercontent.com", }, { protocol: "https", hostname: "www.tapback.co", }, ], }, }; export default nextConfig;
创建一个新文件 *./app/api/permit/getUser/route.ts*:
/* ./app/globals.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-300; } } @layer components { .btn { @apply inline-flex items-center justify-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900; } .btn:has(> .icon:first-child) { @apply pl-2; } .btn:has(> .icon:last-child) { @apply pr-2; } .icon { @apply h-5 w-5 text-current; } .form-input { @apply flex grow rounded-full border border-none bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 outline-none hover:brightness-95 focus:border-none focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900; } .site-section { @apply py-16 md:py-24; } .site-section > .wrapper { @apply mx-auto max-w-5xl px-4 sm:px-6 lg:px-8; } .noscroll { @apply overflow-auto; scrollbar-width: none; } }
创建一个新文件 - ./app/api/permit/promoteUser/route.ts 并输入以下内容:
npm install next-auth@beta
这里有一个 Next.js API 路由,它通过使用 Permit.io 在不同资源实例上为用户分配特定角色来提升用户。
PromotionUser 函数检查当前用户是否有权限推广其他用户,并为指定频道上的目标用户分配“参与者”、“主持人”和“管理员”等角色。
GET 函数处理传入请求、提取查询参数、验证它们、获取资源实例并执行升级过程。如果出现任何问题,它会以 JSON 响应的形式返回结果或错误消息。
创建一个新文件 - ./app/api/permit/demoteUser/route.ts 并输入以下内容:
npx create-next-app@latest live-chat Need to install the following packages: create-next-app@15.1.0 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 371 packages, and audited 372 packages in 1m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat
类似地,我们有一个 Next.js API 路由,它通过使用 Permit.io 取消分配用户在特定资源实例上的角色来降级用户。 demoteUser 函数删除指定频道上用户的“参与者”、“主持人”和“管理员”等角色。 GET 函数处理传入请求、提取查询参数、验证它们、获取资源实例、检索用户分配的角色并执行降级过程。
创建一个新文件 - ./app/api/permit/listResourceInstances/route.ts 并输入以下内容:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
在我们的文件 ./app/api/ously/route.ts 中,将其替换为以下更新的代码:
npm install @radix-ui/react-scroll-area
这里我们合并了Permit.io来管理角色和权限,用基于角色的动态权限替换静态配置。
generatePermissions 函数使用来自 Permit.io 的数据将角色映射到特定通道功能,确保权限与用户角色实时保持一致。这种方法提高了灵活性,并确保系统适应角色或权限的变化,与 Ably 基于 JWT 的身份验证无缝集成。
现在我们已经将资源(通道)添加到了许可仪表板中,我们可以从那里获取它们,而不是对它们进行硬编码。
在 ./components/Chat/ChannelList.tsx 文件中,进行以下更改:
{ "plugins": ["prettier-plugin-tailwindcss"] }
让我们创建一个用户列表组件,用于获取所有许可用户并在用户名旁边显示 升级 或 降级 按钮。
创建一个新文件 - ./components/Chat/UserList.tsx 并输入以下内容:
// ./tailwind.config.ts import type { Config } from "tailwindcss"; import tailwindForms from "@tailwindcss/forms"; export default { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", }, }, }, plugins: [tailwindForms], } satisfies Config;
这里,我们使用自定义钩子 useUser 来获取当前用户的信息,并使用 Ably 的 useChannel 钩子进行实时通道通信。 getUserList 函数使用 Permit.io API 从服务器获取用户列表。该组件订阅 Ably 通道进行实时更新,并在发生升级/降级事件时获取更新的用户列表。用户列表存储在组件的状态中,不包括当前用户。
最后,我们可以将其添加到我们的页面,在 ./app/chat/[[...channel]]/page.tsx 中:
In the `./next.config.ts`, enter the following: // ./next.config.ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ images: { remotePatterns: [ { protocol: "https", hostname: "lh3.googleusercontent.com", }, { protocol: "https", hostname: "www.tapback.co", }, ], }, }; export default nextConfig;
这样我们应该能够实时提升和降级用户:
这是实际降级:
构建具有实时授权的聊天应用程序是一个充满挑战但有益的过程。通过集成 Permit.io 和 WebSockets 等强大的工具,您可以创建无缝体验,确保安全且细粒度的访问控制。在本文中,我们探讨了动态授权在聊天应用程序中的重要性,使用 Ably 建立了基于 WebSocket 的架构,并集成 Permit.io 进行授权管理。
此工作流程展示了现代工具如何简化曾经复杂的实现,使开发人员能够更多地关注用户体验和可扩展性,而不是底层基础设施。通过正确的方法,您可以确保您的聊天应用程序既动态又安全。
基础设置完成后,您可以探索简单和高级的功能,例如:
以上是使用 Permit.io 和 WebSockets 在聊天应用程序中进行实时授权的详细内容。更多信息请关注PHP中文网其他相关文章!