À mesure que les applications de chat modernes évoluent, la communication en temps réel nécessite des contrôles d'accès de plus en plus granulaires. La gestion des autorisations dynamiques en temps réel pour diverses salles de discussion et participants, en particulier dans des environnements complexes ou multi-utilisateurs, peut rapidement devenir un défi. Et si vous pouviez facilement mettre en œuvre une autorisation précise pour votre application de chat sans compromettre les performances ?
Permit.io simplifie l'intégration d'un contrôle d'accès robuste et en temps réel dans votre application de chat. En associant les modèles d'autorisation avancés de Permit.io avec WebSockets, vous pouvez garantir que les bons utilisateurs ont accès au bon moment, tout en conservant la réactivité nécessaire dans les applications de chat.
Dans ce didacticiel, vous apprendrez comment implémenter une autorisation en temps réel dans une application de chat basée sur WebSocket à l'aide de Permit.io. À la fin, vous comprendrez comment appliquer dynamiquement des contrôles d'accès basés sur les rôles et les attributs, en sécurisant différentes salles de discussion, la visibilité des messages et les interactions en temps réel.
Nous utilisons tous des applications de chat sous une forme ou une autre pour rester en contact avec nos amis et notre famille, discuter de sujets importants avec des collègues et même mener des affaires. Face à la demande croissante de communications fluides et en temps réel, il est facile de tenir pour acquis les mesures de sécurité sophistiquées qui protègent ces interactions. Cependant, à mesure que les applications de chat deviennent plus complexes, les défis liés à la sécurisation des données et des conversations des utilisateurs augmentent également. Un contrôle d'accès précis permet de garantir que seuls les utilisateurs autorisés ont accès aux informations et actions sensibles.
Un contrôle d'accès précis est essentiel dans les applications de chat en temps réel pour garantir la sécurité, la personnalisation des utilisateurs et la conformité réglementaire.
En définissant des méthodes d'authentification robustes et des autorisations basées sur les rôles, les applications de chat empêchent les utilisateurs non autorisés d'accéder aux conversations sensibles et permettent aux administrateurs de gérer efficacement les interactions des utilisateurs. Cette approche améliore également l'expérience utilisateur en permettant la participation à différents types de chat (public, privé ou de groupe) en fonction des rôles ou préférences individuels, créant ainsi des interactions plus engageantes.
De plus, un contrôle d'accès précis aide les organisations à respecter des réglementations strictes en matière de confidentialité des données, comme le RGPD, en protégeant les données confidentielles et en minimisant les risques juridiques.
Les points couvrent toutes les idées principales des paragraphes. Voici une version raffinée qui inclut chaque détail :
Les solutions d'autorisation de Permit.io peuvent rationaliser considérablement la mise en œuvre de l'autorisation en temps réel dans les applications de chat, en particulier lorsqu'elles sont intégrées à WebSockets. Voici un aperçu de la façon dont cette combinaison améliore le contrôle d’accès dynamique :
Pour notre application basée sur socket Web, nous utiliserons Next.js et Ably, un service qui nous permet d'intégrer et de gérer facilement les fonctionnalités en temps réel dans nos applications alimentées par socket Web.
En plus d'Ably et Next Auth, nous pouvons utiliser quelque chose comme Firebase pour gérer à la fois l'authentification et les fonctionnalités en temps réel. Il y a un tutoriel complet à ce sujet sur le blog Permit.io.
Sans plus tarder, commençons !
Exécutez la commande suivante et suivez les invites :
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
Accédez au dossier du projet nouvellement créé et installez quelques packages supplémentaires que nous utiliserons pour créer notre application :
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
Installez également quelques composants d'interface utilisateur à partir de Radix UI :
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Créez un nouveau fichier à la racine du répertoire du projet - .prettierrc et saisissez ce qui suit :
npm install @radix-ui/react-scroll-area
Dans le fichier tailwind.config.ts, saisissez ce qui suit :
{
"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;
Dans le fichier ./app/globals.css, saisissez ce qui suit :
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;
Nous utiliserons Auth.js, une bibliothèque d'authentification initialement conçue pour Next.js.
Exécutez la commande suivante pour installer le package :
/* ./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;
}
}
Nous devons créer une variable d'environnement AUTH_SECRET. La bibliothèque utilise cette valeur aléatoire pour chiffrer les jetons et les hachages de vérification des e-mails. (Voir Déploiement pour en savoir plus). Vous pouvez en générer un via la CLI officielle Auth.js en exécutant :
npm install next-auth@beta
Ensuite, créez le fichier de configuration et l'objet 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`.
Ajoutez un gestionnaire de route sous ./app/api/auth/[...nextauth]/route.ts :
// ./auth.ts
import NextAuth from "next-auth";
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [],
});
Ajoutez un middleware facultatif pour maintenir la session en vie ; cela mettra à jour l'expiration de la session à chaque appel - ./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 prend en charge plusieurs fournisseurs OAuth pour l'authentification. Pour ce tutoriel, nous utiliserons Google.
Pour obtenir notre identifiant client et notre secret Google, nous devons configurer un nouveau projet dans Google Cloud Console - https://console.cloud.google.com/projectcreate
Ensuite, dans le projet nouvellement créé, nous allons configurer un nouvel écran de consentement :
Une fois notre écran de consentement créé, nous pouvons configurer les informations d'identification. Accédez à Identifiants dans la barre latérale.
Cliquez sur le bouton Créer des informations d'identification et sélectionnez ID client OAuth dans la liste déroulante.
Dans l'écran suivant, sélectionnez Application Web, saisissez les origines JavaScript autorisées et redirigez les URI : http://localhost:3000 et http://localhost:3000/api/auth/callback/ Google respectivement.
Avec cela, nous devrions avoir notre identifiant client et notre secret :
Copiez les valeurs et saisissez-les dans le fichier .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
Ensuite, activez Google comme option de connexion dans notre configuration Auth.js. Nous devrons importer le fournisseur Google du package et le transmettre au tableau des fournisseurs que nous avons défini précédemment dans le fichier de configuration Auth.js :
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Créons un en-tête pour notre application contenant les boutons de connexion et de déconnexion. Créez un nouveau fichier - ./components/Site/Header.tsx :
npm install @radix-ui/react-scroll-area
Ici, un composant SiteHeader sert de barre de navigation principale.
Si une session utilisateur existe (session ?. utilisateur), affichez l'avatar de l'utilisateur, son nom et un bouton « Se déconnecter ».
Sinon, affichez un bouton « Se connecter », et comme nous utilisons les actions du serveur Next.js, nous le mettons dans un formulaire.
Les fonctions de connexion et de déconnexion sont enveloppées dans des marqueurs d'action du serveur ("utiliser le serveur") pour une exécution côté serveur dans Next.js.
Dans notre fichier ./app/layout.tsx importez le composant SiteHeader :
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Dans la page d'accueil à l'adresse ./app/page.tsx, saisissez ce qui suit :
// ./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;
Avec ça, on devrait avoir quelque chose comme ça :
Maintenant que nous avons configuré l'authentification, passons à l'ajout de fonctionnalités de websockets à notre application avec Ably.
Pour commencer, inscrivez-vous à Ably puis Créez une nouvelle application avec les options suivantes :
Dans l'écran suivant, copiez votre clé API :
Enregistrez-le dans le fichier .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;
Dans notre application, installez le SDK Ably React et la bibliothèque Jose pour 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;
}
}
Une fois Jose et habilement installé, créez ./app/api/ably/route.ts :
npm install next-auth@beta
Décomposons ce qui se passe ici :
Ensuite, construisons tous les composants dont nous avons besoin pour cette page de discussion. Nous commencerons par le composant Message Item qui affiche un seul message envoyé par un utilisateur.
Créez un nouveau fichier - ./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
Ce composant MessageItem ajuste dynamiquement sa disposition en fonction de la prop fromUser, en utilisant flex-row-reverse pour l'alignement.
Il affiche l’avatar de l’expéditeur provenant de message.data.avatarUrl. Le texte du message (message.data.text) et son horodatage (message.timestamp) sont affichés, formatés sous forme de chaîne d'heure localisée.
Pour les messages envoyés par l'utilisateur actuel, un bouton de suppression, rendu avec une icône SVG, est affiché sous condition et déclenche le rappel onDelete avec message.id.
Créez un nouveau fichier - ./components/Message/List.tsx :
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Le composant MessageList affiche une liste déroulante de messages à l'aide d'une boucle messages.map(), où chaque message est affiché via le composant MessageItem.
Il identifie si un message est envoyé par l'utilisateur connecté en comparant l'e-mail de session (session.data.user.email) avec l'ID client du message, en stylisant les messages utilisateur avec une fin automatique pour un alignement correct.
Chaque MessageItem reçoit son message et le rappel onDelete.
Créer un nouveau fichier - ./components/Message/Input.tsx :
npm install @radix-ui/react-scroll-area
Le composant MessageInput gère les entrées de l'utilisateur avec useState et soumet les messages via onSubmit, réinitialisant le champ après la soumission. Le champ de saisie () affiche des espaces réservés contextuels et est désactivé lorsque l'accessoire désactivé est vrai.
Créez un nouveau fichier - ./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
Le composant ChatChannelList affiche une liste de chaînes sous forme de liens. Le canal actif est mis en évidence à l'aide de la classe font-bold en fonction du nom de chemin actuel.
Créez un nouveau fichier - ./components/Chat/index.tsx :
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Dans ce composant, nous faisons quelques choses :
Ensuite, nous rassemblerons tout dans la page de chat.
Créez un nouveau fichier - ./app/chat/[[...channel]]/page.tsx :
npm install @radix-ui/react-scroll-area
Le composant Page enveloppe l'application de chat dans des fournisseurs pour la gestion de l'état et du contexte. Le SessionProvider garantit un accès global à la session de l'utilisateur, tandis que AblyProvider et ChannelProvider permettent une intégration transparente avec Ably en partageant un client en temps réel (authUrl : "/api/ably") et le nom de canal actuel (par exemple, chat:general).
La mise en page utilise une grille comportant trois sections : une barre latérale gauche (
Avec cela, nous devrions avoir quelque chose comme ceci, lorsque nous naviguons vers http://localhost:3000/chat/general:
Maintenant que notre cha
Créez un nouveau compte sur https://www.permit.io/ :
Entrez le nom de votre projet, j'utiliserai Live Chat pour cet exemple :
Pour créer des chaînes pour notre application de chat, Permit nous permet de créer des ressources qui sont des entités qui représentent ce à quoi les utilisateurs peuvent avoir accès, configurons notre chaîne en tant que ressource pour continuer :
Nous pouvons maintenant modifier la ressource et ajouter des rôles sur notre ressource de chaîne :
Voici les rôles que nous avons créés. Vous pouvez le consulter en accédant à l'onglet Rôles de la page Politique.
Nous pouvons désormais mettre à jour nos politiques pour déterminer qui a accès à quoi sur chaque ressource :
Créez des instances de ressources pour chaque canal que nous voulons dans notre chat, ici nous créons une instance pour le canal général, nous pouvons faire de même pour aléatoire et mod.
Ici, nous pouvons voir les instances de ressources créées :
Maintenant que nous avons configuré notre tableau de bord Permit, nous pouvons ajouter Permit à notre application Next.js.
Plongeons-nous et commençons à intégrer Permit.io dans notre application.
Tout d'abord, nous devons installer le package 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
Nous devons obtenir notre clé API depuis notre tableau de bord Permit.io :
Ajoutez la clé copiée au fichier .env :
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Ensuite, nous devrons configurer notre point de décision politique qui est un nœud de réseau chargé de répondre aux requêtes d'autorisation à l'aide de politiques et de données contextuelles.
Tirez le conteneur PDP de Docker Hub (Cliquez ici pour installer Docker) :
npm install @radix-ui/react-scroll-area
Exécutez le conteneur et remplacez la variable d'environnement PDP_API_KEY par votre clé API.
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Maintenant que notre PDP est configuré, passons à l'ajout d'une autorisation à notre application. Vous pouvez en savoir plus sur l'ajout de Permit.io à une application Next.js à partir de ce didacticiel étape par étape sur Permit.io. blog.
Pour cet exemple, nous devrons configurer quelques fonctions et routes réutilisables, commençons par créer une fonction de bibliothèque Permit dans ./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
Nous créerons également le fichier ./utils/permit.ts pour toutes nos fonctions utilitaires liées aux permis :
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Nous devrons créer un hook useUser qui nous permettra de récupérer facilement le permis utilisateur sur le frontend. Créez un nouveau fichier ./hooks/useUser.ts :
npm install @radix-ui/react-scroll-area
Pour ajouter automatiquement des utilisateurs à Permit lors de la connexion, utilisez le rappel de connexion de NextAuth. Pendant le rappel :
Remplacez le fichier ./auth.ts par ce code mis à jour :
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Cela garantit que les utilisateurs sont authentifiés et intégrés de manière transparente dans Permit pour le contrôle d'accès.
Comme nous pouvons le voir ci-dessous, lorsque l'utilisateur se connecte, son compte est ajouté à notre tableau de bord Permis :
Nous devrons configurer quelques éléments supplémentaires avant de pouvoir continuer, commençons par les types pour apaiser TypeScript pendant que nous développons notre application. Créez un nouveau fichier ./types/user.ts et saisissez ce qui suit :
// ./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;
Ensuite, nous créerons quelques routes API pour obtenir les données et les autorisations des utilisateurs, ainsi que pour promouvoir et rétrograder les utilisateurs.
Créez un nouveau fichier - ./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;
Créez un nouveau fichier *./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;
}
}
Créez un nouveau fichier - ./app/api/permit/promoteUser/route.ts et saisissez ce qui suit :
npm install next-auth@beta
Ici, nous avons une route API Next.js qui promeut un utilisateur en lui attribuant des rôles spécifiques sur différentes instances de ressources à l'aide de Permit.io.
La fonction PromoUser vérifie si l'utilisateur actuel est autorisé à en promouvoir d'autres et attribue des rôles tels que « participant », « modérateur » et « administrateur » à l'utilisateur cible sur les canaux spécifiés.
La fonction GET gère les demandes entrantes, extrait les paramètres de requête, les valide, récupère les instances de ressources et exécute le processus de promotion. Il renvoie les résultats sous forme de réponse JSON ou de message d'erreur si des problèmes surviennent.
Créez un nouveau fichier - ./app/api/permit/demoteUser/route.ts et saisissez ce qui suit :
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
De même, nous avons une route API Next.js qui rétrograde un utilisateur en désattribuant ses rôles sur des instances de ressources spécifiques à l'aide de Permit.io. La fonction demoteUser supprime les rôles tels que « participant », « modérateur » et « administrateur » de l'utilisateur sur les canaux spécifiés. La fonction GET gère les demandes entrantes, extrait les paramètres de requête, les valide, récupère les instances de ressources, récupère les rôles attribués à l'utilisateur et exécute le processus de rétrogradation.
Créez un nouveau fichier - ./app/api/permit/listResourceInstances/route.ts et saisissez ce qui suit :
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Dans notre fichier ./app/api/ably/route.ts, remplacez-le par le code mis à jour suivant :
npm install @radix-ui/react-scroll-area
Ici, nous incorporons Permit.io pour gérer les rôles et les autorisations, en remplaçant les configurations statiques par des autorisations dynamiques basées sur les rôles.
La fonction generatePermissions utilise les données de Permit.io pour mapper les rôles à des capacités de canal spécifiques, garantissant ainsi que les autorisations sont alignées sur les rôles des utilisateurs en temps réel. Cette approche améliore la flexibilité et garantit que le système s'adapte à mesure que les rôles ou les autorisations changent, s'intégrant de manière transparente à l'authentification basée sur JWT d'Ably.
Maintenant que nous avons ajouté les ressources (canaux) à notre tableau de bord des permis, nous pouvons les récupérer à partir de là au lieu de les coder en dur.
Dans le fichier ./components/Chat/ChannelList.tsx, apportez les modifications suivantes :
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Créons un composant de liste d'utilisateurs qui récupère tous les utilisateurs autorisés et affiche les boutons promouvoir ou rétrograder à côté du nom d'utilisateur.
Créez un nouveau fichier - ./components/Chat/UserList.tsx et entrez ce qui suit :
// ./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;
Ici, nous utilisons un hook personnalisé useUser pour récupérer les informations de l'utilisateur actuel et le hook useChannel d'Ably pour la communication par canal en temps réel. La fonction getUserList récupère la liste des utilisateurs du serveur à l'aide de l'API Permit.io. Le composant s'abonne au canal Ably pour les mises à jour en temps réel et récupère la liste d'utilisateurs mise à jour lorsqu'un événement de promotion/rétrogradation se produit. La liste des utilisateurs est stockée dans l'état du composant, à l'exclusion de l'utilisateur actuel.
Enfin, nous pouvons l'ajouter à notre page, dans ./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;
Avec cela, nous devrions pouvoir promouvoir et rétrograder des utilisateurs en temps réel :
Voici la rétrogradation en action :
Créer une application de chat avec autorisation en temps réel est un processus difficile mais gratifiant. En intégrant des outils puissants tels que Permit.io et WebSockets, vous pouvez créer une expérience transparente qui garantit un contrôle d'accès sécurisé et précis. Dans cet article, nous avons exploré l'importance de l'autorisation dynamique dans les applications de chat, mis en place une architecture basée sur WebSocket avec Ably et intégré Permit.io pour la gestion des autorisations.
Ce flux de travail démontre comment les outils modernes simplifient ce qui était autrefois une mise en œuvre complexe, permettant aux développeurs de se concentrer davantage sur l'expérience utilisateur et l'évolutivité plutôt que sur l'infrastructure sous-jacente. Avec la bonne approche, vous pouvez garantir que votre application de chat est à la fois dynamique et sécurisée.
Une fois la configuration de base terminée, vous pouvez explorer des fonctionnalités simples et avancées telles que :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment écrire un triangle en CSS
Comment récupérer des données après le formatage
Comment résoudre le problème du transfert lent du nom de domaine du serveur
Tutoriel d'auto-apprentissage Java base zéro
Que faire si la connexion win8wifi n'est pas disponible
Tendances des prix des Eth aujourd'hui
Que signifie le réseau maillé ?
Que dois-je faire si gpedit.msc ne peut pas être ouvert ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
