Apabila aplikasi sembang moden berkembang, komunikasi masa nyata memerlukan kawalan akses yang semakin terperinci. Menguruskan kebenaran dinamik dalam masa nyata untuk pelbagai bilik sembang dan peserta, terutamanya dalam persekitaran yang kompleks atau berbilang pengguna, boleh menjadi mencabar dengan cepat. Bagaimana jika anda boleh melaksanakan keizinan terperinci untuk apl sembang anda dengan mudah tanpa menjejaskan prestasi?
Permit.io menjadikan penyepaduan kawalan akses masa nyata yang mantap ke dalam aplikasi sembang anda menjadi mudah. Dengan menggandingkan model kebenaran lanjutan Permit.io dengan WebSockets, anda boleh memastikan bahawa pengguna yang betul mempunyai akses pada masa yang sesuai, sambil mengekalkan responsif yang diperlukan dalam aplikasi sembang.
Dalam tutorial ini, anda akan belajar cara melaksanakan kebenaran masa nyata dalam aplikasi sembang berasaskan WebSocket menggunakan Permit.io. Pada akhirnya, anda akan memahami cara untuk menguatkuasakan kawalan akses berasaskan peranan dan berasaskan atribut secara dinamik, melindungi bilik sembang yang berbeza, keterlihatan mesej dan interaksi dalam masa nyata.
Kita semua menggunakan aplikasi sembang dalam satu bentuk atau yang lain untuk kekal berhubung dengan rakan dan keluarga, membincangkan perkara penting dengan rakan sekerja, dan juga menjalankan perniagaan. Dengan peningkatan permintaan untuk komunikasi masa nyata yang lancar, mudah untuk mengambil mudah langkah keselamatan canggih yang melindungi interaksi ini. Walau bagaimanapun, apabila aplikasi sembang menjadi lebih kompleks, begitu juga cabaran untuk mendapatkan data pengguna dan perbualan. Kawalan akses yang terperinci membantu memastikan bahawa hanya pengguna yang dibenarkan mempunyai akses kepada maklumat dan tindakan sensitif.
Kawalan akses yang terperinci adalah penting dalam aplikasi sembang masa nyata untuk memastikan keselamatan, penyesuaian pengguna dan pematuhan peraturan.
Dengan menetapkan kaedah pengesahan yang teguh dan kebenaran berasaskan peranan, aplikasi sembang menghalang pengguna yang tidak dibenarkan daripada mengakses perbualan sensitif dan membenarkan pentadbir mengurus interaksi pengguna dengan berkesan. Pendekatan ini juga meningkatkan pengalaman pengguna dengan mendayakan penyertaan dalam pelbagai jenis sembang—awam, peribadi atau kumpulan—berdasarkan peranan atau keutamaan individu, mewujudkan interaksi yang lebih menarik.
Selain itu, kawalan akses yang terperinci membantu organisasi memenuhi peraturan privasi data yang ketat, seperti GDPR, melindungi data sulit dan meminimumkan risiko undang-undang.
Intinya merangkumi semua idea utama daripada perenggan. Berikut ialah versi yang diperhalusi yang merangkumi setiap butiran:
Penyelesaian kebenaran Permit.io boleh menyelaraskan pelaksanaan kebenaran masa nyata dalam aplikasi sembang, terutamanya apabila disepadukan dengan WebSockets. Berikut ialah gambaran keseluruhan tentang cara gabungan ini meningkatkan kawalan akses dinamik:
Untuk aplikasi berasaskan soket web kami, kami akan menggunakan Next.js dan Ably, perkhidmatan yang membolehkan kami menyepadukan dan mengurus keupayaan masa nyata dengan mudah dalam apl kami yang dikuasakan oleh soket web.
Selain Ably dan Next Auth, kami boleh menggunakan sesuatu seperti Firebase untuk mengendalikan kedua-dua ciri pengesahan dan masa nyata. Terdapat keseluruhan tutorial tentang itu di blog Permit.io.
Tanpa berlengah lagi, mari teruskan!
Jalankan arahan berikut dan ikut gesaan:
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
Navigasi ke folder projek yang baru dibuat dan pasang beberapa lagi pakej yang akan kami gunakan untuk membina apl kami:
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
Selain itu, pasangkan beberapa komponen UI dari UI Radix:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Buat fail baharu dalam akar direktori projek - .prettierrc dan masukkan yang berikut:
npm install @radix-ui/react-scroll-area
Dalam fail tailwind.config.ts, masukkan yang berikut:
{
"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;
Dalam fail ./app/globals.css, masukkan yang berikut:
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;
Kami akan menggunakan Auth.js, pustaka pengesahan yang asalnya dibina untuk Next.js.
Jalankan arahan berikut untuk memasang pakej:
/* ./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;
}
}
Kita perlu mencipta pembolehubah persekitaran AUTH_SECRET. Pustaka menggunakan nilai rawak ini untuk menyulitkan token dan cincang pengesahan e-mel. (Lihat Deployment untuk mengetahui lebih lanjut). Anda boleh menjana satu melalui larian CLI Auth.js rasmi:
npm install next-auth@beta
Seterusnya, buat fail dan objek konfigurasi 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`.
Tambahkan Pengendali Laluan di bawah ./app/api/auth/[...nextauth]/route.ts:
// ./auth.ts
import NextAuth from "next-auth";
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [],
});
Tambah Middleware pilihan untuk memastikan sesi tetap hidup; ini akan mengemas kini sesi tamat setiap kali ia dipanggil - ./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 menyokong berbilang penyedia OAuth untuk pengesahan. Untuk tutorial ini, kami akan menggunakan Google.
Untuk mendapatkan ID dan rahsia pelanggan Google kami, kami perlu menyediakan projek baharu dalam Google Cloud Console - https://console.cloud.google.com/projectcreate
Seterusnya, dalam projek yang baru dibuat, kami akan menyediakan skrin persetujuan baharu:
Setelah skrin persetujuan kami telah dibuat, kami boleh menyediakan bukti kelayakan. Navigasi ke Bukti kelayakan dari bar sisi.
Klik pada butang Cipta Bukti kelayakan dan pilih ID klien OAuth daripada menu lungsur.
Dalam skrin berikut, pilih Aplikasi Web, masukkan asal usul JavaScript Dibenarkan dan ubah hala URI: http://localhost:3000 dan http://localhost:3000/api/auth/callback/ google masing-masing.
Dengan itu kami harus mempunyai ID pelanggan dan rahsia kami:
Salin nilai dan masukkannya ke dalam fail .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
Seterusnya, dayakan Google sebagai pilihan log masuk dalam konfigurasi Auth.js kami. Kami perlu mengimport penyedia Google daripada pakej dan menyerahkannya kepada tatasusunan penyedia yang kami tetapkan sebelum ini dalam fail konfigurasi Auth.js:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Mari kita buat pengepala untuk apl kami yang mengandungi butang log masuk dan log keluar. Cipta fail baharu - ./components/Site/Header.tsx:
npm install @radix-ui/react-scroll-area
Di sini, komponen SiteHeader berfungsi sebagai bar navigasi utama.
Jika sesi pengguna wujud (sesi?. pengguna), paparkan avatar, nama dan butang "Log keluar" pengguna.
Jika tidak, paparkan butang "Log masuk" dan memandangkan kami menggunakan tindakan pelayan Next.js, kami meletakkannya di dalam borang.
Fungsi log Masuk dan Log Keluar dibungkus dalam penanda tindakan pelayan ("gunakan pelayan") untuk pelaksanaan sebelah pelayan dalam Next.js.
Dalam fail ./app/layout.tsx kami import komponen SiteHeader:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Dalam halaman utama di ./app/page.tsx, masukkan yang berikut:
// ./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;
Dengan itu, kita sepatutnya mempunyai sesuatu seperti ini:
Sekarang kami telah menyediakan pengesahan, mari teruskan menambah keupayaan soket web pada apl kami dengan Ably.
Untuk bermula, daftar ke Ably kemudian Buat apl baharu dengan pilihan berikut:
Dalam skrin seterusnya, salin Kunci API anda:
Simpan dalam fail .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;
Dalam apl kami, pasang Ably React SDK dan perpustakaan jose untuk 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;
}
}
Setelah jose dan ably dipasang, buat ./app/api/ably/route.ts:
npm install next-auth@beta
Mari kita pecahkan perkara yang berlaku di sini:
Seterusnya, ia membina semua komponen yang kita perlukan untuk halaman sembang itu. Kami akan bermula dengan komponen Item Mesej yang memaparkan satu mesej yang dihantar oleh pengguna.
Buat fail baharu - ./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
Komponen MessageItem ini melaraskan reka letaknya secara dinamik berdasarkan prop fromUser, menggunakan flex-row-reverse untuk penjajaran.
Ia memaparkan avatar penghantar yang diperoleh daripada message.data.avatarUrl. Teks mesej (message.data.text) dan cap masanya (message.timestamp) ditunjukkan, diformatkan sebagai rentetan masa setempat.
Untuk mesej yang dihantar oleh pengguna semasa, butang padam, yang dipaparkan dengan ikon SVG, dipaparkan secara bersyarat dan mencetuskan panggilan balik onDelete dengan message.id.
Buat fail baharu - ./components/Message/List.tsx:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Komponen MessageList memaparkan senarai mesej yang boleh ditatal menggunakan gelung messages.map(), di mana setiap mesej dipaparkan melalui komponen MessageItem.
Ia mengenal pasti jika mesej dihantar oleh pengguna log masuk dengan membandingkan e-mel sesi (session.data.user.email) dengan clientId mesej, menggayakan mesej pengguna dengan hujung kendiri untuk penjajaran kanan.
Setiap MessageItem menerima mesejnya dan panggilan balik onDelete.
Buat fail baharu - ./components/Message/Input.tsx:
npm install @radix-ui/react-scroll-area
Komponen MessageInput menguruskan input pengguna dengan useState dan menyerahkan mesej melalui onSubmit, menetapkan semula medan selepas penyerahan. Medan input () menunjukkan ruang letak kontekstual dan dilumpuhkan apabila prop yang dilumpuhkan adalah benar.
Buat fail baharu - ./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
Komponen ChatChannelList memaparkan senarai saluran sebagai pautan. Saluran aktif diserlahkan menggunakan kelas huruf tebal berdasarkan nama laluan semasa.
Buat fail baharu - ./components/Chat/index.tsx:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Dalam komponen ini, kami melakukan beberapa perkara:
Seterusnya, kami akan mengumpulkan semuanya dalam halaman sembang.
Buat fail baharu - ./app/chat/[[...channel]]/page.tsx:
npm install @radix-ui/react-scroll-area
Komponen Halaman membungkus apl sembang dalam pembekal untuk pengurusan keadaan dan konteks. SessionProvider memastikan akses global kepada sesi pengguna, manakala AblyProvider dan ChannelProvider mendayakan integrasi lancar dengan Ably dengan berkongsi klien Masa Nyata (authUrl: "/api/ably") dan nama saluran semasa (cth., sembang:umum).
Reka letak menggunakan grid dengan tiga bahagian: bar sisi kiri (
Dengan itu, kita sepatutnya mempunyai sesuatu seperti ini, apabila kita menavigasi ke http://localhost:3000/chat/general:
Sekarang cha kami
Buat akaun baharu di https://www.permit.io/:
Masukkan nama projek anda, saya akan menggunakan Sembang Langsung untuk contoh ini:
Untuk membuat saluran untuk apl sembang kami, Permit membenarkan kami mencipta sumber yang merupakan entiti yang mewakili perkara yang boleh diakses oleh pengguna, mari sediakan saluran kami sebagai sumber untuk meneruskan:
Kini kami boleh mengedit sumber dan menambah peranan pada sumber saluran kami:
Berikut ialah peranan yang telah kami cipta. Anda boleh melihatnya dengan pergi ke tab Peranan pada halaman Dasar.
Kini kami boleh mengemas kini dasar kami untuk menentukan siapa yang mempunyai akses kepada perkara pada setiap sumber:
Buat contoh sumber untuk setiap saluran yang kami mahukan dalam sembang kami, di sini kami mencipta contoh untuk saluran umum, kami boleh melakukan perkara yang sama untuk rawak dan mod.
Di sini kita boleh melihat contoh sumber yang dibuat:
Sekarang kami telah menyediakan Papan Pemuka Permit kami, kami boleh menambahkan Permit pada apl Next.js kami.
Mari menyelami dan mula menyepadukan Permit.io ke dalam aplikasi kami.
Pertama, kita perlu memasang pakej 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
Kami perlu mendapatkan kunci API kami daripada papan pemuka Permit.io kami:
Tambahkan kunci yang disalin pada fail .env:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Seterusnya, kami perlu menyediakan Titik Keputusan Dasar kami yang merupakan nod rangkaian yang bertanggungjawab untuk menjawab pertanyaan kebenaran menggunakan dasar dan data kontekstual.
Tarik bekas PDP dari Docker Hub (Klik di sini untuk memasang Docker):
npm install @radix-ui/react-scroll-area
Jalankan bekas & gantikan pembolehubah persekitaran PDP_API_KEY dengan kunci API anda.
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Sekarang kami telah menyediakan PDP kami, mari kita selami untuk menambahkan autoriaztion pada apl kami, anda boleh mengetahui lebih lanjut tentang menambahkan Permit.io pada apl Next.js daripada tutorial langkah demi langkah ini pada Permit.io blog.
Untuk contoh ini, kita perlu menyediakan beberapa fungsi dan laluan boleh guna semula, mari mulakan dengan mencipta fungsi perpustakaan Permit dalam ./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
Kami juga akan membuat fail ./utils/permit.ts untuk semua fungsi utiliti berkaitan permit kami:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Kami perlu mencipta cangkuk useUser yang akan membolehkan kami mendapatkan semula pengguna permit di bahagian hadapan dengan mudah. Cipta fail baharu ./hooks/useUser.ts:
npm install @radix-ui/react-scroll-area
Untuk menambahkan pengguna secara automatik pada Permit semasa log masuk, gunakan panggilan balik log Masuk NextAuth. Semasa panggilan balik:
Ganti fail ./auth.ts dengan kod yang dikemas kini ini:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Ini memastikan pengguna disahkan dan disepadukan dengan lancar ke dalam Permit untuk kawalan akses.
Seperti yang dapat kita lihat di bawah, apabila pengguna log masuk, akaun mereka sedang ditambahkan pada papan pemuka Permit kami:
Kami perlu menyediakan beberapa perkara lagi sebelum kami boleh meneruskan, mari mulakan dengan jenis untuk menenangkan TypeScript semasa kami membangunkan apl kami. Buat fail ./types/user.ts baharu dan masukkan yang berikut:
// ./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;
Seterusnya, kami akan membuat beberapa laluan API untuk mendapatkan data dan kebenaran pengguna serta mempromosi serta menurunkan pengguna.
Buat fail baharu - ./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;
Buat fail baharu *./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;
}
}
Buat fail baharu - ./app/api/permit/promoteUser/route.ts dan masukkan yang berikut:
npm install next-auth@beta
Di sini kami mempunyai laluan API Next.js yang mempromosikan pengguna dengan memberikan mereka peranan khusus pada contoh sumber yang berbeza menggunakan Permit.io.
Fungsi promoteUser menyemak sama ada pengguna semasa mempunyai kebenaran untuk mempromosikan orang lain dan memberikan peranan seperti "peserta," "moderator" dan "admin" kepada pengguna sasaran pada saluran tertentu.
Fungsi GET mengendalikan permintaan masuk, mengekstrak parameter pertanyaan, mengesahkannya, mengambil contoh sumber dan melaksanakan proses promosi. Ia mengembalikan hasil sebagai respons JSON atau mesej ralat jika sebarang isu berlaku.
Buat fail baharu - ./app/api/permit/demoteUser/route.ts dan masukkan yang berikut:
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
Begitu juga, kami mempunyai laluan API Next.js yang menurunkan pengguna dengan menyahtugaskan peranan mereka pada contoh sumber tertentu menggunakan Permit.io. Fungsi demoteUser mengalih keluar peranan seperti "peserta", "moderator" dan "admin" daripada pengguna pada saluran tertentu. Fungsi GET mengendalikan permintaan masuk, mengekstrak parameter pertanyaan, mengesahkannya, mengambil contoh sumber, mendapatkan semula peranan yang ditetapkan pengguna dan melaksanakan proses penurunan pangkat.
Buat fail baharu - ./app/api/permit/listResourceInstances/route.ts dan masukkan yang berikut:
cd live-chat npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms
Dalam fail kami ./app/api/ably/route.ts, gantikannya dengan kod dikemas kini berikut:
npm install @radix-ui/react-scroll-area
Di sini kami menggabungkan Permit.io untuk mengurus peranan dan kebenaran, menggantikan konfigurasi statik dengan kebenaran berasaskan peranan dinamik.
Fungsi generatePermissions menggunakan data daripada Permit.io untuk memetakan peranan kepada keupayaan saluran tertentu, memastikan kebenaran diselaraskan dengan peranan pengguna dalam masa nyata. Pendekatan ini meningkatkan fleksibiliti dan memastikan sistem menyesuaikan diri apabila peranan atau kebenaran berubah, menyepadukan dengan lancar dengan pengesahan berasaskan JWT Ably.
Sekarang kami telah menambahkan sumber (saluran) pada papan pemuka permit kami, kami boleh mengambilnya dari sana dan bukannya mengekodkannya secara keras.
Dalam fail ./components/Chat/ChannelList.tsx, buat perubahan berikut:
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Mari kita buat komponen senarai pengguna yang mengambil semua pengguna permit dan paparkan butang promosikan atau turunkan di sebelah nama pengguna.
Cipta fail baharu - ./components/Chat/UserList.tsx dan masukkan yang berikut:
// ./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;
Di sini, kami menggunakan pengguna cangkuk tersuai untuk mengambil maklumat pengguna semasa dan cangkuk useChannel daripada Ably untuk komunikasi saluran masa nyata. Fungsi getUserList mengambil senarai pengguna daripada pelayan menggunakan API Permit.io. Komponen melanggan saluran Ably untuk kemas kini masa nyata dan mengambil senarai pengguna yang dikemas kini apabila acara promosi/turun taraf berlaku. Senarai pengguna disimpan dalam keadaan komponen, tidak termasuk pengguna semasa.
Akhir sekali, kami boleh menambahkannya pada halaman kami, dalam ./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;
Dengan itu kita seharusnya dapat mempromosikan dan menurunkan pengguna dalam masa nyata:
Berikut ialah penurunan pangkat dalam tindakan:
Membina aplikasi sembang dengan kebenaran masa nyata ialah proses yang mencabar tetapi bermanfaat. Dengan menyepadukan alatan berkuasa seperti Permit.io dan WebSockets, anda boleh mencipta pengalaman yang lancar yang memastikan kawalan akses yang selamat dan terperinci. Dalam artikel ini, kami meneroka kepentingan kebenaran dinamik dalam aplikasi sembang, menyediakan seni bina berasaskan WebSocket dengan Ably dan Permit.io bersepadu untuk pengurusan kebenaran.
Aliran kerja ini menunjukkan cara alatan moden memudahkan apa yang pernah menjadi pelaksanaan yang kompleks, membolehkan pembangun menumpukan lebih pada pengalaman dan kebolehskalaan pengguna dan bukannya infrastruktur asas. Dengan pendekatan yang betul, anda boleh memastikan aplikasi sembang anda dinamik dan selamat.
Dengan persediaan asas selesai, anda boleh meneroka ciri mudah dan lanjutan seperti:
Atas ialah kandungan terperinci Keizinan Masa Nyata dalam Aplikasi Sembang dengan Permit.io dan WebSockets. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menulis segitiga dalam css
Bagaimana untuk memulihkan data selepas pemformatan
Bagaimana untuk menyelesaikan masalah pemindahan nama domain pelayan perlahan
Tutorial pembelajaran kendiri Java berasaskan sifar
Apa yang perlu dilakukan jika sambungan win8wifi tidak tersedia
Arah aliran harga Eth hari ini
Apakah yang dimaksudkan dengan rangkaian mesh?
Apakah yang perlu saya lakukan jika gpedit.msc tidak boleh dibuka?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
