Da sich moderne Chat-Anwendungen weiterentwickeln, erfordert die Echtzeitkommunikation immer detailliertere Zugriffskontrollen. Die Verwaltung dynamischer Berechtigungen in Echtzeit für verschiedene Chatrooms und Teilnehmer, insbesondere in komplexen Umgebungen oder Umgebungen mit mehreren Benutzern, kann schnell zu einer Herausforderung werden. Was wäre, wenn Sie problemlos eine differenzierte Autorisierung für Ihre Chat-App implementieren könnten, ohne Kompromisse bei der Leistung einzugehen?
Permit.io vereinfacht die Integration einer robusten Echtzeit-Zugriffskontrolle in Ihre Chat-Anwendung. Durch die Kombination der erweiterten Autorisierungsmodelle von Permit.io mit WebSockets können Sie sicherstellen, dass die richtigen Benutzer zur richtigen Zeit Zugriff haben und gleichzeitig die in Chat-Anwendungen erforderliche Reaktionsfähigkeit beibehalten.
In diesem Tutorial erfahren Sie, wie Sie mit Permit.io Echtzeitautorisierung in einer WebSocket-basierten Chat-Anwendung implementieren. Am Ende werden Sie verstehen, wie Sie rollenbasierte und attributbasierte Zugriffskontrollen dynamisch durchsetzen und so verschiedene Chatrooms, Nachrichtensichtbarkeit und Interaktionen in Echtzeit sichern.
Wir alle nutzen Chat-Anwendungen in der einen oder anderen Form, um mit Freunden und Familie in Kontakt zu bleiben, wichtige Angelegenheiten mit Kollegen zu besprechen und sogar Geschäfte abzuwickeln. Angesichts der steigenden Nachfrage nach nahtloser Echtzeitkommunikation ist es leicht, die ausgefeilten Sicherheitsmaßnahmen zum Schutz dieser Interaktionen als selbstverständlich zu betrachten. Da Chat-Anwendungen jedoch immer komplexer werden, steigen auch die Herausforderungen bei der Sicherung von Benutzerdaten und Gesprächen. Durch eine differenzierte Zugriffskontrolle wird sichergestellt, dass nur autorisierte Benutzer Zugriff auf vertrauliche Informationen und Aktionen haben.
Eine fein abgestufte Zugriffskontrolle ist in Echtzeit-Chat-Anwendungen unerlässlich, um Sicherheit, Benutzeranpassung und Einhaltung gesetzlicher Vorschriften zu gewährleisten.
Durch die Einrichtung robuster Authentifizierungsmethoden und rollenbasierter Berechtigungen verhindern Chat-Anwendungen, dass unbefugte Benutzer auf vertrauliche Konversationen zugreifen und ermöglichen Administratoren eine effektive Verwaltung von Benutzerinteraktionen. Dieser Ansatz verbessert auch das Benutzererlebnis, indem er die Teilnahme an verschiedenen Chat-Typen – öffentlich, privat oder in Gruppen – basierend auf individuellen Rollen oder Vorlieben ermöglicht und so ansprechendere Interaktionen schafft.
Darüber hinaus hilft eine differenzierte Zugriffskontrolle Unternehmen dabei, strenge Datenschutzbestimmungen wie die DSGVO einzuhalten, vertrauliche Daten zu schützen und rechtliche Risiken zu minimieren.
Die Punkte decken alle Hauptgedanken aus den Absätzen ab. Hier ist eine verfeinerte Version, die jedes Detail enthält:
Die Autorisierungslösungen von Permit.io können die Implementierung der Echtzeitautorisierung in Chat-Anwendungen erheblich rationalisieren, insbesondere wenn sie in WebSockets integriert sind. Hier ist ein Überblick darüber, wie diese Kombination die dynamische Zugangskontrolle verbessert:
Für unsere Web-Socket-basierte Anwendung verwenden wir Next.js und Ably, einen Dienst, der es uns ermöglicht, Echtzeitfunktionen einfach in unsere Web-Socket-basierten Apps zu integrieren und zu verwalten.
Zusätzlich zu Ably und Next Auth können wir etwas wie Firebase verwenden, um sowohl Authentifizierungs- als auch Echtzeitfunktionen zu verwalten. Auf dem Permit.io-Blog gibt es ein komplettes Tutorial dazu.
Lasst uns ohne weitere Umschweife fortfahren!
Führen Sie den folgenden Befehl aus und befolgen Sie die Anweisungen:
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
Navigieren Sie zum neu erstellten Projektordner und installieren Sie ein paar weitere Pakete, die wir zum Erstellen unserer App verwenden werden:
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
Installieren Sie außerdem einige UI-Komponenten von der Radix-Benutzeroberfläche:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Erstellen Sie eine neue Datei im Stammverzeichnis des Projektverzeichnisses – .prettierrc und geben Sie Folgendes ein:
npm install @radix-ui/react-scroll-area
Geben Sie in der Datei tailwind.config.ts Folgendes ein:
{
"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;
Geben Sie in der Datei ./app/globals.css Folgendes ein:
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;
Wir verwenden Auth.js, eine Authentifizierungsbibliothek, die ursprünglich für Next.js entwickelt wurde.
Führen Sie den folgenden Befehl aus, um das Paket zu installieren:
/* ./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;
}
}
Wir müssen eine Umgebungsvariable AUTH_SECRET erstellen. Die Bibliothek verwendet diesen Zufallswert, um Token und E-Mail-Verifizierungs-Hashes zu verschlüsseln. (Weitere Informationen finden Sie unter Bereitstellung). Sie können eine über die offizielle Auth.js-CLI generieren, indem Sie Folgendes ausführen:
npm install next-auth@beta
Als nächstes erstellen Sie die Auth.js-Konfigurationsdatei und das Objekt – ./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`.
Fügen Sie einen Routenhandler unter ./app/api/auth/[...nextauth]/route.ts hinzu:
// ./auth.ts
import NextAuth from "next-auth";
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [],
});
Fügen Sie optionale Middleware hinzu, um die Sitzung am Leben zu halten; Dadurch wird der Sitzungsablauf bei jedem Aufruf aktualisiert - ./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 unterstützt mehrere OAuth-Anbieter für die Authentifizierung. Für dieses Tutorial verwenden wir Google.
Um unsere Google-Client-ID und unser Geheimnis zu erhalten, müssen wir ein neues Projekt in der Google Cloud Console einrichten – https://console.cloud.google.com/projectcreate
Als nächstes richten wir im neu erstellten Projekt einen neuen Zustimmungsbildschirm ein:
Sobald unser Einwilligungsbildschirm erstellt wurde, können wir Anmeldeinformationen einrichten. Navigieren Sie in der Seitenleiste zu Anmeldeinformationen.
Klicken Sie auf die Schaltfläche Anmeldeinformationen erstellen und wählen Sie OAuth-Client-ID aus der Dropdown-Liste aus.
Wählen Sie im folgenden Bildschirm Webanwendung aus, geben Sie die autorisierten JavaScript-Ursprünge und Weiterleitungs-URIs ein: http://localhost:3000 und http://localhost:3000/api/auth/callback/ google bzw..
Damit sollten wir unsere Kunden-ID und unser Geheimnis haben:
Kopieren Sie die Werte und geben Sie sie in die .env-Datei ein:
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
Als nächstes aktivieren Sie Google als Anmeldeoption in unserer Auth.js-Konfiguration. Wir müssen den Google-Anbieter aus dem Paket importieren und ihn an das Provider-Array übergeben, das wir zuvor in der Auth.js-Konfigurationsdatei festgelegt haben:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Lassen Sie uns einen Header für unsere App erstellen, der die Anmelde- und Abmeldeschaltflächen enthält. Erstellen Sie eine neue Datei – ./components/Site/Header.tsx:
npm install @radix-ui/react-scroll-area
Hier dient eine SiteHeader-Komponente als Hauptnavigationsleiste.
Wenn eine Benutzersitzung vorhanden ist (Sitzung? Benutzer), werden der Avatar, der Name und die Schaltfläche „Abmelden“ des Benutzers angezeigt.
Andernfalls zeigen Sie eine Schaltfläche „Anmelden“ an, und da wir Next.js-Serveraktionen verwenden, fügen wir sie in ein Formular ein.
Die SignIn- und SignOut-Funktionen sind in Serveraktionsmarkierungen („Server verwenden“) für die serverseitige Ausführung in Next.js eingeschlossen.
In unserer ./app/layout.tsx-Datei importieren Sie die SiteHeader-Komponente:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Geben Sie auf der Startseite unter ./app/page.tsx Folgendes ein:
// ./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;
Damit sollten wir so etwas haben:
Nachdem wir nun die Authentifizierung eingerichtet haben, können wir mit Ably WebSockets-Funktionen zu unserer App hinzufügen.
Um zu beginnen, melden Sie sich bei Ably an und Erstellen Sie eine neue App mit den folgenden Optionen:
Kopieren Sie im nächsten Bildschirm Ihren API-Schlüssel:
Speichern Sie es in der .env-Datei:
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;
In unserer App installieren Sie das Ably React SDK und die Jose-Bibliothek für JWT:
/* ./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;
}
}
Sobald jose and ably installiert ist, erstellen Sie ./app/api/ably/route.ts:
npm install next-auth@beta
Lassen Sie uns zusammenfassen, was hier passiert:
Als nächstes bauen wir alle Komponenten auf, die wir für diese Chat-Seite benötigen. Wir beginnen mit der Komponente „Nachrichtenelement“, die eine einzelne von einem Benutzer gesendete Nachricht anzeigt.
Erstellen Sie eine neue Datei – ./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
Diese MessageItem-Komponente passt ihr Layout basierend auf der fromUser-Requisite dynamisch an und verwendet Flex-Row-Reverse zur Ausrichtung.
Es zeigt den Avatar des Absenders an, der aus message.data.avatarUrl stammt. Der Nachrichtentext (message.data.text) und sein Zeitstempel (message.timestamp) werden angezeigt, formatiert als lokalisierte Zeitzeichenfolge.
Für vom aktuellen Benutzer gesendete Nachrichten wird bedingt eine Löschschaltfläche angezeigt, die mit einem SVG-Symbol dargestellt wird und den onDelete-Rückruf mit message.id auslöst.
Erstellen Sie eine neue Datei – ./components/Message/List.tsx:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Die MessageList-Komponente rendert eine scrollbare Liste von Nachrichten mithilfe einer messages.map()-Schleife, wobei jede Nachricht über die MessageItem-Komponente angezeigt wird.
Es erkennt, ob eine Nachricht vom angemeldeten Benutzer gesendet wird, indem es die Sitzungs-E-Mail (session.data.user.email) mit der Client-ID der Nachricht vergleicht und Benutzernachrichten für die richtige Ausrichtung mit Selbstende formatiert.
Jedes MessageItem erhält seine Nachricht und den onDelete-Rückruf.
Neue Datei erstellen – ./components/Message/Input.tsx:
npm install @radix-ui/react-scroll-area
Die MessageInput-Komponente verwaltet Benutzereingaben mit useState und sendet Nachrichten über onSubmit, wobei das Feld nach der Übermittlung zurückgesetzt wird. Das Eingabefeld () zeigt kontextbezogene Platzhalter und ist deaktiviert, wenn die deaktivierte Requisite wahr ist.
Erstellen Sie eine neue Datei – ./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
Die ChatChannelList-Komponente stellt eine Liste von Kanälen als Links dar. Der aktive Kanal wird mithilfe der Klasse „font-bold“ basierend auf dem aktuellen Pfadnamen hervorgehoben.
Erstellen Sie eine neue Datei – ./components/Chat/index.tsx:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
In dieser Komponente machen wir ein paar Dinge:
Als nächstes stellen wir alles auf der Chat-Seite zusammen.
Erstellen Sie eine neue Datei – ./app/chat/[[...channel]]/page.tsx:
npm install @radix-ui/react-scroll-area
Die Seitenkomponente umhüllt die Chat-App mit Anbietern für die Status- und Kontextverwaltung. Der SessionProvider gewährleistet den globalen Zugriff auf die Sitzung des Benutzers, während der AblyProvider und der ChannelProvider eine nahtlose Integration mit Ably ermöglichen, indem sie einen Echtzeit-Client (authUrl: „/api/ably“) und den aktuellen Kanalnamen (z. B. chat:general) teilen.
Das Layout verwendet ein Raster mit drei Abschnitten: einer linken Seitenleiste (
Damit sollten wir etwa Folgendes haben, wenn wir zu http://localhost:3000/chat/general:
navigieren
Jetzt ist unser Cha
Erstellen Sie ein neues Konto unter https://www.permit.io/:
Geben Sie den Namen Ihres Projekts ein. Für dieses Beispiel verwende ich Live-Chat:
Um Kanäle für unsere Chat-App zu erstellen, können wir mit Permit Ressourcen erstellen, bei denen es sich um Entitäten handelt, die darstellen, worauf Benutzer Zugriff haben können. Richten wir unseren Kanal als Ressource ein, um fortzufahren:
Jetzt können wir die Ressource bearbeiten und Rollen zu unserer Kanalressource hinzufügen:
Hier sind die Rollen, die wir erstellt haben. Sie können es anzeigen, indem Sie auf der Seite Richtlinie zur Registerkarte Rollen gehen.
Jetzt können wir unsere Richtlinien aktualisieren, um zu bestimmen, wer Zugriff auf was auf jeder Ressource hat:
Erstellen Sie Ressourceninstanzen für jeden Kanal, den wir in unserem Chat haben möchten. Hier erstellen wir eine Instanz für den allgemeinen Kanal, wir können dasselbe für zufällige und Mod.
Hinzufügen von Permit.io zu Ihrer Next.js-Anwendung
Zuerst müssen wir das Permitio-Paket installieren:
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
Ziehen Sie den PDP-Container vom Docker Hub (Klicken Sie hier, um Docker zu installieren):
npm install @radix-ui/react-scroll-area
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Für dieses Beispiel müssen wir ein paar wiederverwendbare Funktionen und Routen einrichten. Beginnen wir mit der Erstellung einer Permit-Bibliotheksfunktion in ./lib/permit.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
Wir erstellen außerdem die Datei ./utils/permit.ts für alle unsere genehmigungsbezogenen Dienstprogrammfunktionen:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Wir müssen einen useUser-Hook erstellen, der es uns ermöglicht, den Permit-Benutzer einfach im Frontend abzurufen. Erstellen Sie eine neue Datei ./hooks/useUser.ts:
npm install @radix-ui/react-scroll-area
Um Benutzer während der Anmeldung automatisch zu Permit hinzuzufügen, verwenden Sie den SignIn-Rückruf von NextAuth. Während des Rückrufs:
Ersetzen Sie die Datei ./auth.ts durch diesen aktualisierten Code:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Dadurch wird sichergestellt, dass Benutzer authentifiziert und nahtlos in Permit zur Zugriffskontrolle integriert werden.
Wie wir unten sehen können, wird das Konto des Benutzers zu unserem Genehmigungs-Dashboard hinzugefügt, wenn er sich anmeldet:
Wir müssen noch ein paar Dinge einrichten, bevor wir fortfahren können. Beginnen wir mit Typen, um TypeScript bei der Entwicklung unserer App zu beruhigen. Erstellen Sie eine neue ./types/user.ts-Datei und geben Sie Folgendes ein:
// ./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;
Als nächstes erstellen wir einige API-Routen, um Benutzerdaten und Berechtigungen zu erhalten und Benutzer hoch- und herabzustufen.
Erstellen Sie eine neue Datei – ./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;
Erstellen Sie eine neue Datei *./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;
}
}
Erstellen Sie eine neue Datei – ./app/api/permit/promoteUser/route.ts und geben Sie Folgendes ein:
npm install next-auth@beta
Hier haben wir eine Next.js-API-Route, die einen Benutzer befördert, indem ihm mithilfe von Permit.io bestimmte Rollen auf verschiedenen Ressourceninstanzen zugewiesen werden.
Die promoteUser-Funktion prüft, ob der aktuelle Benutzer berechtigt ist, andere zu bewerben, und weist dem Zielbenutzer auf bestimmten Kanälen Rollen wie „Teilnehmer“, „Moderator“ und „Administrator“ zu.
Die GET-Funktion verarbeitet eingehende Anfragen, extrahiert Abfrageparameter, validiert sie, ruft Ressourceninstanzen ab und führt den Hochstufungsprozess aus. Die Ergebnisse werden als JSON-Antwort oder als Fehlermeldung zurückgegeben, wenn Probleme auftreten.
Erstellen Sie eine neue Datei – ./app/api/permit/demoteUser/route.ts und geben Sie Folgendes ein:
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
Ähnlich haben wir eine Next.js-API-Route, die einen Benutzer herabstuft, indem seine Rollenzuweisung für bestimmte Ressourceninstanzen mithilfe von Permit.io aufgehoben wird. Die demoteUser-Funktion entfernt Rollen wie „Teilnehmer“, „Moderator“ und „Administrator“ vom Benutzer auf bestimmten Kanälen. Die GET-Funktion verarbeitet eingehende Anfragen, extrahiert Abfrageparameter, validiert sie, ruft Ressourceninstanzen ab, ruft die dem Benutzer zugewiesenen Rollen ab und führt den Herabstufungsprozess aus.
Erstellen Sie eine neue Datei – ./app/api/permit/listResourceInstances/route.ts und geben Sie Folgendes ein:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Ersetzen Sie es in unserer Datei ./app/api/ably/route.ts durch den folgenden aktualisierten Code:
npm install @radix-ui/react-scroll-area
Hier integrieren wir Permit.io zur Verwaltung von Rollen und Berechtigungen und ersetzen statische Konfigurationen durch dynamische rollenbasierte Berechtigungen.
Die Funktion „generatePermissions“ verwendet Daten von Permit.io, um Rollen bestimmten Kanalfunktionen zuzuordnen und sicherzustellen, dass Berechtigungen in Echtzeit an Benutzerrollen angepasst werden. Dieser Ansatz verbessert die Flexibilität und stellt sicher, dass sich das System an veränderte Rollen oder Berechtigungen anpasst und sich nahtlos in die JWT-basierte Authentifizierung von Ably integrieren lässt.
Da wir nun die Ressourcen (Kanäle) zu unserem Genehmigungs-Dashboard hinzugefügt haben, können wir sie von dort abrufen, anstatt sie fest zu codieren.
Nehmen Sie in der Datei ./components/Chat/ChannelList.tsx die folgenden Änderungen vor:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Lassen Sie uns eine Benutzerlistenkomponente erstellen, die alle zugelassenen Benutzer abruft und neben dem Benutzernamen die Schaltflächen heraufstufen oder herabstufen anzeigt.
Erstellen Sie eine neue Datei – ./components/Chat/UserList.tsx und geben Sie Folgendes ein:
// ./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;
Hier verwenden wir einen benutzerdefinierten Hook „useUser“, um die Informationen des aktuellen Benutzers abzurufen, und den „useChannel“-Hook von Ably für die Kanalkommunikation in Echtzeit. Die Funktion getUserList ruft mithilfe der Permit.io-API die Liste der Benutzer vom Server ab. Die Komponente abonniert den Ably-Kanal für Echtzeitaktualisierungen und ruft die aktualisierte Benutzerliste ab, wenn ein Herauf-/Herabstufungsereignis auftritt. Die Benutzerliste wird im Status der Komponente gespeichert, mit Ausnahme des aktuellen Benutzers.
Endlich können wir es zu unserer Seite hinzufügen, in ./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;
Damit sollten wir in der Lage sein, Benutzer in Echtzeit zu befördern und herabzustufen:
Hier ist die Herabstufung in Aktion:
Das Erstellen einer Chat-Anwendung mit Echtzeit-Autorisierung ist ein herausfordernder, aber lohnender Prozess. Durch die Integration leistungsstarker Tools wie Permit.io und WebSockets können Sie ein nahtloses Erlebnis schaffen, das eine sichere und differenzierte Zugriffskontrolle gewährleistet. In diesem Artikel haben wir die Bedeutung der dynamischen Autorisierung in Chat-Anwendungen untersucht, mit Ably eine WebSocket-basierte Architektur eingerichtet und Permit.io für die Autorisierungsverwaltung integriert.
Dieser Workflow zeigt, wie moderne Tools eine ehemals komplexe Implementierung vereinfachen und es Entwicklern ermöglichen, sich mehr auf die Benutzererfahrung und Skalierbarkeit zu konzentrieren als auf die zugrunde liegende Infrastruktur. Mit dem richtigen Ansatz können Sie sicherstellen, dass Ihre Chat-Anwendung sowohl dynamisch als auch sicher ist.
Nachdem die grundlegende Einrichtung abgeschlossen ist, können Sie einfache und erweiterte Funktionen erkunden wie:
Das obige ist der detaillierte Inhalt vonEchtzeit-Autorisierung in einer Chat-Anwendung mit Permit.io und WebSockets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wie schreibe ich ein Dreieck in CSS?
So stellen Sie Daten nach der Formatierung wieder her
So lösen Sie das Problem der langsamen Übertragung von Serverdomänennamen
Nullbasiertes Java-Selbstlern-Tutorial
Was tun, wenn die Win8wifi-Verbindung nicht verfügbar ist?
ETH-Preistrends heute
Was bedeutet Mesh-Netzwerk?
Was soll ich tun, wenn gpedit.msc nicht geöffnet werden kann?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
