Skip to content

codeHui/custome-webapp-for-dify

 
 

Repository files navigation

English | 中文

Implement RBAC (Role based access control) for Dify

RBAC behavior: As shown on the left in the image below, when admin logs in they can see all apps, while user can only see the apps configured for their role (configured in rbac.json).

dify_rbac

Software Architecture

This project is forked from the Dify official project (MIT license): langgenius/webapp-conversation (Next.js)

For the RBAC implementation flow, see: rbac_flow_guide

You can compare the backup/webapp-conversation_original_code_202606 and main branches to see what code changes this project made to the original project.

Config App

Create a file named .env.local in the current directory and copy the contents from .env.example. Setting the following content:

# APP URL: This is the API's base URL.
NEXT_PUBLIC_API_URL=http://127.0.0.1/v1

# Multi-app configuration for RBAC. 
# The appId is the unique identifier from the Dify app URL.
# The apiKey is generated from the app's API Access page.
NEXT_PUBLIC_AGENT_CONFIGS=[{"id":"agent-1","name":"Agent 1","appId":"your-first-app-id","apiKey":"app-your-first-key"},{"id":"agent-2","name":"Agent 2","appId":"your-second-app-id","apiKey":"app-your-second-key"}]

# Used to sign the JWT Token for login.
JWT_SECRET=replace-this-in-production
  • The appId and apiKey are from the Dify backend after you create an APP: app_config
  • As shown below, langgenius/webapp-conversation is the project that Dify provided for developers to folk and customize the web APP customize_dify Config more in config/index.ts file:
export const APP_INFO: AppInfo = {
  title: 'Chat APP',
  description: '',
  copyright: '',
  privacy_policy: '',
  default_language: 'zh-Hans'
}

export const isShowPrompt = true
export const promptTemplate = ''

RBAC Config

Edit rbac.json directly to manage roles and accounts. The backend reloads this file at request time.

{
  "defaultPassword": "123456",
  "roles": {
    "admin": {
      "agents": ["agent-1", "agent-2"]
    },
    "user": {
      "agents": ["agent-1"]
    }
  },
  "users": [
    { "username": "admin", "role": "admin" },
    { "username": "user", "role": "user" }
  ]
}

RBAC Notes:

  • roles.<role>.agents (e.g. "agent-1", "agent-2") are id defined in NEXT_PUBLIC_AGENT_CONFIGS

Login Notes:

  • defaultPassword is the shared password for every configured account.
  • The default accounts are admin / 123456 and user / 123456.

Getting Started

First, install dependencies:

npm install
# or
yarn
# or
pnpm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Open Source

This project is based on the MIT license of langgenius/webapp-conversation. This is an community project, not an official Dify Project. It is not affiliated with, endorsed by, or sponsored by LangGenius / the Dify project.
Please note that this project was rapidly developed using Vibe Coding and is not yet production-ready. My hope is that it serves as a springboard for further innovation. Developers with interest are welcome to optimize the project. Discussion, bug fixes, and pull requests are all welcome!

About

Customized Dify web app with support for RBAC

Resources

License

Stars

2 stars

Watchers

0 watching

Forks

Contributors

Languages

  • TypeScript 85.1%
  • JavaScript 6.2%
  • SCSS 6.1%
  • CSS 2.5%
  • Dockerfile 0.1%