최신 채팅 애플리케이션이 발전함에 따라 실시간 커뮤니케이션에는 점점 더 세분화된 액세스 제어가 필요합니다. 특히 복잡한 환경이나 다중 사용자 환경에서는 다양한 채팅방 및 참가자에 대한 동적 권한을 실시간으로 관리하는 것이 빠르게 어려워질 수 있습니다. 성능 저하 없이 채팅 앱에 대한 세분화된 인증을 쉽게 구현할 수 있다면 어떨까요?
Permit.io를 사용하면 강력한 실시간 액세스 제어를 채팅 애플리케이션에 간단하게 통합할 수 있습니다. Permit.io의 고급 인증 모델을 WebSocket과 결합하면 채팅 애플리케이션에 필요한 응답성을 유지하면서 적절한 사용자가 적시에 액세스할 수 있도록 보장할 수 있습니다.
이 튜토리얼에서는 Permit.io를 사용하여 WebSocket 기반 채팅 애플리케이션에서 실시간 인증을 구현하는 방법을 알아봅니다. 마지막에는 역할 기반 및 속성 기반 액세스 제어를 동적으로 적용하여 다양한 채팅방, 메시지 가시성 및 상호 작용을 실시간으로 보호하는 방법을 이해하게 됩니다.
우리 모두는 어떤 형태로든 채팅 애플리케이션을 사용하여 친구 및 가족과 연락을 유지하고, 동료와 중요한 문제를 논의하고, 심지어 비즈니스를 수행하기도 합니다. 원활한 실시간 통신에 대한 수요가 증가함에 따라 이러한 상호 작용을 보호하는 정교한 보안 조치를 당연하게 여기기 쉽습니다. 그러나 채팅 애플리케이션이 더욱 복잡해짐에 따라 사용자 데이터 및 대화를 보호하는 과제도 커지고 있습니다. 세분화된 액세스 제어를 통해 승인된 사용자만 중요한 정보 및 작업에 액세스할 수 있습니다.
실시간 채팅 애플리케이션에서는 보안, 사용자 맞춤화, 규정 준수를 보장하기 위해 세분화된 액세스 제어가 필수적입니다.
강력한 인증 방법과 역할 기반 권한을 설정함으로써 채팅 애플리케이션은 승인되지 않은 사용자가 민감한 대화에 액세스하는 것을 방지하고 관리자가 사용자 상호 작용을 효과적으로 관리할 수 있도록 합니다. 또한 이 접근 방식은 개인의 역할이나 선호도에 따라 공개, 비공개, 그룹 등 다양한 채팅 유형에 참여할 수 있게 하여 더욱 매력적인 상호 작용을 만들어 사용자 경험을 향상시킵니다.
또한, 세분화된 액세스 제어를 통해 조직은 GDPR과 같은 엄격한 데이터 개인 정보 보호 규정을 준수하고 기밀 데이터를 보호하며 법적 위험을 최소화할 수 있습니다.
요점은 단락의 모든 주요 아이디어를 다룹니다. 모든 세부 사항을 포함하는 세련된 버전은 다음과 같습니다.
Permit.io의 인증 솔루션은 특히 WebSocket과 통합될 때 채팅 애플리케이션에서 실시간 인증 구현을 크게 간소화할 수 있습니다. 이 조합이 어떻게 동적 액세스 제어를 향상하는지에 대한 개요는 다음과 같습니다.
웹 소켓 기반 애플리케이션의 경우 웹 소켓으로 구동되는 앱의 실시간 기능을 쉽게 통합하고 관리할 수 있는 서비스인 Next.js와 Ably를 사용할 예정입니다.
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;
우리는 원래 Next.js용으로 구축된 인증 라이브러리인 Auth.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를 선택하세요.
다음 화면에서 웹 애플리케이션을 선택하고 승인된 JavaScript 원본을 입력하고 리디렉션 URI(http://localhost:3000 및 http://localhost:3000/api/auth/callback/)를 입력합니다. google.
그러면 클라이언트 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
로그인 및 로그아웃 버튼이 포함된 앱 헤더를 만들어 보겠습니다. 새 파일 만들기 - ./comComponents/Site/Header.tsx:
npm install @radix-ui/react-scroll-area
여기서 SiteHeader 구성 요소는 기본 탐색 표시줄 역할을 합니다.
사용자 세션이 존재하는 경우(session?.user) 해당 사용자의 아바타, 이름, '로그아웃' 버튼을 표시합니다.
그렇지 않은 경우 "로그인" 버튼을 표시하고 Next.js 서버 액션을 사용하고 있으므로 양식 안에 넣습니다.
signIn 및 signOut 함수는 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를 사용하여 앱에 웹소켓 기능을 추가해 보겠습니다.
시작하려면 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;
저희 앱에서 JWT용 Ably React SDK 및 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와 abil이 설치되면 ./app/api/abile/route.ts를 생성하세요.
npm install next-auth@beta
현재 상황을 분석해 보겠습니다.
다음으로 해당 채팅 페이지에 필요한 모든 구성요소를 구축해 보겠습니다. 사용자가 보낸 단일 메시지를 표시하는 메시지 항목 구성 요소부터 시작하겠습니다.
새 파일 만들기 - ./comComponents/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 구성 요소는 정렬을 위해 flex-row-reverse를 사용하여 fromUser 소품을 기반으로 레이아웃을 동적으로 조정합니다.
message.data.avatarUrl에서 가져온 보낸 사람의 아바타를 표시합니다. 메시지 텍스트(message.data.text)와 해당 타임스탬프(message.timestamp)가 현지화된 시간 문자열 형식으로 표시됩니다.
현재 사용자가 보낸 메시지의 경우 SVG 아이콘으로 렌더링된 삭제 버튼이 조건부로 표시되고 message.id를 사용하여 onDelete 콜백을 트리거합니다.
새 파일 만들기 - ./comComponents/Message/List.tsx:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
MessageList 구성 요소는 message.map() 루프를 사용하여 스크롤 가능한 메시지 목록을 렌더링합니다. 여기서 각 메시지는 MessageItem 구성 요소를 통해 표시됩니다.
세션 이메일(session.data.user.email)을 메시지의 clientId와 비교하고 올바른 정렬을 위해 사용자 메시지의 스타일을 자체 종료하여 로그인한 사용자가 메시지를 보냈는지 식별합니다.
각 MessageItem은 해당 메시지와 onDelete 콜백을 받습니다.
새 파일 만들기 - ./comComponents/Message/Input.tsx:
npm install @radix-ui/react-scroll-area
MessageInput 구성 요소는 useState로 사용자 입력을 관리하고 onSubmit을 통해 메시지를 제출하며 제출 후 필드를 재설정합니다. 입력 필드()는 상황에 맞는 자리 표시자를 표시하며 비활성화된 속성이 true인 경우 비활성화됩니다.
새 파일 만들기 - ./comComponents/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 구성 요소는 채널 목록을 링크로 렌더링합니다. 활성 채널은 현재 경로 이름을 기반으로 굵은 글꼴 클래스를 사용하여 강조 표시됩니다.
새 파일 만들기 - ./comComponents/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/abilly")와 현재 채널 이름(예: chat:general)을 공유하여 Ably와의 원활한 통합을 가능하게 합니다.
레이아웃은 왼쪽 사이드바(채널 탐색의 경우
그러면 http://localhost:3000/chat/general:
으로 이동하면 다음과 같은 내용이 표시됩니다.
이제 우리 차
https://www.permit.io/에서 새 계정을 만드세요:
프로젝트 이름을 입력하세요. 이 예에서는 실시간 채팅을 사용하겠습니다.
채팅 앱용 채널을 생성하기 위해 Permit을 사용하면 사용자가 액세스할 수 있는 항목을 나타내는 엔터티인 리소스를 생성할 수 있습니다. 계속 진행하기 위한 리소스로 채널을 설정해 보겠습니다.
이제 리소스를 편집하고 채널 리소스에 역할을 추가할 수 있습니다.
우리가 만든 역할은 다음과 같습니다. 정책 페이지의 역할 탭에서 확인할 수 있습니다.
이제 정책을 업데이트하여 각 리소스의 내용에 누가 액세스할 수 있는지 결정할 수 있습니다.
채팅에서 원하는 각 채널에 대한 리소스 인스턴스를 만듭니다. 여기서는 일반 채널에 대한 인스턴스를 만듭니다. random 및 mod.
Next.js 애플리케이션에 Permit.io 추가
먼저, 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
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의 로그인 콜백을 사용하세요. 콜백 중:
./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
여기에는 Permit.io를 사용하여 다양한 리소스 인스턴스에서 특정 역할을 할당하여 사용자를 승격시키는 Next.js API 경로가 있습니다.
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
마찬가지로 Permit.io를 사용하여 특정 리소스 인스턴스에 대한 역할 할당을 취소하여 사용자를 강등시키는 Next.js API 경로가 있습니다. decoteUser 기능은 지정된 채널의 사용자로부터 "참가자", "조정자" 및 "관리자"와 같은 역할을 제거합니다. GET 함수는 들어오는 요청을 처리하고, 쿼리 매개변수를 추출하고, 유효성을 검사하고, 리소스 인스턴스를 가져오고, 사용자에게 할당된 역할을 검색하고, 수준 내리기 프로세스를 실행합니다.
새 파일(./app/api/permit/listResourceInstances/route.ts)을 만들고 다음을 입력합니다.
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
./app/api/abile/route.ts 파일에서 다음 업데이트된 코드로 바꿉니다.
npm install @radix-ui/react-scroll-area
역할 및 권한 관리를 위해 Permit.io를 통합하여 정적 구성을 동적 역할 기반 권한으로 대체합니다.
generatePermissions 기능은 Permit.io의 데이터를 사용하여 역할을 특정 채널 기능에 매핑하여 권한이 사용자 역할에 실시간으로 맞춰지도록 합니다. 이 접근 방식은 유연성을 향상시키고 역할이나 권한 변경에 따라 시스템이 적응하도록 보장하여 Ably의 JWT 기반 인증과 원활하게 통합됩니다.
이제 허가증 대시보드에 리소스(채널)를 추가했으므로 하드코딩하는 대신 리소스(채널)를 여기에서 가져올 수 있습니다.
./comComponents/Chat/ChannelList.tsx 파일에서 다음과 같이 변경합니다.
{
"plugins": ["prettier-plugin-tailwindcss"]
}
모든 허가 사용자를 가져오는 사용자 목록 구성 요소를 만들고 사용자 이름 옆에 승격 또는 강등 버튼을 표시해 보겠습니다.
새 파일(./comComponents/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 및 WebSocket을 사용하여 채팅 애플리케이션에서 실시간 권한 부여의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
