fix: nextjs security update （e-260） (#29553)

0.15.8

.github/workflows/build-push.yml

@@ -5,8 +5,9 @@ on:
     branches:
       - "main"
       - "deploy/dev"
-    tags:
-      - "*"
+      - "e-260"
+  release:
+    types: [published]
 
 concurrency:
   group: build-push-${{ github.head_ref || github.run_id }}

.github/workflows/deploy-enterprise.yml

@@ -0,0 +1,29 @@
+name: Deploy Enterprise
+
+permissions:
+  contents: read
+
+on:
+  workflow_run:
+    workflows: ["Build and Push API & Web"]
+    branches:
+      - "deploy/enterprise"
+    types:
+      - completed
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: |
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.head_branch == 'deploy/enterprise'
+
+    steps:
+      - name: Deploy to server
+        uses: appleboy/ssh-action@v0.1.8
+        with:
+          host: ${{ secrets.ENTERPRISE_SSH_HOST }}
+          username: ${{ secrets.ENTERPRISE_SSH_USER }}
+          password: ${{ secrets.ENTERPRISE_SSH_PASSWORD }}
+          script: |
+            ${{ vars.ENTERPRISE_SSH_SCRIPT || secrets.ENTERPRISE_SSH_SCRIPT }}

api/controllers/console/app/app.py

@@ -2,30 +2,28 @@ import uuid
 from typing import cast
 
 from flask_login import current_user  # type: ignore
-from flask_restful import Resource, inputs, marshal, marshal_with, reqparse  # type: ignore
+from flask_restful import (Resource, inputs, marshal,  # type: ignore
+                           marshal_with, reqparse)
 from sqlalchemy import select
 from sqlalchemy.orm import Session
 from werkzeug.exceptions import BadRequest, Forbidden, abort
 
 from controllers.console import api
 from controllers.console.app.wraps import get_app_model
-from controllers.console.wraps import (
-    account_initialization_required,
-    cloud_edition_billing_resource_check,
-    enterprise_license_required,
-    setup_required,
-)
+from controllers.console.wraps import (account_initialization_required,
+                                       cloud_edition_billing_resource_check,
+                                       enterprise_license_required,
+                                       setup_required)
 from core.ops.ops_trace_manager import OpsTraceManager
 from extensions.ext_database import db
-from fields.app_fields import (
-    app_detail_fields,
-    app_detail_fields_with_site,
-    app_pagination_fields,
-)
+from fields.app_fields import (app_detail_fields, app_detail_fields_with_site,
+                               app_pagination_fields)
 from libs.login import login_required
 from models import Account, App
 from services.app_dsl_service import AppDslService, ImportMode
 from services.app_service import AppService
+from services.enterprise.enterprise_service import EnterpriseService
+from services.feature_service import FeatureService
 
 ALLOW_CREATE_APP_MODES = ["chat", "agent-chat", "advanced-chat", "workflow", "completion"]
 
@@ -67,7 +65,17 @@ class AppListApi(Resource):
         if not app_pagination:
             return {"data": [], "total": 0, "page": 1, "limit": 20, "has_more": False}
 
-        return marshal(app_pagination, app_pagination_fields)
+        if FeatureService.get_system_features().webapp_auth.enabled:
+            app_ids = [str(app.id) for app in app_pagination.items]
+            res = EnterpriseService.WebAppAuth.batch_get_app_access_mode_by_id(app_ids=app_ids)
+            if len(res) != len(app_ids):
+                raise BadRequest("Invalid app id in webapp auth")
+
+            for app in app_pagination.items:
+                if str(app.id) in res:
+                    app.access_mode = res[str(app.id)].access_mode
+
+        return marshal(app_pagination, app_pagination_fields), 200
 
     @setup_required
     @login_required
@@ -111,6 +119,10 @@ class AppApi(Resource):
 
         app_model = app_service.get_app(app_model)
 
+        if FeatureService.get_system_features().webapp_auth.enabled:
+            app_setting = EnterpriseService.WebAppAuth.get_app_access_mode_by_id(app_id=str(app_model.id))
+            app_model.access_mode = app_setting.access_mode
+
         return app_model
 
     @setup_required

api/controllers/console/app/app_import.py

@@ -14,6 +14,8 @@ from fields.app_fields import app_import_fields
 from libs.login import login_required
 from models import Account
 from services.app_dsl_service import AppDslService, ImportStatus
+from services.enterprise.enterprise_service import EnterpriseService
+from services.feature_service import FeatureService
 
 
 class AppImportApi(Resource):
@@ -56,7 +58,9 @@ class AppImportApi(Resource):
                 app_id=args.get("app_id"),
             )
             session.commit()
-
+        if result.app_id and FeatureService.get_system_features().webapp_auth.enabled:
+            # update web app setting as private
+            EnterpriseService.WebAppAuth.update_app_access_mode(result.app_id, "private")
         # Return appropriate status code based on result
         status = result.status
         if status == ImportStatus.FAILED.value:

api/controllers/console/auth/error.py

@@ -59,3 +59,9 @@ class EmailCodeAccountDeletionRateLimitExceededError(BaseHTTPException):
     error_code = "email_code_account_deletion_rate_limit_exceeded"
     description = "Too many account deletion emails have been sent. Please try again in 5 minutes."
     code = 429
+
+
+class EmailPasswordResetLimitError(BaseHTTPException):
+    error_code = "email_password_reset_limit"
+    description = "Too many failed password reset attempts. Please try again in 24 hours."
+    code = 429

api/controllers/console/auth/forgot_password.py

@@ -6,9 +6,13 @@ from flask_restful import Resource, reqparse  # type: ignore
 
 from constants.languages import languages
 from controllers.console import api
-from controllers.console.auth.error import EmailCodeError, InvalidEmailError, InvalidTokenError, PasswordMismatchError
-from controllers.console.error import AccountInFreezeError, AccountNotFound, EmailSendIpLimitError
-from controllers.console.wraps import email_password_login_enabled, setup_required
+from controllers.console.auth.error import (EmailCodeError, InvalidEmailError,
+                                            InvalidTokenError,
+                                            PasswordMismatchError)
+from controllers.console.error import (AccountInFreezeError, AccountNotFound,
+                                       EmailSendIpLimitError)
+from controllers.console.wraps import (email_password_login_enabled,
+                                       setup_required)
 from events.tenant_event import tenant_was_created
 from extensions.ext_database import db
 from libs.helper import email, extract_remote_ip
@@ -16,7 +20,8 @@ from libs.password import hash_password, valid_password
 from models.account import Account
 from services.account_service import AccountService, TenantService
 from services.errors.account import AccountRegisterError
-from services.errors.workspace import WorkSpaceNotAllowedCreateError
+from services.errors.workspace import (WorkSpaceNotAllowedCreateError,
+                                       WorkspacesLimitExceededError)
 from services.feature_service import FeatureService
 
 
@@ -141,6 +146,8 @@ class ForgotPasswordResetApi(Resource):
                 pass
             except AccountRegisterError as are:
                 raise AccountInFreezeError()
+            except WorkspacesLimitExceededError:
+                pass
 
         return {"result": "success"}
 

api/controllers/console/auth/login.py

@@ -21,6 +21,7 @@ from controllers.console.error import (
     AccountNotFound,
     EmailSendIpLimitError,
     NotAllowedCreateWorkspace,
+    WorkspacesLimitExceeded,
 )
 from controllers.console.wraps import email_password_login_enabled, setup_required
 from events.tenant_event import tenant_was_created
@@ -30,7 +31,7 @@ from models.account import Account
 from services.account_service import AccountService, RegisterService, TenantService
 from services.billing_service import BillingService
 from services.errors.account import AccountRegisterError
-from services.errors.workspace import WorkSpaceNotAllowedCreateError
+from services.errors.workspace import WorkSpaceNotAllowedCreateError, WorkspacesLimitExceededError
 from services.feature_service import FeatureService
 
 
@@ -88,10 +89,15 @@ class LoginApi(Resource):
         # SELF_HOSTED only have one workspace
         tenants = TenantService.get_join_tenants(account)
         if len(tenants) == 0:
-            return {
-                "result": "fail",
-                "data": "workspace not found, please contact system admin to invite you to join in a workspace",
-            }
+            system_features = FeatureService.get_system_features()
+
+            if system_features.is_allow_create_workspace and not system_features.license.workspaces.is_available():
+                raise WorkspacesLimitExceeded()
+            else:
+                return {
+                    "result": "fail",
+                    "data": "workspace not found, please contact system admin to invite you to join in a workspace",
+                }
 
         token_pair = AccountService.login(account=account, ip_address=extract_remote_ip(request))
         AccountService.reset_login_error_rate_limit(args["email"])
@@ -198,6 +204,9 @@ class EmailCodeLoginApi(Resource):
         if account:
             tenant = TenantService.get_join_tenants(account)
             if not tenant:
+                workspaces = FeatureService.get_system_features().license.workspaces
+                if not workspaces.is_available():
+                    raise WorkspacesLimitExceeded()
                 if not FeatureService.get_system_features().is_allow_create_workspace:
                     raise NotAllowedCreateWorkspace()
                 else:
@@ -215,6 +224,8 @@ class EmailCodeLoginApi(Resource):
                 return NotAllowedCreateWorkspace()
             except AccountRegisterError as are:
                 raise AccountInFreezeError()
+            except WorkspacesLimitExceededError:
+                raise WorkspacesLimitExceeded()
         token_pair = AccountService.login(account, ip_address=extract_remote_ip(request))
         AccountService.reset_login_error_rate_limit(args["email"])
         return {"result": "success", "data": token_pair.model_dump()}

api/controllers/console/datasets/datasets_document.py

@@ -310,7 +310,7 @@ class DatasetInitApi(Resource):
     @cloud_edition_billing_resource_check("vector_space")
     def post(self):
         # The role of the current user in the ta table must be admin, owner, or editor
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
 
         parser = reqparse.RequestParser()
@@ -684,7 +684,7 @@ class DocumentProcessingApi(DocumentResource):
         document = self.get_document(dataset_id, document_id)
 
         # The role of the current user in the ta table must be admin, owner, or editor
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
 
         if action == "pause":
@@ -748,7 +748,7 @@ class DocumentMetadataApi(DocumentResource):
         doc_metadata = req_data.get("doc_metadata")
 
         # The role of the current user in the ta table must be admin, owner, or editor
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
 
         if doc_type is None or doc_metadata is None:

api/controllers/console/datasets/datasets_segments.py

@@ -122,7 +122,7 @@ class DatasetDocumentSegmentListApi(Resource):
         segment_ids = request.args.getlist("segment_id")
 
         # The role of the current user in the ta table must be admin or owner
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
         try:
             DatasetService.check_dataset_permission(dataset, current_user)
@@ -149,7 +149,7 @@ class DatasetDocumentSegmentApi(Resource):
         # check user's model setting
         DatasetService.check_dataset_model_setting(dataset)
         # The role of the current user in the ta table must be admin, owner, or editor
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
 
         try:
@@ -202,7 +202,7 @@ class DatasetDocumentSegmentAddApi(Resource):
         document = DocumentService.get_document(dataset_id, document_id)
         if not document:
             raise NotFound("Document not found.")
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
         # check embedding model setting
         if dataset.indexing_technique == "high_quality":
@@ -277,7 +277,7 @@ class DatasetDocumentSegmentUpdateApi(Resource):
         if not segment:
             raise NotFound("Segment not found.")
         # The role of the current user in the ta table must be admin, owner, or editor
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
         try:
             DatasetService.check_dataset_permission(dataset, current_user)
@@ -320,7 +320,7 @@ class DatasetDocumentSegmentUpdateApi(Resource):
         if not segment:
             raise NotFound("Segment not found.")
         # The role of the current user in the ta table must be admin or owner
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
         try:
             DatasetService.check_dataset_permission(dataset, current_user)
@@ -420,7 +420,7 @@ class ChildChunkAddApi(Resource):
         ).first()
         if not segment:
             raise NotFound("Segment not found.")
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
         # check embedding model setting
         if dataset.indexing_technique == "high_quality":
@@ -520,7 +520,7 @@ class ChildChunkAddApi(Resource):
         if not segment:
             raise NotFound("Segment not found.")
         # The role of the current user in the ta table must be admin, owner, or editor
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
         try:
             DatasetService.check_dataset_permission(dataset, current_user)
@@ -570,7 +570,7 @@ class ChildChunkUpdateApi(Resource):
         if not child_chunk:
             raise NotFound("Child chunk not found.")
         # The role of the current user in the ta table must be admin or owner
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
         try:
             DatasetService.check_dataset_permission(dataset, current_user)
@@ -614,7 +614,7 @@ class ChildChunkUpdateApi(Resource):
         if not child_chunk:
             raise NotFound("Child chunk not found.")
         # The role of the current user in the ta table must be admin or owner
-        if not current_user.is_editor:
+        if not current_user.is_dataset_editor:
             raise Forbidden()
         try:
             DatasetService.check_dataset_permission(dataset, current_user)

api/controllers/console/error.py

@@ -46,6 +46,18 @@ class NotAllowedCreateWorkspace(BaseHTTPException):
     code = 400
 
 
+class WorkspaceMembersLimitExceeded(BaseHTTPException):
+    error_code = "limit_exceeded"
+    description = "Unable to add member because the maximum workspace's member limit was exceeded"
+    code = 400
+
+
+class WorkspacesLimitExceeded(BaseHTTPException):
+    error_code = "limit_exceeded"
+    description = "Unable to create workspace because the maximum workspace limit was exceeded"
+    code = 400
+
+
 class AccountBannedError(BaseHTTPException):
     error_code = "account_banned"
     description = "Account is banned."

api/controllers/console/explore/error.py

@@ -23,3 +23,9 @@ class AppSuggestedQuestionsAfterAnswerDisabledError(BaseHTTPException):
     error_code = "app_suggested_questions_after_answer_disabled"
     description = "Function Suggested questions after answer disabled."
     code = 403
+
+
+class AppAccessDeniedError(BaseHTTPException):
+    error_code = "access_denied"
+    description = "App access denied."
+    code = 403

api/controllers/console/explore/installed_app.py

@@ -1,20 +1,26 @@
+import logging
 from datetime import UTC, datetime
 from typing import Any
 
 from flask import request
 from flask_login import current_user  # type: ignore
-from flask_restful import Resource, inputs, marshal_with, reqparse  # type: ignore
+from flask_restful import (Resource, inputs, marshal_with,  # type: ignore
+                           reqparse)
 from sqlalchemy import and_
 from werkzeug.exceptions import BadRequest, Forbidden, NotFound
 
 from controllers.console import api
 from controllers.console.explore.wraps import InstalledAppResource
-from controllers.console.wraps import account_initialization_required, cloud_edition_billing_resource_check
+from controllers.console.wraps import (account_initialization_required,
+                                       cloud_edition_billing_resource_check)
 from extensions.ext_database import db
 from fields.installed_app_fields import installed_app_list_fields
 from libs.login import login_required
 from models import App, InstalledApp, RecommendedApp
 from services.account_service import TenantService
+from services.app_service import AppService
+from services.enterprise.enterprise_service import EnterpriseService
+from services.feature_service import FeatureService
 
 
 class InstalledAppsListApi(Resource):
@@ -48,6 +54,30 @@ class InstalledAppsListApi(Resource):
             for installed_app in installed_apps
             if installed_app.app is not None
         ]
+
+        # filter out apps that user doesn't have access to
+        if FeatureService.get_system_features().webapp_auth.enabled:
+            user_id = current_user.id
+            res = []
+            app_ids = [installed_app["app"].id for installed_app in installed_app_list]
+            webapp_settings = EnterpriseService.WebAppAuth.batch_get_app_access_mode_by_id(app_ids)
+            for installed_app in installed_app_list:
+                webapp_setting = webapp_settings.get(installed_app["app"].id)
+                if not webapp_setting:
+                    continue
+                if webapp_setting.access_mode == "sso_verified":
+                    continue
+                app_code = AppService.get_app_code_by_id(str(installed_app["app"].id))
+                if EnterpriseService.WebAppAuth.is_user_allowed_to_access_webapp(
+                    user_id=user_id,
+                    app_code=app_code,
+                ):
+                    res.append(installed_app)
+            installed_app_list = res
+            logging.info(
+                f"installed_app_list: {installed_app_list}, user_id: {user_id}"
+            )
+
         installed_app_list.sort(
             key=lambda app: (
                 -app["is_pinned"],

api/controllers/console/explore/wraps.py

@@ -4,10 +4,14 @@ from flask_login import current_user  # type: ignore
 from flask_restful import Resource  # type: ignore
 from werkzeug.exceptions import NotFound
 
+from controllers.console.explore.error import AppAccessDeniedError
 from controllers.console.wraps import account_initialization_required
 from extensions.ext_database import db
 from libs.login import login_required
 from models import InstalledApp
+from services.app_service import AppService
+from services.enterprise.enterprise_service import EnterpriseService
+from services.feature_service import FeatureService
 
 
 def installed_app_required(view=None):
@@ -48,6 +52,30 @@ def installed_app_required(view=None):
     return decorator
 
 
+def user_allowed_to_access_app(view=None):
+    def decorator(view):
+        @wraps(view)
+        def decorated(installed_app: InstalledApp, *args, **kwargs):
+            feature = FeatureService.get_system_features()
+            if feature.webapp_auth.enabled:
+                app_id = installed_app.app_id
+                app_code = AppService.get_app_code_by_id(app_id)
+                res = EnterpriseService.WebAppAuth.is_user_allowed_to_access_webapp(
+                    user_id=str(current_user.id),
+                    app_code=app_code,
+                )
+                if not res:
+                    raise AppAccessDeniedError()
+
+            return view(installed_app, *args, **kwargs)
+
+        return decorated
+    if view:
+        return decorator(view)
+    return decorator
+
+
 class InstalledAppResource(Resource):
     # must be reversed if there are multiple decorators
-    method_decorators = [installed_app_required, account_initialization_required, login_required]
+
+    method_decorators = [user_allowed_to_access_app, installed_app_required, account_initialization_required, login_required]

api/controllers/console/workspace/members.py

@@ -6,6 +6,7 @@ from flask_restful import Resource, abort, marshal_with, reqparse  # type: ignor
 import services
 from configs import dify_config
 from controllers.console import api
+from controllers.console.error import WorkspaceMembersLimitExceeded
 from controllers.console.wraps import (
     account_initialization_required,
     cloud_edition_billing_resource_check,
@@ -17,6 +18,7 @@ from libs.login import login_required
 from models.account import Account, TenantAccountRole
 from services.account_service import RegisterService, TenantService
 from services.errors.account import AccountAlreadyInTenantError
+from services.feature_service import FeatureService
 
 
 class MemberListApi(Resource):
@@ -54,6 +56,12 @@ class MemberInviteEmailApi(Resource):
         inviter = current_user
         invitation_results = []
         console_web_url = dify_config.CONSOLE_WEB_URL
+
+        workspace_members = FeatureService.get_features(tenant_id=inviter.current_tenant.id).workspace_members
+
+        if not workspace_members.is_available(len(invitee_emails)):
+            raise WorkspaceMembersLimitExceeded()
+
         for invitee_email in invitee_emails:
             try:
                 token = RegisterService.invite_new_member(
@@ -71,7 +79,6 @@ class MemberInviteEmailApi(Resource):
                 invitation_results.append(
                     {"status": "success", "email": invitee_email, "url": f"{console_web_url}/signin"}
                 )
-                break
             except Exception as e:
                 invitation_results.append({"status": "failed", "email": invitee_email, "message": str(e)})
 

api/controllers/console/wraps.py

@@ -11,7 +11,8 @@ from models.model import DifySetup
 from services.feature_service import FeatureService, LicenseStatus
 from services.operation_service import OperationService
 
-from .error import NotInitValidateError, NotSetupError, UnauthorizedAndForceLogout
+from .error import (NotInitValidateError, NotSetupError,
+                    UnauthorizedAndForceLogout)
 
 
 def account_initialization_required(view):
@@ -39,6 +40,28 @@ def only_edition_cloud(view):
     return decorated
 
 
+def only_edition_enterprise(view):
+    @wraps(view)
+    def decorated(*args, **kwargs):
+        if not dify_config.ENTERPRISE_ENABLED:
+            abort(404)
+
+        return view(*args, **kwargs)
+
+    return decorated
+
+
+def only_edition_self_hosted(view):
+    @wraps(view)
+    def decorated(*args, **kwargs):
+        if not dify_config.ENTERPRISE_ENABLED:
+            abort(404)
+
+        return view(*args, **kwargs)
+
+    return decorated
+
+
 def only_edition_self_hosted(view):
     @wraps(view)
     def decorated(*args, **kwargs):

api/controllers/inner_api/__init__.py

@@ -5,4 +5,5 @@ from libs.external_api import ExternalApi
 bp = Blueprint("inner_api", __name__, url_prefix="/inner/api")
 api = ExternalApi(bp)
 
+from . import mail
 from .workspace import workspace

api/controllers/inner_api/mail.py

@@ -0,0 +1,27 @@
+from flask_restful import (
+    Resource,  # type: ignore
+    reqparse,
+)
+
+from controllers.console.wraps import setup_required
+from controllers.inner_api import api
+from controllers.inner_api.wraps import inner_api_only
+from services.enterprise.mail_service import DifyMail, EnterpriseMailService
+
+
+class EnterpriseMail(Resource):
+    @setup_required
+    @inner_api_only
+    def post(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("to", type=str, action="append", required=True)
+        parser.add_argument("subject", type=str, required=True)
+        parser.add_argument("body", type=str, required=True)
+        parser.add_argument("substitutions", type=dict, required=False)
+        args = parser.parse_args()
+
+        EnterpriseMailService.send_mail(DifyMail(**args))
+        return {"message": "success"}, 200
+
+
+api.add_resource(EnterpriseMail, "/enterprise/mail")

api/controllers/web/__init__.py

@@ -15,4 +15,17 @@ api.add_resource(FileApi, "/files/upload")
 api.add_resource(RemoteFileInfoApi, "/remote-files/<path:url>")
 api.add_resource(RemoteFileUploadApi, "/remote-files/upload")
 
-from . import app, audio, completion, conversation, feature, message, passport, saved_message, site, workflow
+from . import (
+    app,
+    audio,
+    completion,
+    conversation,
+    feature,
+    forgot_password,
+    login,
+    message,
+    passport,
+    saved_message,
+    site,
+    workflow,
+)

api/controllers/web/app.py

@@ -1,12 +1,18 @@
-from flask_restful import marshal_with  # type: ignore
+
+from flask import request
+from flask_restful import Resource, marshal_with, reqparse  # type: ignore
 
 from controllers.common import fields
 from controllers.common import helpers as controller_helpers
 from controllers.web import api
 from controllers.web.error import AppUnavailableError
 from controllers.web.wraps import WebApiResource
+from libs.passport import PassportService
 from models.model import App, AppMode
 from services.app_service import AppService
+from services.enterprise.enterprise_service import EnterpriseService
+from services.feature_service import FeatureService
+from services.webapp_auth_service import WebAppAuthService
 
 
 class AppParameterApi(WebApiResource):
@@ -42,5 +48,65 @@ class AppMeta(WebApiResource):
         return AppService().get_app_meta(app_model)
 
 
+class AppAccessMode(Resource):
+    def get(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("appId", type=str, required=False, location="args")
+        parser.add_argument("appCode", type=str, required=False, location="args")
+        args = parser.parse_args()
+
+        features = FeatureService.get_system_features()
+        if not features.webapp_auth.enabled:
+            return {"accessMode": "public"}
+
+        app_id = args.get("appId")
+        if args.get("appCode"):
+            app_code = args["appCode"]
+            app_id = AppService.get_app_id_by_code(app_code)
+
+        if not app_id:
+            raise ValueError("appId or appCode must be provided")
+
+        res = EnterpriseService.WebAppAuth.get_app_access_mode_by_id(app_id)
+
+        return {"accessMode": res.access_mode}
+
+
+class AppWebAuthPermission(Resource):
+    def get(self):
+        user_id = "visitor"
+        try:
+            auth_header = request.headers.get("Authorization")
+            if auth_header is None:
+                raise
+            if " " not in auth_header:
+                raise
+
+            auth_scheme, tk = auth_header.split(None, 1)
+            auth_scheme = auth_scheme.lower()
+            if auth_scheme != "bearer":
+                raise
+
+            decoded = PassportService().verify(tk)
+            user_id = decoded.get("user_id", "visitor")
+        except Exception as e:
+            pass
+
+        parser = reqparse.RequestParser()
+        parser.add_argument("appId", type=str, required=True, location="args")
+        args = parser.parse_args()
+
+        app_id = args["appId"]
+        app_code = AppService.get_app_code_by_id(app_id)
+
+        res = True
+        if WebAppAuthService.is_app_require_permission_check(app_id=app_id):
+            res = EnterpriseService.WebAppAuth.is_user_allowed_to_access_webapp(str(user_id), app_code)
+        return {"result": res}
+
+
 api.add_resource(AppParameterApi, "/parameters")
 api.add_resource(AppMeta, "/meta")
+# webapp auth apis
+api.add_resource(AppAccessMode, "/webapp/access-mode")
+api.add_resource(AppWebAuthPermission, "/webapp/permission")

api/controllers/web/error.py

@@ -121,9 +121,15 @@ class UnsupportedFileTypeError(BaseHTTPException):
     code = 415
 
 
-class WebSSOAuthRequiredError(BaseHTTPException):
+class WebAppAuthRequiredError(BaseHTTPException):
     error_code = "web_sso_auth_required"
-    description = "Web SSO authentication required."
+    description = "Web app authentication required."
+    code = 401
+
+
+class WebAppAuthAccessDeniedError(BaseHTTPException):
+    error_code = "web_app_access_denied"
+    description = "You do not have permission to access this web app."
     code = 401
 
 

api/controllers/web/forgot_password.py

@@ -0,0 +1,147 @@
+import base64
+import secrets
+
+from flask import request
+from flask_restful import Resource, reqparse
+from sqlalchemy import select
+from sqlalchemy.orm import Session
+
+from controllers.console.auth.error import (
+    EmailCodeError,
+    EmailPasswordResetLimitError,
+    InvalidEmailError,
+    InvalidTokenError,
+    PasswordMismatchError,
+)
+from controllers.console.error import AccountNotFound, EmailSendIpLimitError
+from controllers.console.wraps import email_password_login_enabled, only_edition_enterprise, setup_required
+from controllers.web import api
+from extensions.ext_database import db
+from libs.helper import email, extract_remote_ip
+from libs.password import hash_password, valid_password
+from models.account import Account
+from services.account_service import AccountService
+
+
+class ForgotPasswordSendEmailApi(Resource):
+    @only_edition_enterprise
+    @setup_required
+    @email_password_login_enabled
+    def post(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("email", type=email, required=True, location="json")
+        parser.add_argument("language", type=str, required=False, location="json")
+        args = parser.parse_args()
+
+        ip_address = extract_remote_ip(request)
+        if AccountService.is_email_send_ip_limit(ip_address):
+            raise EmailSendIpLimitError()
+
+        if args["language"] is not None and args["language"] == "zh-Hans":
+            language = "zh-Hans"
+        else:
+            language = "en-US"
+
+        with Session(db.engine) as session:
+            account = session.execute(select(Account).filter_by(email=args["email"])).scalar_one_or_none()
+        token = None
+        if account is None:
+            raise AccountNotFound()
+        else:
+            token = AccountService.send_reset_password_email(account=account, email=args["email"], language=language)
+
+        return {"result": "success", "data": token}
+
+
+class ForgotPasswordCheckApi(Resource):
+    @only_edition_enterprise
+    @setup_required
+    @email_password_login_enabled
+    def post(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("email", type=str, required=True, location="json")
+        parser.add_argument("code", type=str, required=True, location="json")
+        parser.add_argument("token", type=str, required=True, nullable=False, location="json")
+        args = parser.parse_args()
+
+        user_email = args["email"]
+
+        is_forgot_password_error_rate_limit = AccountService.is_forgot_password_error_rate_limit(args["email"])
+        if is_forgot_password_error_rate_limit:
+            raise EmailPasswordResetLimitError()
+
+        token_data = AccountService.get_reset_password_data(args["token"])
+        if token_data is None:
+            raise InvalidTokenError()
+
+        if user_email != token_data.get("email"):
+            raise InvalidEmailError()
+
+        if args["code"] != token_data.get("code"):
+            AccountService.add_forgot_password_error_rate_limit(args["email"])
+            raise EmailCodeError()
+
+        # Verified, revoke the first token
+        AccountService.revoke_reset_password_token(args["token"])
+
+        # Refresh token data by generating a new token
+        _, new_token = AccountService.generate_reset_password_token(
+            user_email, code=args["code"], additional_data={"phase": "reset"}
+        )
+
+        AccountService.reset_forgot_password_error_rate_limit(args["email"])
+        return {"is_valid": True, "email": token_data.get("email"), "token": new_token}
+
+
+class ForgotPasswordResetApi(Resource):
+    @only_edition_enterprise
+    @setup_required
+    @email_password_login_enabled
+    def post(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("token", type=str, required=True, nullable=False, location="json")
+        parser.add_argument("new_password", type=valid_password, required=True, nullable=False, location="json")
+        parser.add_argument("password_confirm", type=valid_password, required=True, nullable=False, location="json")
+        args = parser.parse_args()
+
+        # Validate passwords match
+        if args["new_password"] != args["password_confirm"]:
+            raise PasswordMismatchError()
+
+        # Validate token and get reset data
+        reset_data = AccountService.get_reset_password_data(args["token"])
+        if not reset_data:
+            raise InvalidTokenError()
+        # Must use token in reset phase
+        if reset_data.get("phase", "") != "reset":
+            raise InvalidTokenError()
+
+        # Revoke token to prevent reuse
+        AccountService.revoke_reset_password_token(args["token"])
+
+        # Generate secure salt and hash password
+        salt = secrets.token_bytes(16)
+        password_hashed = hash_password(args["new_password"], salt)
+
+        email = reset_data.get("email", "")
+
+        with Session(db.engine) as session:
+            account = session.execute(select(Account).filter_by(email=email)).scalar_one_or_none()
+
+            if account:
+                self._update_existing_account(account, password_hashed, salt, session)
+            else:
+                raise AccountNotFound()
+
+        return {"result": "success"}
+
+    def _update_existing_account(self, account, password_hashed, salt, session):
+        # Update existing account credentials
+        account.password = base64.b64encode(password_hashed).decode()
+        account.password_salt = base64.b64encode(salt).decode()
+        session.commit()
+
+
+api.add_resource(ForgotPasswordSendEmailApi, "/forgot-password")
+api.add_resource(ForgotPasswordCheckApi, "/forgot-password/validity")
+api.add_resource(ForgotPasswordResetApi, "/forgot-password/resets")

api/controllers/web/login.py

@@ -0,0 +1,109 @@
+import services
+from controllers.console.auth.error import (EmailCodeError,
+                                            EmailOrPasswordMismatchError,
+                                            InvalidEmailError)
+from controllers.console.error import AccountBannedError, AccountNotFound
+from controllers.console.wraps import only_edition_enterprise, setup_required
+from controllers.web import api
+from flask_restful import Resource, reqparse
+from jwt import InvalidTokenError  # type: ignore
+from libs.helper import email
+from libs.password import valid_password
+from services.account_service import AccountService
+from services.webapp_auth_service import WebAppAuthService
+
+
+class LoginApi(Resource):
+    """Resource for web app email/password login."""
+
+    @setup_required
+    @only_edition_enterprise
+    def post(self):
+        """Authenticate user and login."""
+        parser = reqparse.RequestParser()
+        parser.add_argument("email", type=email, required=True, location="json")
+        parser.add_argument("password", type=valid_password, required=True, location="json")
+        args = parser.parse_args()
+
+        try:
+            account = WebAppAuthService.authenticate(args["email"], args["password"])
+        except services.errors.account.AccountLoginError:
+            raise AccountBannedError()
+        except services.errors.account.AccountPasswordError:
+            raise EmailOrPasswordMismatchError()
+        except services.errors.account.AccountNotFoundError:
+            raise AccountNotFound()
+
+        token = WebAppAuthService.login(account=account)
+        return {"result": "success", "data": {"access_token": token}}
+
+
+# class LogoutApi(Resource):
+#     @setup_required
+#     def get(self):
+#         account = cast(Account, flask_login.current_user)
+#         if isinstance(account, flask_login.AnonymousUserMixin):
+#             return {"result": "success"}
+#         flask_login.logout_user()
+#         return {"result": "success"}
+
+
+class EmailCodeLoginSendEmailApi(Resource):
+    @setup_required
+    @only_edition_enterprise
+    def post(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("email", type=email, required=True, location="json")
+        parser.add_argument("language", type=str, required=False, location="json")
+        args = parser.parse_args()
+
+        if args["language"] is not None and args["language"] == "zh-Hans":
+            language = "zh-Hans"
+        else:
+            language = "en-US"
+
+        account = WebAppAuthService.get_user_through_email(args["email"])
+        if account is None:
+            raise AccountNotFound()
+        else:
+            token = WebAppAuthService.send_email_code_login_email(account=account, language=language)
+
+        return {"result": "success", "data": token}
+
+
+class EmailCodeLoginApi(Resource):
+    @setup_required
+    @only_edition_enterprise
+    def post(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("email", type=str, required=True, location="json")
+        parser.add_argument("code", type=str, required=True, location="json")
+        parser.add_argument("token", type=str, required=True, location="json")
+        args = parser.parse_args()
+
+        user_email = args["email"]
+
+        token_data = WebAppAuthService.get_email_code_login_data(args["token"])
+        if token_data is None:
+            raise InvalidTokenError()
+
+        if token_data["email"] != args["email"]:
+            raise InvalidEmailError()
+
+        if token_data["code"] != args["code"]:
+            raise EmailCodeError()
+
+        WebAppAuthService.revoke_email_code_login_token(args["token"])
+        account = WebAppAuthService.get_user_through_email(user_email)
+        if not account:
+            raise AccountNotFound()
+
+        token = WebAppAuthService.login(account=account)
+        AccountService.reset_login_error_rate_limit(args["email"])
+        return {"result": "success", "data": {"access_token": token}}
+
+
+api.add_resource(LoginApi, "/login")
+# api.add_resource(LogoutApi, "/logout")
+api.add_resource(EmailCodeLoginSendEmailApi, "/email-code-login")
+api.add_resource(EmailCodeLoginApi, "/email-code-login/validity")

api/controllers/web/passport.py

@@ -1,16 +1,18 @@
 import uuid
+from datetime import UTC, datetime, timedelta
 
-from flask import request
-from flask_restful import Resource  # type: ignore
-from werkzeug.exceptions import NotFound, Unauthorized
-
+from configs import dify_config
 from controllers.web import api
-from controllers.web.error import WebSSOAuthRequiredError
+from controllers.web.error import WebAppAuthRequiredError
 from extensions.ext_database import db
+from flask import request
+from flask_restful import Resource
 from libs.passport import PassportService
 from models.model import App, EndUser, Site
 from services.enterprise.enterprise_service import EnterpriseService
 from services.feature_service import FeatureService
+from services.webapp_auth_service import WebAppAuthService, WebAppAuthType
+from werkzeug.exceptions import NotFound, Unauthorized
 
 
 class PassportResource(Resource):
@@ -19,13 +21,23 @@ class PassportResource(Resource):
     def get(self):
         system_features = FeatureService.get_system_features()
         app_code = request.headers.get("X-App-Code")
+        web_app_access_token = request.args.get("web_app_access_token")
+
         if app_code is None:
             raise Unauthorized("X-App-Code header is missing.")
 
-        if system_features.sso_enforced_for_web:
-            app_web_sso_enabled = EnterpriseService.get_app_web_sso_enabled(app_code).get("enabled", False)
-            if app_web_sso_enabled:
-                raise WebSSOAuthRequiredError()
+        # exchange token for enterprise logined web user
+        enterprise_user_decoded = decode_enterprise_webapp_user_id(web_app_access_token)
+        if enterprise_user_decoded:
+            # a web user has already logged in, exchange a token for this app without redirecting to the login page
+            return exchange_token_for_existing_web_user(
+                app_code=app_code, enterprise_user_decoded=enterprise_user_decoded
+            )
+
+        if system_features.webapp_auth.enabled:
+            app_settings = EnterpriseService.WebAppAuth.get_app_access_mode_by_code(app_code=app_code)
+            if not app_settings or not app_settings.access_mode == "public":
+                raise WebAppAuthRequiredError()
 
         # get site from db and check if it is normal
         site = db.session.query(Site).filter(Site.code == app_code, Site.status == "normal").first()
@@ -65,6 +77,128 @@ class PassportResource(Resource):
 api.add_resource(PassportResource, "/passport")
 
 
+def decode_enterprise_webapp_user_id(jwt_token: str | None):
+    """
+    Decode the enterprise user session from the Authorization header.
+    """
+    if not jwt_token:
+        return None
+
+    decoded = PassportService().verify(jwt_token)
+    source = decoded.get("token_source")
+    if not source or source != "webapp_login_token":
+        raise Unauthorized("Invalid token source. Expected 'webapp_login_token'.")
+    return decoded
+
+
+def exchange_token_for_existing_web_user(app_code: str, enterprise_user_decoded: dict):
+    """
+    Exchange a token for an existing web user session.
+    """
+    user_id = enterprise_user_decoded.get("user_id")
+    end_user_id = enterprise_user_decoded.get("end_user_id")
+    session_id = enterprise_user_decoded.get("session_id")
+    user_auth_type = enterprise_user_decoded.get("auth_type")
+    if not user_auth_type:
+        raise Unauthorized("Missing auth_type in the token.")
+
+    site = db.session.query(Site).filter(Site.code == app_code, Site.status == "normal").first()
+    if not site:
+        raise NotFound()
+
+    app_model = db.session.query(App).filter(App.id == site.app_id).first()
+    if not app_model or app_model.status != "normal" or not app_model.enable_site:
+        raise NotFound()
+
+    app_auth_type = WebAppAuthService.get_app_auth_type(app_code=app_code)
+
+    if app_auth_type == WebAppAuthType.PUBLIC:
+        return _exchange_for_public_app_token(app_model, site, enterprise_user_decoded)
+    elif app_auth_type == WebAppAuthType.EXTERNAL and user_auth_type != "external":
+        raise WebAppAuthRequiredError("Please login as external user.")
+    elif app_auth_type == WebAppAuthType.INTERNAL and user_auth_type != "internal":
+        raise WebAppAuthRequiredError("Please login as internal user.")
+
+    end_user = None
+    if end_user_id:
+        end_user = db.session.query(EndUser).filter(EndUser.id == end_user_id).first()
+    if session_id:
+        end_user = (
+            db.session.query(EndUser)
+            .filter(
+                EndUser.session_id == session_id,
+                EndUser.tenant_id == app_model.tenant_id,
+                EndUser.app_id == app_model.id,
+            )
+            .first()
+        )
+    if not end_user:
+        if not session_id:
+            raise NotFound("Missing session_id for existing web user.")
+        end_user = EndUser(
+            tenant_id=app_model.tenant_id,
+            app_id=app_model.id,
+            type="browser",
+            is_anonymous=True,
+            session_id=session_id,
+        )
+        db.session.add(end_user)
+        db.session.commit()
+    exp_dt = datetime.now(UTC) + timedelta(hours=dify_config.ACCESS_TOKEN_EXPIRE_MINUTES * 24)
+    exp = int(exp_dt.timestamp())
+    payload = {
+        "iss": site.id,
+        "sub": "Web API Passport",
+        "app_id": site.app_id,
+        "app_code": site.code,
+        "user_id": user_id,
+        "end_user_id": end_user.id,
+        "auth_type": user_auth_type,
+        "granted_at": int(datetime.now(UTC).timestamp()),
+        "token_source": "webapp",
+        "exp": exp,
+    }
+    token: str = PassportService().issue(payload)
+    return {
+        "access_token": token,
+    }
+
+
+def _exchange_for_public_app_token(app_model, site, token_decoded):
+    user_id = token_decoded.get("user_id")
+    end_user = None
+    if user_id:
+        end_user = db.session.query(EndUser).filter(
+            EndUser.app_id == app_model.id, EndUser.session_id == user_id
+        ).first()
+
+    if not end_user:
+        end_user = EndUser(
+            tenant_id=app_model.tenant_id,
+            app_id=app_model.id,
+            type="browser",
+            is_anonymous=True,
+            session_id=generate_session_id(),
+        )
+
+        db.session.add(end_user)
+        db.session.commit()
+
+    payload = {
+        "iss": site.app_id,
+        "sub": "Web API Passport",
+        "app_id": site.app_id,
+        "app_code": site.code,
+        "end_user_id": end_user.id,
+    }
+
+    tk = PassportService().issue(payload)
+
+    return {
+        "access_token": tk,
+    }
+
+
 def generate_session_id():
     """
     Generate a unique session ID.

api/controllers/web/wraps.py

@@ -1,15 +1,18 @@
+from datetime import UTC, datetime
 from functools import wraps
 
+from controllers.web.error import (WebAppAuthAccessDeniedError,
+                                   WebAppAuthRequiredError)
+from extensions.ext_database import db
 from flask import request
 from flask_restful import Resource  # type: ignore
-from werkzeug.exceptions import BadRequest, NotFound, Unauthorized
-
-from controllers.web.error import WebSSOAuthRequiredError
-from extensions.ext_database import db
 from libs.passport import PassportService
 from models.model import App, EndUser, Site
-from services.enterprise.enterprise_service import EnterpriseService
+from services.enterprise.enterprise_service import (EnterpriseService,
+                                                    WebAppSettings)
 from services.feature_service import FeatureService
+from services.webapp_auth_service import WebAppAuthService
+from werkzeug.exceptions import BadRequest, NotFound, Unauthorized
 
 
 def validate_jwt_token(view=None):
@@ -45,7 +48,8 @@ def decode_jwt_token():
             raise Unauthorized("Invalid Authorization header format. Expected 'Bearer <api-key>' format.")
         decoded = PassportService().verify(tk)
         app_code = decoded.get("app_code")
-        app_model = db.session.query(App).filter(App.id == decoded["app_id"]).first()
+        app_id = decoded.get("app_id")
+        app_model = db.session.query(App).filter(App.id == app_id).first()
         site = db.session.query(Site).filter(Site.code == app_code).first()
         if not app_model:
             raise NotFound()
@@ -53,39 +57,90 @@ def decode_jwt_token():
             raise BadRequest("Site URL is no longer valid.")
         if app_model.enable_site is False:
             raise BadRequest("Site is disabled.")
-        end_user = db.session.query(EndUser).filter(EndUser.id == decoded["end_user_id"]).first()
+        end_user_id = decoded.get("end_user_id")
+        end_user = db.session.query(EndUser).filter(EndUser.id == end_user_id).first()
         if not end_user:
             raise NotFound()
 
-        _validate_web_sso_token(decoded, system_features, app_code)
+        # for enterprise webapp auth
+        app_web_auth_enabled = False
+        webapp_settings = None
+        if system_features.webapp_auth.enabled:
+            webapp_settings = EnterpriseService.WebAppAuth.get_app_access_mode_by_code(app_code=app_code)
+            if not webapp_settings:
+                raise NotFound("Web app settings not found.")
+            app_web_auth_enabled = webapp_settings.access_mode != "public"
+
+        _validate_webapp_token(decoded, app_web_auth_enabled, system_features.webapp_auth.enabled)
+        _validate_user_accessibility(
+            decoded, app_code, app_web_auth_enabled, system_features.webapp_auth.enabled, webapp_settings
+        )
 
         return app_model, end_user
     except Unauthorized as e:
-        if system_features.sso_enforced_for_web:
-            app_web_sso_enabled = EnterpriseService.get_app_web_sso_enabled(app_code).get("enabled", False)
-            if app_web_sso_enabled:
-                raise WebSSOAuthRequiredError()
+        if system_features.webapp_auth.enabled:
+            if not app_code:
+                raise Unauthorized("Please re-login to access the web app.")
+            app_web_auth_enabled = (
+                EnterpriseService.WebAppAuth.get_app_access_mode_by_code(app_code=app_code).access_mode != "public"
+            )
+            if app_web_auth_enabled:
+                raise WebAppAuthRequiredError()
 
         raise Unauthorized(e.description)
 
 
-def _validate_web_sso_token(decoded, system_features, app_code):
-    app_web_sso_enabled = False
-
-    # Check if SSO is enforced for web, and if the token source is not SSO, raise an error and redirect to SSO login
-    if system_features.sso_enforced_for_web:
-        app_web_sso_enabled = EnterpriseService.get_app_web_sso_enabled(app_code).get("enabled", False)
-        if app_web_sso_enabled:
-            source = decoded.get("token_source")
-            if not source or source != "sso":
-                raise WebSSOAuthRequiredError()
-
-    # Check if SSO is not enforced for web, and if the token source is SSO,
-    # raise an error and redirect to normal passport login
-    if not system_features.sso_enforced_for_web or not app_web_sso_enabled:
+def _validate_webapp_token(decoded, app_web_auth_enabled: bool, system_webapp_auth_enabled: bool):
+    # Check if authentication is enforced for web app, and if the token source is not webapp,
+    # raise an error and redirect to login
+    if system_webapp_auth_enabled and app_web_auth_enabled:
         source = decoded.get("token_source")
-        if source and source == "sso":
-            raise Unauthorized("sso token expired.")
+        if not source or source != "webapp":
+            raise WebAppAuthRequiredError()
+
+    # Check if authentication is not enforced for web, and if the token source is webapp,
+    # raise an error and redirect to normal passport login
+    if not system_webapp_auth_enabled or not app_web_auth_enabled:
+        source = decoded.get("token_source")
+        if source and source == "webapp":
+            raise Unauthorized("webapp token expired.")
+
+
+def _validate_user_accessibility(
+    decoded,
+    app_code,
+    app_web_auth_enabled: bool,
+    system_webapp_auth_enabled: bool,
+    webapp_settings: WebAppSettings | None,
+):
+    if system_webapp_auth_enabled and app_web_auth_enabled:
+        # Check if the user is allowed to access the web app
+        user_id = decoded.get("user_id")
+        if not user_id:
+            raise WebAppAuthRequiredError()
+
+        if not webapp_settings:
+            raise WebAppAuthRequiredError("Web app settings not found.")
+
+        if WebAppAuthService.is_app_require_permission_check(access_mode=webapp_settings.access_mode):
+            if not EnterpriseService.WebAppAuth.is_user_allowed_to_access_webapp(user_id, app_code=app_code):
+                raise WebAppAuthAccessDeniedError()
+
+        auth_type = decoded.get("auth_type")
+        granted_at = decoded.get("granted_at")
+        if not auth_type:
+            raise WebAppAuthAccessDeniedError("Missing auth_type in the token.")
+        if not granted_at:
+            raise WebAppAuthAccessDeniedError("Missing granted_at in the token.")
+        # check if sso has been updated
+        if auth_type == "external":
+            last_update_time = EnterpriseService.get_app_sso_settings_last_update_time()
+            if granted_at and datetime.fromtimestamp(granted_at, tz=UTC) < last_update_time:
+                raise WebAppAuthAccessDeniedError("SSO settings have been updated. Please re-login.")
+        elif auth_type == "internal":
+            last_update_time = EnterpriseService.get_workspace_sso_settings_last_update_time()
+            if granted_at and datetime.fromtimestamp(granted_at, tz=UTC) < last_update_time:
+                raise WebAppAuthAccessDeniedError("SSO settings have been updated. Please re-login.")
 
 
 class WebApiResource(Resource):

api/core/rag/extractor/word_extractor.py

@@ -85,7 +85,7 @@ class WordExtractor(BaseExtractor):
             if "image" in rel.target_ref:
                 image_count += 1
                 if rel.is_external:
-                    url = rel.reltype
+                    url = rel.target_ref
                     response = ssrf_proxy.get(url)
                     if response.status_code == 200:
                         image_ext = mimetypes.guess_extension(response.headers["Content-Type"])

api/extensions/ext_login.py

@@ -35,6 +35,9 @@ def load_user_from_request(request_from_flask_login):
 
     decoded = PassportService().verify(auth_token)
     user_id = decoded.get("user_id")
+    source = decoded.get("token_source")
+    if source:
+        raise Unauthorized("Invalid Authorization token.")
 
     logged_in_account = AccountService.load_logged_in_account(account_id=user_id)
     return logged_in_account

api/fields/app_fields.py

@@ -63,6 +63,7 @@ app_detail_fields = {
     "created_at": TimestampField,
     "updated_by": fields.String,
     "updated_at": TimestampField,
+    "access_mode": fields.String,
 }
 
 prompt_config_fields = {
@@ -98,6 +99,7 @@ app_partial_fields = {
     "updated_by": fields.String,
     "updated_at": TimestampField,
     "tags": fields.List(fields.Nested(tag_fields)),
+    "access_mode": fields.String,
 }
 
 
@@ -170,6 +172,7 @@ app_detail_fields_with_site = {
     "updated_by": fields.String,
     "updated_at": TimestampField,
     "deleted_tools": fields.List(fields.String),
+    "access_mode": fields.String,
 }
 
 app_site_fields = {

api/services/account_service.py

@@ -49,7 +49,7 @@ from services.errors.account import (
     RoleAlreadyAssignedError,
     TenantNotFoundError,
 )
-from services.errors.workspace import WorkSpaceNotAllowedCreateError
+from services.errors.workspace import WorkSpaceNotAllowedCreateError, WorkspacesLimitExceededError
 from services.feature_service import FeatureService
 from tasks.delete_account_task import delete_account_task
 from tasks.mail_account_deletion_task import send_account_deletion_verification_code
@@ -599,6 +599,10 @@ class TenantService:
         if not FeatureService.get_system_features().is_allow_create_workspace and not is_setup:
             raise WorkSpaceNotAllowedCreateError()
 
+        workspaces = FeatureService.get_system_features().license.workspaces
+        if not workspaces.is_available():
+            raise WorkspacesLimitExceededError()
+
         if name:
             tenant = TenantService.create_tenant(name=name, is_setup=is_setup)
         else:
@@ -772,9 +776,11 @@ class TenantService:
     @staticmethod
     def remove_member_from_tenant(tenant: Tenant, account: Account, operator: Account) -> None:
         """Remove member from tenant"""
-        if operator.id == account.id and TenantService.check_member_permission(tenant, operator, account, "remove"):
+        if operator.id == account.id:
             raise CannotOperateSelfError("Cannot operate self.")
 
+        TenantService.check_member_permission(tenant, operator, account, "remove")
+
         ta = TenantAccountJoin.query.filter_by(tenant_id=tenant.id, account_id=account.id).first()
         if not ta:
             raise MemberNotInTenantError("Member not in tenant.")
@@ -889,7 +895,10 @@ class RegisterService:
             if open_id is not None and provider is not None:
                 AccountService.link_account_integrate(provider, open_id, account)
 
-            if FeatureService.get_system_features().is_allow_create_workspace and create_workspace_required:
+            if (FeatureService.get_system_features().is_allow_create_workspace
+                    and create_workspace_required
+                    and FeatureService.get_system_features().license.workspaces.is_available()
+            ):
                 tenant = TenantService.create_tenant(f"{account.name}'s Workspace")
                 TenantService.create_tenant_member(tenant, account, role="owner")
                 account.current_tenant = tenant

api/services/app_service.py

@@ -19,8 +19,10 @@ from core.tools.utils.configuration import ToolParameterConfigurationManager
 from events.app_event import app_was_created
 from extensions.ext_database import db
 from models.account import Account
-from models.model import App, AppMode, AppModelConfig
+from models.model import App, AppMode, AppModelConfig, Site
 from models.tools import ApiToolProvider
+from services.enterprise.enterprise_service import EnterpriseService
+from services.feature_service import FeatureService
 from services.tag_service import TagService
 from tasks.remove_app_and_related_data_task import remove_app_and_related_data_task
 
@@ -152,6 +154,10 @@ class AppService:
 
         app_was_created.send(app, account=account)
 
+        if FeatureService.get_system_features().webapp_auth.enabled:
+            # update web app setting as private
+            EnterpriseService.WebAppAuth.update_app_access_mode(app.id, "private")
+
         return app
 
     def get_app(self, app: App) -> App:
@@ -308,6 +314,10 @@ class AppService:
         db.session.delete(app)
         db.session.commit()
 
+        # clean up web app settings
+        if FeatureService.get_system_features().webapp_auth.enabled:
+            EnterpriseService.WebAppAuth.cleanup_webapp(app.id)
+
         # Trigger asynchronous deletion of app and related data
         remove_app_and_related_data_task.delay(tenant_id=app.tenant_id, app_id=app.id)
 
@@ -374,3 +384,27 @@ class AppService:
                         meta["tool_icons"][tool_name] = {"background": "#252525", "content": "\ud83d\ude01"}
 
         return meta
+
+    @staticmethod
+    def get_app_code_by_id(app_id: str) -> str:
+        """
+        Get app code by app id
+        :param app_id: app id
+        :return: app code
+        """
+        site = db.session.query(Site).filter(Site.app_id == app_id).first()
+        if not site:
+            raise ValueError(f"App with id {app_id} not found")
+        return str(site.code)
+
+    @staticmethod
+    def get_app_id_by_code(app_code: str) -> str:
+        """
+        Get app id by app code
+        :param app_code: app code
+        :return: app id
+        """
+        site = db.session.query(Site).filter(Site.code == app_code).first()
+        if not site:
+            raise ValueError(f"App with code {app_code} not found")
+        return str(site.app_id)

api/services/enterprise/enterprise_service.py

@@ -1,11 +1,114 @@
+
+from datetime import datetime
+
+from pydantic import BaseModel, Field
 from services.enterprise.base import EnterpriseRequest
 
 
+class WebAppSettings(BaseModel):
+    access_mode: str = Field(
+        description="Access mode for the web app. Can be 'public', 'private', 'private_all', 'sso_verified'",
+        default="private",
+        alias="accessMode",
+    )
+
+
 class EnterpriseService:
     @classmethod
     def get_info(cls):
         return EnterpriseRequest.send_request("GET", "/info")
 
     @classmethod
-    def get_app_web_sso_enabled(cls, app_code):
-        return EnterpriseRequest.send_request("GET", f"/app-sso-setting?appCode={app_code}")
+    def get_workspace_info(cls, tenant_id: str):
+        return EnterpriseRequest.send_request("GET", f"/workspace/{tenant_id}/info")
+
+    @classmethod
+    def get_app_sso_settings_last_update_time(cls) -> datetime:
+        data = EnterpriseRequest.send_request("GET", "/sso/app/last-update-time")
+        if not data:
+            raise ValueError("No data found.")
+        try:
+            # parse the UTC timestamp from the response
+            return datetime.fromisoformat(data.replace("Z", "+00:00"))
+        except ValueError as e:
+            raise ValueError(f"Invalid date format: {data}") from e
+
+    @classmethod
+    def get_workspace_sso_settings_last_update_time(cls) -> datetime:
+        data = EnterpriseRequest.send_request("GET", "/sso/workspace/last-update-time")
+        if not data:
+            raise ValueError("No data found.")
+        try:
+            # parse the UTC timestamp from the response
+            return datetime.fromisoformat(data.replace("Z", "+00:00"))
+        except ValueError as e:
+            raise ValueError(f"Invalid date format: {data}") from e
+
+    class WebAppAuth:
+        @classmethod
+        def is_user_allowed_to_access_webapp(cls, user_id: str, app_code: str) -> bool:
+            params = {"userId": user_id, "appCode": app_code}
+            data = EnterpriseRequest.send_request("GET", "/webapp/permission", params=params)
+
+            return data.get("result", False)
+
+        @classmethod
+        def get_app_access_mode_by_id(cls, app_id: str) -> WebAppSettings:
+            if not app_id:
+                raise ValueError("app_id must be provided.")
+            params = {"appId": app_id}
+            data = EnterpriseRequest.send_request("GET", "/webapp/access-mode/id", params=params)
+            if not data:
+                raise ValueError("No data found.")
+            return WebAppSettings(**data)
+
+        @classmethod
+        def batch_get_app_access_mode_by_id(cls, app_ids: list[str]) -> dict[str, WebAppSettings]:
+            if not app_ids:
+                return {}
+            body = {"appIds": app_ids}
+            data: dict[str, str] = EnterpriseRequest.send_request("POST", "/webapp/access-mode/batch/id", json=body)
+            if not data:
+                raise ValueError("No data found.")
+
+            if not isinstance(data["accessModes"], dict):
+                raise ValueError("Invalid data format.")
+
+            ret = {}
+            for key, value in data["accessModes"].items():
+                curr = WebAppSettings()
+                curr.access_mode = value
+                ret[key] = curr
+
+            return ret
+
+        @classmethod
+        def get_app_access_mode_by_code(cls, app_code: str) -> WebAppSettings:
+            if not app_code:
+                raise ValueError("app_code must be provided.")
+            params = {"appCode": app_code}
+            data = EnterpriseRequest.send_request("GET", "/webapp/access-mode/code", params=params)
+            if not data:
+                raise ValueError("No data found.")
+            return WebAppSettings(**data)
+
+        @classmethod
+        def update_app_access_mode(cls, app_id: str, access_mode: str) -> bool:
+            if not app_id:
+                raise ValueError("app_id must be provided.")
+            if access_mode not in ["public", "private", "private_all"]:
+                raise ValueError("access_mode must be either 'public', 'private', or 'private_all'")
+
+            data = {"appId": app_id, "accessMode": access_mode}
+
+            response = EnterpriseRequest.send_request("POST", "/webapp/access-mode", json=data)
+
+            return response.get("result", False)
+
+        @classmethod
+        def cleanup_webapp(cls, app_id: str):
+            if not app_id:
+                raise ValueError("app_id must be provided.")
+
+            body = {"appId": app_id}
+            EnterpriseRequest.send_request("DELETE", "/webapp/clean", json=body)

api/services/enterprise/mail_service.py

@@ -0,0 +1,18 @@
+from pydantic import BaseModel
+
+from tasks.mail_enterprise_task import send_enterprise_email_task
+
+
+class DifyMail(BaseModel):
+    to: list[str]
+    subject: str
+    body: str
+    substitutions: dict[str, str] = {}
+
+
+class EnterpriseMailService:
+    @classmethod
+    def send_mail(cls, mail: DifyMail):
+        send_enterprise_email_task.delay(
+            to=mail.to, subject=mail.subject, body=mail.body, substitutions=mail.substitutions
+        )

api/services/errors/workspace.py

@@ -7,3 +7,7 @@ class WorkSpaceNotAllowedCreateError(BaseServiceError):
 
 class WorkSpaceNotFoundError(BaseServiceError):
     pass
+
+
+class WorkspacesLimitExceededError(BaseServiceError):
+    pass

api/services/feature_service.py

@@ -1,6 +1,6 @@
 from enum import StrEnum
 
-from pydantic import BaseModel, ConfigDict
+from pydantic import BaseModel, ConfigDict, Field
 
 from configs import dify_config
 from services.billing_service import BillingService
@@ -22,6 +22,32 @@ class LimitationModel(BaseModel):
     limit: int = 0
 
 
+class LicenseLimitationModel(BaseModel):
+    """
+    - enabled: whether this limit is enforced
+    - size: current usage count
+    - limit: maximum allowed count; 0 means unlimited
+    """
+
+    enabled: bool = Field(False, description="Whether this limit is currently active")
+    size: int = Field(0, description="Number of resources already consumed")
+    limit: int = Field(0, description="Maximum number of resources allowed; 0 means no limit")
+
+    def is_available(self, required: int = 1) -> bool:
+        """
+        Determine whether the requested amount can be allocated.
+
+        Returns True if:
+         - this limit is not active, or
+         - the limit is zero (unlimited), or
+         - there is enough remaining quota.
+        """
+        if not self.enabled or self.limit == 0:
+            return True
+
+        return (self.limit - self.size) >= required
+
+
 class LicenseStatus(StrEnum):
     NONE = "none"
     INACTIVE = "inactive"
@@ -34,6 +60,27 @@ class LicenseStatus(StrEnum):
 class LicenseModel(BaseModel):
     status: LicenseStatus = LicenseStatus.NONE
     expired_at: str = ""
+    workspaces: LicenseLimitationModel = LicenseLimitationModel(enabled=False, size=0, limit=0)
+
+
+class BrandingModel(BaseModel):
+    enabled: bool = False
+    application_title: str = ""
+    login_page_logo: str = ""
+    workspace_logo: str = ""
+    favicon: str = ""
+
+
+class WebAppAuthSSOModel(BaseModel):
+    protocol: str = ""
+
+
+class WebAppAuthModel(BaseModel):
+    enabled: bool = False
+    allow_sso: bool = False
+    sso_config: WebAppAuthSSOModel = WebAppAuthSSOModel()
+    allow_email_code_login: bool = False
+    allow_email_password_login: bool = False
 
 
 class FeatureModel(BaseModel):
@@ -47,6 +94,8 @@ class FeatureModel(BaseModel):
     can_replace_logo: bool = False
     model_load_balancing_enabled: bool = False
     dataset_operator_enabled: bool = False
+    webapp_copyright_enabled: bool = False
+    workspace_members: LicenseLimitationModel = LicenseLimitationModel(enabled=False, size=0, limit=0)
 
     # pydantic configs
     model_config = ConfigDict(protected_namespaces=())
@@ -55,9 +104,6 @@ class FeatureModel(BaseModel):
 class SystemFeatureModel(BaseModel):
     sso_enforced_for_signin: bool = False
     sso_enforced_for_signin_protocol: str = ""
-    sso_enforced_for_web: bool = False
-    sso_enforced_for_web_protocol: str = ""
-    enable_web_sso_switch_component: bool = False
     enable_email_code_login: bool = False
     enable_email_password_login: bool = True
     enable_social_oauth_login: bool = False
@@ -65,6 +111,8 @@ class SystemFeatureModel(BaseModel):
     is_allow_create_workspace: bool = False
     is_email_setup: bool = False
     license: LicenseModel = LicenseModel()
+    branding: BrandingModel = BrandingModel()
+    webapp_auth: WebAppAuthModel = WebAppAuthModel()
 
 
 class FeatureService:
@@ -77,6 +125,10 @@ class FeatureService:
         if dify_config.BILLING_ENABLED and tenant_id:
             cls._fulfill_params_from_billing_api(features, tenant_id)
 
+        if dify_config.ENTERPRISE_ENABLED:
+            features.webapp_copyright_enabled = True
+            cls._fulfill_params_from_workspace_info(features, tenant_id)
+
         return features
 
     @classmethod
@@ -86,8 +138,8 @@ class FeatureService:
         cls._fulfill_system_params_from_env(system_features)
 
         if dify_config.ENTERPRISE_ENABLED:
-            system_features.enable_web_sso_switch_component = True
-
+            system_features.branding.enabled = True
+            system_features.webapp_auth.enabled = True
             cls._fulfill_params_from_enterprise(system_features)
 
         return system_features
@@ -107,6 +159,14 @@ class FeatureService:
         features.model_load_balancing_enabled = dify_config.MODEL_LB_ENABLED
         features.dataset_operator_enabled = dify_config.DATASET_OPERATOR_ENABLED
 
+    @classmethod
+    def _fulfill_params_from_workspace_info(cls, features: FeatureModel, tenant_id: str):
+        workspace_info = EnterpriseService.get_workspace_info(tenant_id)
+        if "WorkspaceMembers" in workspace_info:
+            features.workspace_members.size = workspace_info["WorkspaceMembers"]["used"]
+            features.workspace_members.limit = workspace_info["WorkspaceMembers"]["limit"]
+            features.workspace_members.enabled = workspace_info["WorkspaceMembers"]["enabled"]
+
     @classmethod
     def _fulfill_params_from_billing_api(cls, features: FeatureModel, tenant_id: str):
         billing_info = BillingService.get_info(tenant_id)
@@ -115,6 +175,9 @@ class FeatureService:
         features.billing.subscription.plan = billing_info["subscription"]["plan"]
         features.billing.subscription.interval = billing_info["subscription"]["interval"]
 
+        if features.billing.subscription.plan != "sandbox":
+            features.webapp_copyright_enabled = True
+
         if "members" in billing_info:
             features.members.size = billing_info["members"]["size"]
             features.members.limit = billing_info["members"]["limit"]
@@ -145,38 +208,53 @@ class FeatureService:
             features.model_load_balancing_enabled = billing_info["model_load_balancing_enabled"]
 
     @classmethod
-    def _fulfill_params_from_enterprise(cls, features):
+    def _fulfill_params_from_enterprise(cls, features: SystemFeatureModel):
         enterprise_info = EnterpriseService.get_info()
 
-        if "sso_enforced_for_signin" in enterprise_info:
-            features.sso_enforced_for_signin = enterprise_info["sso_enforced_for_signin"]
+        if "SSOEnforcedForSignin" in enterprise_info:
+            features.sso_enforced_for_signin = enterprise_info["SSOEnforcedForSignin"]
 
-        if "sso_enforced_for_signin_protocol" in enterprise_info:
-            features.sso_enforced_for_signin_protocol = enterprise_info["sso_enforced_for_signin_protocol"]
+        if "SSOEnforcedForSigninProtocol" in enterprise_info:
+            features.sso_enforced_for_signin_protocol = enterprise_info["SSOEnforcedForSigninProtocol"]
 
-        if "sso_enforced_for_web" in enterprise_info:
-            features.sso_enforced_for_web = enterprise_info["sso_enforced_for_web"]
+        if "EnableEmailCodeLogin" in enterprise_info:
+            features.enable_email_code_login = enterprise_info["EnableEmailCodeLogin"]
 
-        if "sso_enforced_for_web_protocol" in enterprise_info:
-            features.sso_enforced_for_web_protocol = enterprise_info["sso_enforced_for_web_protocol"]
+        if "EnableEmailPasswordLogin" in enterprise_info:
+            features.enable_email_password_login = enterprise_info["EnableEmailPasswordLogin"]
 
-        if "enable_email_code_login" in enterprise_info:
-            features.enable_email_code_login = enterprise_info["enable_email_code_login"]
+        if "IsAllowRegister" in enterprise_info:
+            features.is_allow_register = enterprise_info["IsAllowRegister"]
 
-        if "enable_email_password_login" in enterprise_info:
-            features.enable_email_password_login = enterprise_info["enable_email_password_login"]
+        if "IsAllowCreateWorkspace" in enterprise_info:
+            features.is_allow_create_workspace = enterprise_info["IsAllowCreateWorkspace"]
 
-        if "is_allow_register" in enterprise_info:
-            features.is_allow_register = enterprise_info["is_allow_register"]
+        if "Branding" in enterprise_info:
+            features.branding.application_title = enterprise_info["Branding"].get("applicationTitle", "")
+            features.branding.login_page_logo = enterprise_info["Branding"].get("loginPageLogo", "")
+            features.branding.workspace_logo = enterprise_info["Branding"].get("workspaceLogo", "")
+            features.branding.favicon = enterprise_info["Branding"].get("favicon", "")
 
-        if "is_allow_create_workspace" in enterprise_info:
-            features.is_allow_create_workspace = enterprise_info["is_allow_create_workspace"]
+        if "WebAppAuth" in enterprise_info:
+            features.webapp_auth.allow_sso = enterprise_info["WebAppAuth"].get("allowSso", False)
+            features.webapp_auth.allow_email_code_login = enterprise_info["WebAppAuth"].get(
+                "allowEmailCodeLogin", False
+            )
+            features.webapp_auth.allow_email_password_login = enterprise_info["WebAppAuth"].get(
+                "allowEmailPasswordLogin", False
+            )
+            features.webapp_auth.sso_config.protocol = enterprise_info.get("SSOEnforcedForWebProtocol", "")
 
-        if "license" in enterprise_info:
-            license_info = enterprise_info["license"]
+        if "License" in enterprise_info:
+            license_info = enterprise_info["License"]
 
             if "status" in license_info:
                 features.license.status = LicenseStatus(license_info.get("status", LicenseStatus.INACTIVE))
 
-            if "expired_at" in license_info:
-                features.license.expired_at = license_info["expired_at"]
+            if "expiredAt" in license_info:
+                features.license.expired_at = license_info["expiredAt"]
+
+            if "workspaces" in license_info:
+                features.license.workspaces.enabled = license_info["workspaces"]["enabled"]
+                features.license.workspaces.limit = license_info["workspaces"]["limit"]
+                features.license.workspaces.size = license_info["workspaces"]["used"]

api/services/webapp_auth_service.py

@@ -0,0 +1,174 @@
+import enum
+import random
+from datetime import UTC, datetime, timedelta
+from typing import Any, Optional, cast
+
+from configs import dify_config
+from extensions.ext_database import db
+from libs.helper import TokenManager
+from libs.passport import PassportService
+from libs.password import compare_password
+from models.account import Account, AccountStatus
+from models.model import App, EndUser, Site
+from services.app_service import AppService
+from services.enterprise.enterprise_service import EnterpriseService
+from services.errors.account import (AccountLoginError, AccountNotFoundError,
+                                     AccountPasswordError)
+from tasks.mail_email_code_login import send_email_code_login_mail_task
+from werkzeug.exceptions import Unauthorized
+
+
+class WebAppAuthType(enum.StrEnum):
+    """Enum for web app authentication types."""
+
+    PUBLIC = "public"
+    INTERNAL = "internal"
+    EXTERNAL = "external"
+
+
+class WebAppAuthService:
+    """Service for web app authentication."""
+
+    @staticmethod
+    def authenticate(email: str, password: str) -> Account:
+        """authenticate account with email and password"""
+        account = db.session.query(Account).filter_by(email=email).first()
+        if not account:
+            raise AccountNotFoundError()
+
+        if account.status == AccountStatus.BANNED.value:
+            raise AccountLoginError("Account is banned.")
+
+        if account.password is None or not compare_password(password, account.password, account.password_salt):
+            raise AccountPasswordError("Invalid email or password.")
+
+        return cast(Account, account)
+
+    @classmethod
+    def login(cls, account: Account) -> str:
+        access_token = cls._get_account_jwt_token(account=account)
+
+        return access_token
+
+    @classmethod
+    def get_user_through_email(cls, email: str):
+        account = db.session.query(Account).filter(Account.email == email).first()
+        if not account:
+            return None
+
+        if account.status == AccountStatus.BANNED.value:
+            raise Unauthorized("Account is banned.")
+
+        return account
+
+    @classmethod
+    def send_email_code_login_email(
+        cls, account: Optional[Account] = None, email: Optional[str] = None, language: Optional[str] = "en-US"
+    ):
+        email = account.email if account else email
+        if email is None:
+            raise ValueError("Email must be provided.")
+
+        code = "".join([str(random.randint(0, 9)) for _ in range(6)])
+        token = TokenManager.generate_token(
+            account=account, email=email, token_type="email_code_login", additional_data={"code": code}
+        )
+        send_email_code_login_mail_task.delay(
+            language=language,
+            to=account.email if account else email,
+            code=code,
+        )
+
+        return token
+
+    @classmethod
+    def get_email_code_login_data(cls, token: str) -> Optional[dict[str, Any]]:
+        return TokenManager.get_token_data(token, "email_code_login")
+
+    @classmethod
+    def revoke_email_code_login_token(cls, token: str):
+        TokenManager.revoke_token(token, "email_code_login")
+
+    @classmethod
+    def create_end_user(cls, app_code, email) -> EndUser:
+        site = db.session.query(Site).filter(Site.code == app_code).first()
+        app_model = db.session.query(App).filter(App.id == site.app_id).first()
+        end_user = EndUser(
+            tenant_id=app_model.tenant_id,
+            app_id=app_model.id,
+            type="browser",
+            is_anonymous=False,
+            session_id=email,
+            name="enterpriseuser",
+            external_user_id="enterpriseuser",
+        )
+        db.session.add(end_user)
+        db.session.commit()
+
+        return end_user
+
+    @classmethod
+    def _get_account_jwt_token(cls, account: Account) -> str:
+        exp_dt = datetime.now(UTC) + timedelta(hours=dify_config.ACCESS_TOKEN_EXPIRE_MINUTES * 24)
+        exp = int(exp_dt.timestamp())
+
+        payload = {
+            "sub": "Web API Passport",
+            "user_id": account.id,
+            "session_id": account.email,
+            "token_source": "webapp_login_token",
+            "auth_type": "internal",
+            "exp": exp,
+        }
+
+        token: str = PassportService().issue(payload)
+        return token
+
+    @classmethod
+    def is_app_require_permission_check(
+        cls, app_code: Optional[str] = None, app_id: Optional[str] = None, access_mode: Optional[str] = None
+    ) -> bool:
+        """
+        Check if the app requires permission check based on its access mode.
+        """
+        modes_requiring_permission_check = [
+            "private",
+            "private_all",
+        ]
+        if access_mode:
+            return access_mode in modes_requiring_permission_check
+
+        if not app_code and not app_id:
+            raise ValueError("Either app_code or app_id must be provided.")
+
+        if app_code:
+            app_id = AppService.get_app_id_by_code(app_code)
+        if not app_id:
+            raise ValueError("App ID could not be determined from the provided app_code.")
+
+        webapp_settings = EnterpriseService.WebAppAuth.get_app_access_mode_by_id(app_id)
+        if webapp_settings and webapp_settings.access_mode in modes_requiring_permission_check:
+            return True
+        return False
+
+    @classmethod
+    def get_app_auth_type(cls, app_code: str | None = None, access_mode: str | None = None) -> WebAppAuthType:
+        """
+        Get the authentication type for the app based on its access mode.
+        """
+        if not app_code and not access_mode:
+            raise ValueError("Either app_code or access_mode must be provided.")
+
+        if access_mode:
+            if access_mode == "public":
+                return WebAppAuthType.PUBLIC
+            elif access_mode in ["private", "private_all"]:
+                return WebAppAuthType.INTERNAL
+            elif access_mode == "sso_verified":
+                return WebAppAuthType.EXTERNAL
+
+        if app_code:
+            webapp_settings = EnterpriseService.WebAppAuth.get_app_access_mode_by_code(app_code)
+            return cls.get_app_auth_type(access_mode=webapp_settings.access_mode)
+
+        raise ValueError("Could not determine app authentication type.")

api/tasks/mail_email_code_login.py

@@ -6,6 +6,7 @@ from celery import shared_task  # type: ignore
 from flask import render_template
 
 from extensions.ext_mail import mail
+from services.feature_service import FeatureService
 
 
 @shared_task(queue="mail")
@@ -25,10 +26,24 @@ def send_email_code_login_mail_task(language: str, to: str, code: str):
     # send email code login mail using different languages
     try:
         if language == "zh-Hans":
-            html_content = render_template("email_code_login_mail_template_zh-CN.html", to=to, code=code)
+            template = "email_code_login_mail_template_zh-CN.html"
+            system_features = FeatureService.get_system_features()
+            if system_features.branding.enabled:
+                application_title = system_features.branding.application_title
+                template = "without-brand/email_code_login_mail_template_zh-CN.html"
+                html_content = render_template(template, to=to, code=code, application_title=application_title)
+            else:
+                html_content = render_template(template, to=to, code=code)
             mail.send(to=to, subject="邮箱验证码", html=html_content)
         else:
-            html_content = render_template("email_code_login_mail_template_en-US.html", to=to, code=code)
+            template = "email_code_login_mail_template_en-US.html"
+            system_features = FeatureService.get_system_features()
+            if system_features.branding.enabled:
+                application_title = system_features.branding.application_title
+                template = "without-brand/email_code_login_mail_template_en-US.html"
+                html_content = render_template(template, to=to, code=code, application_title=application_title)
+            else:
+                html_content = render_template(template, to=to, code=code)
             mail.send(to=to, subject="Email Code", html=html_content)
 
         end_at = time.perf_counter()

api/tasks/mail_enterprise_task.py

@@ -0,0 +1,33 @@
+import logging
+import time
+
+import click
+from celery import shared_task  # type: ignore
+from flask import render_template_string
+
+from extensions.ext_mail import mail
+
+
+@shared_task(queue="mail")
+def send_enterprise_email_task(to, subject, body, substitutions):
+    if not mail.is_inited():
+        return
+
+    logging.info(click.style("Start enterprise mail to {} with subject {}".format(to, subject), fg="green"))
+    start_at = time.perf_counter()
+
+    try:
+        html_content = render_template_string(body, **substitutions)
+
+        if isinstance(to, list):
+            for t in to:
+                mail.send(to=t, subject=subject, html=html_content)
+        else:
+            mail.send(to=to, subject=subject, html=html_content)
+
+        end_at = time.perf_counter()
+        logging.info(
+            click.style("Send enterprise mail to {} succeeded: latency: {}".format(to, end_at - start_at), fg="green")
+        )
+    except Exception:
+        logging.exception("Send enterprise mail to {} failed".format(to))

api/tasks/mail_invite_member_task.py

@@ -7,6 +7,7 @@ from flask import render_template
 
 from configs import dify_config
 from extensions.ext_mail import mail
+from services.feature_service import FeatureService
 
 
 @shared_task(queue="mail")
@@ -33,23 +34,45 @@ def send_invite_member_mail_task(language: str, to: str, token: str, inviter_nam
     try:
         url = f"{dify_config.CONSOLE_WEB_URL}/activate?token={token}"
         if language == "zh-Hans":
-            html_content = render_template(
-                "invite_member_mail_template_zh-CN.html",
-                to=to,
-                inviter_name=inviter_name,
-                workspace_name=workspace_name,
-                url=url,
-            )
-            mail.send(to=to, subject="立即加入 Dify 工作空间", html=html_content)
+            template = "invite_member_mail_template_zh-CN.html"
+            system_features = FeatureService.get_system_features()
+            if system_features.branding.enabled:
+                application_title = system_features.branding.application_title
+                template = "without-brand/invite_member_mail_template_zh-CN.html"
+                html_content = render_template(
+                    template,
+                    to=to,
+                    inviter_name=inviter_name,
+                    workspace_name=workspace_name,
+                    url=url,
+                    application_title=application_title,
+                )
+                mail.send(to=to, subject=f"立即加入 {application_title} 工作空间", html=html_content)
+            else:
+                html_content = render_template(
+                    template, to=to, inviter_name=inviter_name, workspace_name=workspace_name, url=url
+                )
+                mail.send(to=to, subject="立即加入 Dify 工作空间", html=html_content)
         else:
-            html_content = render_template(
-                "invite_member_mail_template_en-US.html",
-                to=to,
-                inviter_name=inviter_name,
-                workspace_name=workspace_name,
-                url=url,
-            )
-            mail.send(to=to, subject="Join Dify Workspace Now", html=html_content)
+            template = "invite_member_mail_template_en-US.html"
+            system_features = FeatureService.get_system_features()
+            if system_features.branding.enabled:
+                application_title = system_features.branding.application_title
+                template = "without-brand/invite_member_mail_template_en-US.html"
+                html_content = render_template(
+                    template,
+                    to=to,
+                    inviter_name=inviter_name,
+                    workspace_name=workspace_name,
+                    url=url,
+                    application_title=application_title,
+                )
+                mail.send(to=to, subject=f"Join {application_title} Workspace Now", html=html_content)
+            else:
+                html_content = render_template(
+                    template, to=to, inviter_name=inviter_name, workspace_name=workspace_name, url=url
+                )
+                mail.send(to=to, subject="Join Dify Workspace Now", html=html_content)
 
         end_at = time.perf_counter()
         logging.info(

api/tasks/mail_reset_password_task.py

@@ -6,6 +6,7 @@ from celery import shared_task  # type: ignore
 from flask import render_template
 
 from extensions.ext_mail import mail
+from services.feature_service import FeatureService
 
 
 @shared_task(queue="mail")
@@ -25,11 +26,27 @@ def send_reset_password_mail_task(language: str, to: str, code: str):
     # send reset password mail using different languages
     try:
         if language == "zh-Hans":
-            html_content = render_template("reset_password_mail_template_zh-CN.html", to=to, code=code)
-            mail.send(to=to, subject="设置您的 Dify 密码", html=html_content)
+            template = "reset_password_mail_template_zh-CN.html"
+            system_features = FeatureService.get_system_features()
+            if system_features.branding.enabled:
+                application_title = system_features.branding.application_title
+                template = "without-brand/reset_password_mail_template_zh-CN.html"
+                html_content = render_template(template, to=to, code=code, application_title=application_title)
+                mail.send(to=to, subject=f"设置您的 {application_title} 密码", html=html_content)
+            else:
+                html_content = render_template(template, to=to, code=code)
+                mail.send(to=to, subject="设置您的 Dify 密码", html=html_content)
         else:
-            html_content = render_template("reset_password_mail_template_en-US.html", to=to, code=code)
-            mail.send(to=to, subject="Set Your Dify Password", html=html_content)
+            template = "reset_password_mail_template_en-US.html"
+            system_features = FeatureService.get_system_features()
+            if system_features.branding.enabled:
+                application_title = system_features.branding.application_title
+                template = "without-brand/reset_password_mail_template_en-US.html"
+                html_content = render_template(template, to=to, code=code, application_title=application_title)
+                mail.send(to=to, subject=f"Set Your {application_title} Password", html=html_content)
+            else:
+                html_content = render_template(template, to=to, code=code)
+                mail.send(to=to, subject="Set Your Dify Password", html=html_content)
 
         end_at = time.perf_counter()
         logging.info(

api/templates/without-brand/email_code_login_mail_template_en-US.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        font-family: 'Arial', sans-serif;
+        line-height: 16pt;
+        color: #101828;
+        background-color: #e9ebf0;
+        margin: 0;
+        padding: 0;
+      }
+      .container {
+        width: 600px;
+        height: 360px;
+        margin: 40px auto;
+        padding: 36px 48px;
+        background-color: #fcfcfd;
+        border-radius: 16px;
+        border: 1px solid #ffffff;
+        box-shadow: 0 2px 4px -2px rgba(9, 9, 11, 0.08);
+      }
+      .header {
+        margin-bottom: 24px;
+      }
+      .header img {
+        max-width: 100px;
+        height: auto;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 28.8px;
+      }
+      .description {
+        font-size: 13px;
+        line-height: 16px;
+        color: #676f83;
+        margin-top: 12px;
+      }
+      .code-content {
+        padding: 16px 32px;
+        text-align: center;
+        border-radius: 16px;
+        background-color: #f2f4f7;
+        margin: 16px auto;
+      }
+      .code {
+        line-height: 36px;
+        font-weight: 700;
+        font-size: 30px;
+      }
+      .tips {
+        line-height: 16px;
+        color: #676f83;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <p class="title">Your login code for {{application_title}}</p>
+      <p class="description">Copy and paste this code, this code will only be valid for the next 5 minutes.</p>
+      <div class="code-content">
+        <span class="code">{{code}}</span>
+      </div>
+      <p class="tips">If you didn't request a login, don't worry. You can safely ignore this email.</p>
+    </div>
+  </body>
+</html>

api/templates/without-brand/email_code_login_mail_template_zh-CN.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        font-family: 'Arial', sans-serif;
+        line-height: 16pt;
+        color: #101828;
+        background-color: #e9ebf0;
+        margin: 0;
+        padding: 0;
+      }
+      .container {
+        width: 600px;
+        height: 360px;
+        margin: 40px auto;
+        padding: 36px 48px;
+        background-color: #fcfcfd;
+        border-radius: 16px;
+        border: 1px solid #ffffff;
+        box-shadow: 0 2px 4px -2px rgba(9, 9, 11, 0.08);
+      }
+      .header {
+        margin-bottom: 24px;
+      }
+      .header img {
+        max-width: 100px;
+        height: auto;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 28.8px;
+      }
+      .description {
+        font-size: 13px;
+        line-height: 16px;
+        color: #676f83;
+        margin-top: 12px;
+      }
+      .code-content {
+        padding: 16px 32px;
+        text-align: center;
+        border-radius: 16px;
+        background-color: #f2f4f7;
+        margin: 16px auto;
+      }
+      .code {
+        line-height: 36px;
+        font-weight: 700;
+        font-size: 30px;
+      }
+      .tips {
+        line-height: 16px;
+        color: #676f83;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <p class="title">{{application_title}} 的登录验证码</p>
+      <p class="description">复制并粘贴此验证码，注意验证码仅在接下来的 5 分钟内有效。</p>
+      <div class="code-content">
+        <span class="code">{{code}}</span>
+      </div>
+      <p class="tips">如果您没有请求登录，请不要担心。您可以安全地忽略此电子邮件。</p>
+    </div>
+  </body>
+</html>

api/templates/without-brand/invite_member_mail_template_en-US.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            line-height: 16pt;
+            color: #374151;
+            background-color: #E5E7EB;
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            width: 100%;
+            max-width: 560px;
+            margin: 40px auto;
+            padding: 20px;
+            background-color: #F3F4F6;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .header img {
+            max-width: 100px;
+            height: auto;
+        }
+        .button {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: #2970FF;
+            color: white;
+            text-decoration: none;
+            border-radius: 4px;
+            text-align: center;
+            transition: background-color 0.3s ease;
+        }
+        .button:hover {
+            background-color: #265DD4;
+        }
+        .footer {
+            font-size: 0.9em;
+            color: #777777;
+            margin-top: 30px;
+        }
+        .content {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="content">
+            <p>Dear {{ to }},</p>
+            <p>{{ inviter_name }} is pleased to invite you to join our workspace on {{application_title}}, a platform specifically designed for LLM application development. On {{application_title}}, you can explore, create, and collaborate to build and operate AI applications.</p>
+            <p>Click the button below to log in to {{application_title}} and join the workspace.</p>
+            <p style="text-align: center;"><a style="color: #fff; text-decoration: none" class="button" href="{{ url }}">Login Here</a></p>
+        </div>
+        <div class="footer">
+            <p>Best regards,</p>
+            <p>{{application_title}} Team</p>
+            <p>Please do not reply directly to this email; it is automatically sent by the system.</p>
+        </div>
+    </div>
+</body>
+
+</html>

api/templates/without-brand/invite_member_mail_template_zh-CN.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            line-height: 16pt;
+            color: #374151;
+            background-color: #E5E7EB;
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            width: 100%;
+            max-width: 560px;
+            margin: 40px auto;
+            padding: 20px;
+            background-color: #F3F4F6;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .header img {
+            max-width: 100px;
+            height: auto;
+        }
+        .button {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: #2970FF;
+            color: white;
+            text-decoration: none;
+            border-radius: 4px;
+            text-align: center;
+            transition: background-color 0.3s ease;
+        }
+        .button:hover {
+            background-color: #265DD4;
+        }
+        .footer {
+            font-size: 0.9em;
+            color: #777777;
+            margin-top: 30px;
+        }
+        .content {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="content">
+            <p>尊敬的 {{ to }}，</p>
+            <p>{{ inviter_name }} 现邀请您加入我们在 {{application_title}} 的工作区，这是一个专为 LLM 应用开发而设计的平台。在 {{application_title}} 上，您可以探索、创造和合作，构建和运营 AI 应用。</p>
+            <p>点击下方按钮即可登录 {{application_title}} 并且加入空间。</p>
+            <p style="text-align: center;"><a style="color: #fff; text-decoration: none" class="button" href="{{ url }}">在此登录</a></p>
+        </div>
+        <div class="footer">
+            <p>此致，</p>
+            <p>{{application_title}} 团队</p>
+            <p>请不要直接回复此电子邮件；由系统自动发送。</p>
+        </div>
+    </div>
+</body>
+</html>

api/templates/without-brand/reset_password_mail_template_en-US.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        font-family: 'Arial', sans-serif;
+        line-height: 16pt;
+        color: #101828;
+        background-color: #e9ebf0;
+        margin: 0;
+        padding: 0;
+      }
+      .container {
+        width: 600px;
+        height: 360px;
+        margin: 40px auto;
+        padding: 36px 48px;
+        background-color: #fcfcfd;
+        border-radius: 16px;
+        border: 1px solid #ffffff;
+        box-shadow: 0 2px 4px -2px rgba(9, 9, 11, 0.08);
+      }
+      .header {
+        margin-bottom: 24px;
+      }
+      .header img {
+        max-width: 100px;
+        height: auto;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 28.8px;
+      }
+      .description {
+        font-size: 13px;
+        line-height: 16px;
+        color: #676f83;
+        margin-top: 12px;
+      }
+      .code-content {
+        padding: 16px 32px;
+        text-align: center;
+        border-radius: 16px;
+        background-color: #f2f4f7;
+        margin: 16px auto;
+      }
+      .code {
+        line-height: 36px;
+        font-weight: 700;
+        font-size: 30px;
+      }
+      .tips {
+        line-height: 16px;
+        color: #676f83;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+        <p class="title">Set your {{application_title}} password</p>
+      <p class="description">Copy and paste this code, this code will only be valid for the next 5 minutes.</p>
+      <div class="code-content">
+        <span class="code">{{code}}</span>
+      </div>
+        <p class="tips">If you didn't request, don't worry. You can safely ignore this email.</p>
+    </div>
+  </body>
+</html>

api/templates/without-brand/reset_password_mail_template_zh-CN.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        font-family: 'Arial', sans-serif;
+        line-height: 16pt;
+        color: #101828;
+        background-color: #e9ebf0;
+        margin: 0;
+        padding: 0;
+      }
+      .container {
+        width: 600px;
+        height: 360px;
+        margin: 40px auto;
+        padding: 36px 48px;
+        background-color: #fcfcfd;
+        border-radius: 16px;
+        border: 1px solid #ffffff;
+        box-shadow: 0 2px 4px -2px rgba(9, 9, 11, 0.08);
+      }
+      .header {
+        margin-bottom: 24px;
+      }
+      .header img {
+        max-width: 100px;
+        height: auto;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 28.8px;
+      }
+      .description {
+        font-size: 13px;
+        line-height: 16px;
+        color: #676f83;
+        margin-top: 12px;
+      }
+      .code-content {
+        padding: 16px 32px;
+        text-align: center;
+        border-radius: 16px;
+        background-color: #f2f4f7;
+        margin: 16px auto;
+      }
+      .code {
+        line-height: 36px;
+        font-weight: 700;
+        font-size: 30px;
+      }
+      .tips {
+        line-height: 16px;
+        color: #676f83;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+        <p class="title">设置您的 {{application_title}} 账户密码</p>
+      <p class="description">复制并粘贴此验证码，注意验证码仅在接下来的 5 分钟内有效。</p>
+      <div class="code-content">
+        <span class="code">{{code}}</span>
+      </div>
+        <p class="tips">如果您没有请求，请不要担心。您可以安全地忽略此电子邮件。</p>
+    </div>
+  </body>
+</html>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx

@@ -15,23 +15,30 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
-import { useContextSelector } from 'use-context-selector'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import { useStore } from '@/app/components/app/store'
 import AppSideBar from '@/app/components/app-sidebar'
 import type { NavIcon } from '@/app/components/app-sidebar/navLink'
-import { fetchAppDetail, fetchAppSSO } from '@/service/apps'
-import AppContext, { useAppContext } from '@/context/app-context'
+import { fetchAppDetail } from '@/service/apps'
+import { useAppContext } from '@/context/app-context'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import type { App } from '@/types/app'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
   params: { appId: string }
 }
 
+type NavigationType = {
+  name: string
+  href: string
+  icon: NavIcon
+  selectedIcon: NavIcon
+}
+
 const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const {
     children,
@@ -50,13 +57,8 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   })))
   const [isLoadingAppDetail, setIsLoadingAppDetail] = useState(false)
   const [appDetailRes, setAppDetailRes] = useState<App | null>(null)
-  const [navigation, setNavigation] = useState<Array<{
-    name: string
-    href: string
-    icon: NavIcon
-    selectedIcon: NavIcon
-  }>>([])
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
+  const [navigation, setNavigation] = useState<Array<NavigationType>>([])
+  const { systemFeatures } = useGlobalPublicStore()
 
   const getNavigations = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: string) => {
     const navs = [
@@ -98,7 +100,11 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
 
   useEffect(() => {
     if (appDetail) {
-      document.title = `${(appDetail.name || 'App')} - Dify`
+      if (systemFeatures.branding.enabled)
+        document.title = `${(appDetail.name || 'App')} - ${systemFeatures.branding.application_title}`
+      else
+        document.title = `${(appDetail.name || 'App')} - Dify`
+
       const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
       const mode = isMobile ? 'collapse' : 'expand'
       setAppSiderbarExpand(isMobile ? mode : localeMode)
@@ -106,7 +112,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       // if ((appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (pathname).endsWith('workflow'))
       //   setAppSiderbarExpand('collapse')
     }
-  }, [appDetail, isMobile])
+  }, [appDetail, isMobile, pathname, setAppSiderbarExpand, systemFeatures])
 
   useEffect(() => {
     setAppDetail()
@@ -138,15 +144,10 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       router.replace(`/app/${appId}/configuration`)
     }
     else {
-      setAppDetail({ ...res, enable_sso: false })
-      setNavigation(getNavigations(appId, isCurrentWorkspaceEditor, res.mode))
-      if (systemFeatures.enable_web_sso_switch_component && canIEditApp) {
-        fetchAppSSO({ appId }).then((ssoRes) => {
-          setAppDetail({ ...res, enable_sso: ssoRes.enabled })
-        })
-      }
+      setAppDetail({ ...res })
+      setNavigation(getNavigations(appId, isCurrentWorkspaceEditor, res.mode) as Array<NavigationType>)
     }
-  }, [appDetailRes, appId, getNavigations, isCurrentWorkspaceEditor, isLoadingAppDetail, isLoadingCurrentWorkspace, pathname, router, setAppDetail, systemFeatures.enable_web_sso_switch_component])
+  }, [appDetailRes, appId, getNavigations, isCurrentWorkspaceEditor, isLoadingAppDetail, isLoadingCurrentWorkspace, pathname, router, setAppDetail])
 
   useUnmount(() => {
     setAppDetail()

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx

@@ -2,25 +2,22 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext, useContextSelector } from 'use-context-selector'
+import { useContext } from 'use-context-selector'
 import AppCard from '@/app/components/app/overview/appCard'
 import Loading from '@/app/components/base/loading'
 import { ToastContext } from '@/app/components/base/toast'
 import {
   fetchAppDetail,
-  fetchAppSSO,
-  updateAppSSO,
   updateAppSiteAccessToken,
   updateAppSiteConfig,
   updateAppSiteStatus,
 } from '@/service/apps'
-import type { App, AppSSO } from '@/types/app'
+import type { App } from '@/types/app'
 import type { UpdateAppSiteCodeResponse } from '@/models/app'
 import { asyncRunSafe } from '@/utils'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import type { IAppCardProps } from '@/app/components/app/overview/appCard'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import AppContext from '@/context/app-context'
 
 export type ICardViewProps = {
   appId: string
@@ -31,18 +28,11 @@ const CardView: FC<ICardViewProps> = ({ appId }) => {
   const { notify } = useContext(ToastContext)
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(state => state.setAppDetail)
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
 
   const updateAppDetail = async () => {
     try {
       const res = await fetchAppDetail({ url: '/apps', id: appId })
-      if (systemFeatures.enable_web_sso_switch_component) {
-        const ssoRes = await fetchAppSSO({ appId })
-        setAppDetail({ ...res, enable_sso: ssoRes.enabled })
-      }
-      else {
-        setAppDetail({ ...res })
-      }
+      setAppDetail({ ...res })
     }
     catch (error) { console.error(error) }
   }
@@ -93,16 +83,6 @@ const CardView: FC<ICardViewProps> = ({ appId }) => {
     if (!err)
       localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
 
-    if (systemFeatures.enable_web_sso_switch_component) {
-      const [sso_err] = await asyncRunSafe<AppSSO>(
-        updateAppSSO({ id: appId, enabled: Boolean(params.enable_sso) }) as Promise<AppSSO>,
-      )
-      if (sso_err) {
-        handleCallbackResult(sso_err)
-        return
-      }
-    }
-
     handleCallbackResult(err)
   }
 

web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx

@@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
 import { useAppContext } from '@/context/app-context'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 export type IAppDetail = {
   children: React.ReactNode
@@ -11,11 +13,13 @@ export type IAppDetail = {
 const AppDetail: FC<IAppDetail> = ({ children }) => {
   const router = useRouter()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.appDetail'))
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
       return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator])
+  }, [isCurrentWorkspaceDatasetOperator, router])
 
   return (
     <>

web/app/(commonLayout)/apps/AppCard.tsx

@@ -4,7 +4,7 @@ import { useContext, useContextSelector } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiMoreFill } from '@remixicon/react'
+import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import type { App } from '@/types/app'
@@ -31,6 +31,9 @@ import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-
 import { fetchWorkflowDraft } from '@/service/workflow'
 import { fetchInstalledAppList } from '@/service/explore'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
+import Tooltip from '@/app/components/base/tooltip'
+import AccessControl from '@/app/components/app/app-access-control'
+import { AccessMode } from '@/models/access-control'
 
 export type AppCardProps = {
   app: App
@@ -53,6 +56,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
   const [showDuplicateModal, setShowDuplicateModal] = useState(false)
   const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [showAccessControl, setShowAccessControl] = useState(false)
   const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
 
   const onConfirmDelete = useCallback(async () => {
@@ -71,7 +75,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       })
     }
     setShowConfirmDelete(false)
-  }, [app.id])
+  }, [app.id, mutateApps, notify, onPlanInfoChanged, onRefresh, t])
 
   const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
     name,
@@ -175,6 +179,13 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     setShowSwitchModal(false)
   }
 
+  const onUpdateAccessControl = useCallback(() => {
+    if (onRefresh)
+      onRefresh()
+    mutateApps()
+    setShowAccessControl(false)
+  }, [onRefresh, mutateApps, setShowAccessControl])
+
   const Operations = (props: HtmlContentProps) => {
     const onMouseLeave = async () => {
       props.onClose?.()
@@ -209,6 +220,12 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       e.preventDefault()
       setShowConfirmDelete(true)
     }
+    const onClickAccessControl = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowAccessControl(true)
+    }
     const onClickInstalledApp = async (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation()
       props.onClick?.()
@@ -252,6 +269,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           <span className={s.actionName}>{t('app.openInExplore')}</span>
         </button>
         <Divider className="!my-1" />
+        {
+          isCurrentWorkspaceEditor && <>
+            <button className={s.actionItem} onClick={onClickAccessControl}>
+              <span className={s.actionName}>{t('app.accessControl')}</span>
+            </button>
+            <Divider />
+          </>
+        }
         <div
           className={cn(s.actionItem, s.deleteActionItem, 'group')}
           onClick={onClickDelete}
@@ -278,7 +303,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
         }}
         className='relative h-[160px] group col-span-1 bg-components-card-bg border-[1px] border-solid border-components-card-border rounded-xl shadow-sm inline-flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
       >
-        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+        <div className='flex p-4 pb-3 h-[68px] items-start gap-3 grow-0 shrink-0'>
           <div className='relative shrink-0'>
             <AppIcon
               size="large"
@@ -301,7 +326,27 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
               {app.mode === 'completion' && <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>}
             </div>
           </div>
-        </div>
+          <div className='shrink-0 w-5 h-5 flex items-center justify-center'>
+            {app.access_mode === AccessMode.PUBLIC && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.anyone')}>
+              <RiGlobalLine className='h-4 w-4 text-text-quaternary' />
+            </Tooltip >}
+            {
+              app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.specific')}>
+                <RiLockLine className='text-text-quaternary w-4 h-4' />
+              </Tooltip>
+            }
+            {
+              app.access_mode === AccessMode.ORGANIZATION && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.organization')}>
+                <RiBuildingLine className='text-text-quaternary w-4 h-4' />
+              </Tooltip>
+            }
+            {
+              app.access_mode === AccessMode.EXTERNAL_MEMBERS && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.external')}>
+                <RiVerifiedBadgeLine className='h-4 w-4 text-text-quaternary' />
+              </Tooltip>
+            }
+          </div >
+        </div >
         <div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary'>
           <div
             className={cn(tags.length ? 'line-clamp-2' : 'line-clamp-4', 'group-hover:line-clamp-2')}
@@ -357,7 +402,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   popupClassName={
                     (app.mode === 'completion' || app.mode === 'chat')
                       ? '!w-[256px] translate-x-[-224px]'
-                      : '!w-[160px] translate-x-[-128px]'
+                      : '!w-[216px] translate-x-[-128px]'
                   }
                   className={'h-fit !z-20'}
                 />
@@ -365,7 +410,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             </>
           )}
         </div>
-      </div>
+      </div >
       {showEditModal && (
         <EditAppModal
           isEditModal
@@ -382,42 +427,55 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           onHide={() => setShowEditModal(false)}
         />
       )}
-      {showDuplicateModal && (
-        <DuplicateAppModal
-          appName={app.name}
-          icon_type={app.icon_type}
-          icon={app.icon}
-          icon_background={app.icon_background}
-          icon_url={app.icon_url}
-          show={showDuplicateModal}
-          onConfirm={onCopy}
-          onHide={() => setShowDuplicateModal(false)}
-        />
-      )}
-      {showSwitchModal && (
-        <SwitchAppModal
-          show={showSwitchModal}
-          appDetail={app}
-          onClose={() => setShowSwitchModal(false)}
-          onSuccess={onSwitch}
-        />
-      )}
-      {showConfirmDelete && (
-        <Confirm
-          title={t('app.deleteAppConfirmTitle')}
-          content={t('app.deleteAppConfirmContent')}
-          isShow={showConfirmDelete}
-          onConfirm={onConfirmDelete}
-          onCancel={() => setShowConfirmDelete(false)}
-        />
-      )}
-      {secretEnvList.length > 0 && (
-        <DSLExportConfirmModal
-          envList={secretEnvList}
-          onConfirm={onExport}
-          onClose={() => setSecretEnvList([])}
-        />
-      )}
+      {
+        showDuplicateModal && (
+          <DuplicateAppModal
+            appName={app.name}
+            icon_type={app.icon_type}
+            icon={app.icon}
+            icon_background={app.icon_background}
+            icon_url={app.icon_url}
+            show={showDuplicateModal}
+            onConfirm={onCopy}
+            onHide={() => setShowDuplicateModal(false)}
+          />
+        )
+      }
+      {
+        showSwitchModal && (
+          <SwitchAppModal
+            show={showSwitchModal}
+            appDetail={app}
+            onClose={() => setShowSwitchModal(false)}
+            onSuccess={onSwitch}
+          />
+        )
+      }
+      {
+        showConfirmDelete && (
+          <Confirm
+            title={t('app.deleteAppConfirmTitle')}
+            content={t('app.deleteAppConfirmContent')}
+            isShow={showConfirmDelete}
+            onConfirm={onConfirmDelete}
+            onCancel={() => setShowConfirmDelete(false)}
+          />
+        )
+      }
+      {
+        secretEnvList.length > 0 && (
+          <DSLExportConfirmModal
+            envList={secretEnvList}
+            onConfirm={onExport}
+            onClose={() => setSecretEnvList([])}
+          />
+        )
+      }
+      {
+        showAccessControl && (
+          <AccessControl app={app} onConfirm={onUpdateAccessControl} onClose={() => setShowAccessControl(false)} />
+        )
+      }
     </>
   )
 }

web/app/(commonLayout)/apps/Apps.tsx

@@ -85,7 +85,6 @@ const Apps = () => {
   ]
 
   useEffect(() => {
-    document.title = `${t('common.menus.apps')} -  Dify`
     if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
       localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
       mutate()

web/app/(commonLayout)/apps/page.tsx

@@ -1,21 +1,20 @@
 'use client'
-import { useContextSelector } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiDiscordFill, RiGithubFill } from '@remixicon/react'
 import Link from 'next/link'
 import style from '../list.module.css'
 import Apps from './Apps'
-import AppContext from '@/context/app-context'
-import { LicenseStatus } from '@/types/feature'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 const AppList = () => {
   const { t } = useTranslation()
-  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
-
+  const { systemFeatures } = useGlobalPublicStore()
+  useDocumentTitle(t('common.menus.apps'))
   return (
     <div className='relative flex flex-col overflow-y-auto bg-background-body shrink-0 h-0 grow'>
       <Apps />
-      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'>
+      {!systemFeatures.branding.enabled && <footer className='px-12 py-6 grow-0 shrink-0'>
         <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3>
         <p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p>
         <div className='flex items-center gap-2 mt-3'>

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

@@ -31,6 +31,7 @@ import { getLocaleOnClient } from '@/i18n'
 import { useAppContext } from '@/context/app-context'
 import Tooltip from '@/app/components/base/tooltip'
 import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
@@ -186,11 +187,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     }
     return baseNavigation
   }, [datasetRes?.provider, datasetId, t])
-
-  useEffect(() => {
-    if (datasetRes)
-      document.title = `${datasetRes.name || 'Dataset'} - Dify`
-  }, [datasetRes])
+  useDocumentTitle(`${datasetRes?.name || 'Dataset'}`)
 
   const setAppSiderbarExpand = useStore(state => state.setAppSiderbarExpand)
 

web/app/(commonLayout)/datasets/Container.tsx

@@ -29,9 +29,11 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { useAppContext } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Container = () => {
   const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
   const router = useRouter()
   const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
@@ -123,7 +125,7 @@ const Container = () => {
       {activeTab === 'dataset' && (
         <>
           <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} />
-          <DatasetFooter />
+          {!systemFeatures.branding.enabled && <DatasetFooter />}
           {showTagManagementModal && (
             <TagManagementModal type='knowledge' show={showTagManagementModal} />
           )}

web/app/(commonLayout)/datasets/Datasets.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
-import { useTranslation } from 'react-i18next'
 import NewDatasetCard from './NewDatasetCard'
 import DatasetCard from './DatasetCard'
 import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
@@ -57,11 +56,8 @@ const Datasets = ({
   const loadingStateRef = useRef(false)
   const anchorRef = useRef<HTMLAnchorElement>(null)
 
-  const { t } = useTranslation()
-
   useEffect(() => {
     loadingStateRef.current = isLoading
-    document.title = `${t('dataset.knowledge')} - Dify`
   }, [isLoading])
 
   useEffect(() => {
@@ -80,7 +76,7 @@ const Datasets = ({
 
   return (
     <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
-      { isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} /> }
+      {isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} />}
       {data?.map(({ data: datasets }) => datasets.map(dataset => (
         <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate} />),
       ))}

web/app/(commonLayout)/datasets/page.tsx

@@ -1,11 +1,12 @@
+'use client'
+import { useTranslation } from 'react-i18next'
 import Container from './Container'
+import useDocumentTitle from '@/hooks/use-document-title'
 
-const AppList = async () => {
+const AppList = () => {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.datasets'))
   return <Container />
 }
 
-export const metadata = {
-  title: 'Datasets - Dify',
-}
-
 export default AppList

web/app/(commonLayout)/datasets/template/template.en.mdx

@@ -6,7 +6,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
 <div>
   ### Authentication
 
-  Service API of Dify authenticates using an `API-Key`.
+  Service API authenticates using an `API-Key`.
 
   It is suggested that developers store the `API-Key` in the backend instead of sharing or storing it in the client side to avoid the leakage of the `API-Key`, which may lead to property loss.
 

web/app/(commonLayout)/datasets/template/template.zh.mdx

@@ -6,7 +6,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
 <div>
   ### 鉴权
 
-  Dify Service API 使用 `API-Key` 进行鉴权。
+  Service API 使用 `API-Key` 进行鉴权。
 
   建议开发者把 `API-Key` 放在后端存储，而非分享或者放在客户端存储，以免 `API-Key` 泄露，导致财产损失。
 

web/app/(commonLayout)/explore/layout.tsx

@@ -1,11 +1,13 @@
-import type { FC } from 'react'
+'use client'
+import type { FC, PropsWithChildren } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import ExploreClient from '@/app/components/explore'
-export type IAppDetail = {
-  children: React.ReactNode
-}
+import useDocumentTitle from '@/hooks/use-document-title'
 
-const AppDetail: FC<IAppDetail> = ({ children }) => {
+const ExploreLayout: FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.explore'))
   return (
     <ExploreClient>
       {children}
@@ -13,4 +15,4 @@ const AppDetail: FC<IAppDetail> = ({ children }) => {
   )
 }
 
-export default React.memo(AppDetail)
+export default React.memo(ExploreLayout)

web/app/(commonLayout)/layout.tsx

@@ -30,9 +30,4 @@ const Layout = ({ children }: { children: ReactNode }) => {
     </>
   )
 }
-
-export const metadata = {
-  title: 'Dify',
-}
-
 export default Layout

web/app/(commonLayout)/tools/page.tsx

@@ -1,22 +1,16 @@
 'use client'
 import type { FC } from 'react'
 import { useRouter } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import ToolProviderList from '@/app/components/tools/provider-list'
 import { useAppContext } from '@/context/app-context'
-
-const Layout: FC = () => {
-  const { t } = useTranslation()
+import useDocumentTitle from '@/hooks/use-document-title'
+const ToolsList: FC = () => {
   const router = useRouter()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
-
-  useEffect(() => {
-    if (typeof window !== 'undefined')
-      document.title = `${t('tools.title')} - Dify`
-    if (isCurrentWorkspaceDatasetOperator)
-      return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator, router, t])
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.tools'))
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
@@ -25,4 +19,4 @@ const Layout: FC = () => {
 
   return <ToolProviderList />
 }
-export default React.memo(Layout)
+export default React.memo(ToolsList)

web/app/(shareLayout)/layout.tsx

@@ -1,14 +1,42 @@
-import React from 'react'
+'use client'
+import React, { useEffect, useState } from 'react'
 import type { FC } from 'react'
-import type { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  icons: 'data:,', // prevent browser from using default favicon
-}
+import { usePathname, useSearchParams } from 'next/navigation'
+import Loading from '../components/base/loading'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { AccessMode } from '@/models/access-control'
+import { getAppAccessModeByAppCode } from '@/service/share'
 
 const Layout: FC<{
   children: React.ReactNode
 }> = ({ children }) => {
+  const isGlobalPending = useGlobalPublicStore(s => s.isGlobalPending)
+  const setWebAppAccessMode = useGlobalPublicStore(s => s.setWebAppAccessMode)
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const redirectUrl = searchParams.get('redirect_url')
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    (async () => {
+      let appCode: string | null = null
+      if (redirectUrl)
+        appCode = redirectUrl?.split('/').pop() || null
+      else
+        appCode = pathname.split('/').pop() || null
+
+      if (!appCode)
+        return
+      setIsLoading(true)
+      const ret = await getAppAccessModeByAppCode(appCode)
+      setWebAppAccessMode(ret?.accessMode || AccessMode.PUBLIC)
+      setIsLoading(false)
+    })()
+  }, [pathname, redirectUrl, setWebAppAccessMode])
+  if (isLoading || isGlobalPending) {
+    return <div className='flex h-full w-full items-center justify-center'>
+      <Loading />
+    </div>
+  }
   return (
     <div className="min-w-[300px] h-full pb-[env(safe-area-inset-bottom)]">
       {children}

web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx

@@ -0,0 +1,96 @@
+'use client'
+import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import Countdown from '@/app/components/signin/countdown'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import { sendWebAppResetPasswordCode, verifyWebAppResetPasswordCode } from '@/service/common'
+import I18NContext from '@/context/i18n'
+
+export default function CheckCode() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const email = decodeURIComponent(searchParams.get('email') as string)
+  const token = decodeURIComponent(searchParams.get('token') as string)
+  const [code, setVerifyCode] = useState('')
+  const [loading, setIsLoading] = useState(false)
+  const { locale } = useContext(I18NContext)
+
+  const verify = async () => {
+    try {
+      if (!code.trim()) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.emptyCode'),
+        })
+        return
+      }
+      if (!/\d{6}/.test(code)) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.invalidCode'),
+        })
+        return
+      }
+      setIsLoading(true)
+      const ret = await verifyWebAppResetPasswordCode({ email, code, token })
+      if (ret.is_valid) {
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent(ret.token))
+        router.push(`/webapp-reset-password/set-password?${params.toString()}`)
+      }
+    }
+    catch (error) { console.error(error) }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  const resendCode = async () => {
+    try {
+      const res = await sendWebAppResetPasswordCode(email, locale)
+      if (res.result === 'success') {
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent(res.data))
+        router.replace(`/webapp-reset-password/check-code?${params.toString()}`)
+      }
+    }
+    catch (error) { console.error(error) }
+  }
+
+  return <div className='flex flex-col gap-3'>
+    <div className='inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg'>
+      <RiMailSendFill className='h-6 w-6 text-2xl' />
+    </div>
+    <div className='pb-4 pt-2'>
+      <h2 className='title-4xl-semi-bold text-text-primary'>{t('login.checkCode.checkYourEmail')}</h2>
+      <p className='body-md-regular mt-2 text-text-secondary'>
+        <span dangerouslySetInnerHTML={{ __html: t('login.checkCode.tips', { email }) as string }}></span>
+        <br />
+        {t('login.checkCode.validTime')}
+      </p>
+    </div>
+
+    <form action="">
+      <input type='text' className='hidden' />
+      <label htmlFor="code" className='system-md-semibold mb-1 text-text-secondary'>{t('login.checkCode.verificationCode')}</label>
+      <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
+      <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
+      <Countdown onResend={resendCode} />
+    </form>
+    <div className='py-2'>
+      <div className='h-px bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
+    </div>
+    <div onClick={() => router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'>
+      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
+        <RiArrowLeftLine size={12} />
+      </div>
+      <span className='system-xs-regular ml-2'>{t('login.back')}</span>
+    </div>
+  </div>
+}

web/app/(shareLayout)/webapp-reset-password/layout.tsx

@@ -0,0 +1,30 @@
+'use client'
+import Header from '@/app/signin/_header'
+
+import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+export default function SignInLayout({ children }: any) {
+  const { systemFeatures } = useGlobalPublicStore()
+  return <>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <Header />
+        <div className={
+          cn(
+            'flex w-full grow flex-col items-center justify-center',
+            'px-6',
+            'md:px-[108px]',
+          )
+        }>
+          <div className='flex w-[400px] flex-col'>
+            {children}
+          </div>
+        </div>
+        {!systemFeatures.branding.enabled && <div className='system-xs-regular px-8 py-6 text-text-tertiary'>
+          © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+        </div>}
+      </div>
+    </div>
+  </>
+}

web/app/(shareLayout)/webapp-reset-password/page.tsx

@@ -0,0 +1,104 @@
+'use client'
+import Link from 'next/link'
+import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import { noop } from 'lodash-es'
+import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
+import { emailRegex } from '@/config'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import { sendResetPasswordCode } from '@/service/common'
+import I18NContext from '@/context/i18n'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+export default function CheckCode() {
+  const { t } = useTranslation()
+  useDocumentTitle('')
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const [email, setEmail] = useState('')
+  const [loading, setIsLoading] = useState(false)
+  const { locale } = useContext(I18NContext)
+
+  const handleGetEMailVerificationCode = async () => {
+    try {
+      if (!email) {
+        Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+        return
+      }
+
+      if (!emailRegex.test(email)) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.error.emailInValid'),
+        })
+        return
+      }
+      setIsLoading(true)
+      const res = await sendResetPasswordCode(email, locale)
+      if (res.result === 'success') {
+        localStorage.setItem(COUNT_DOWN_KEY, `${COUNT_DOWN_TIME_MS}`)
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent(res.data))
+        params.set('email', encodeURIComponent(email))
+        router.push(`/webapp-reset-password/check-code?${params.toString()}`)
+      }
+      else if (res.code === 'account_not_found') {
+        Toast.notify({
+          type: 'error',
+          message: t('login.error.registrationNotAllowed'),
+        })
+      }
+      else {
+        Toast.notify({
+          type: 'error',
+          message: res.data,
+        })
+      }
+    }
+    catch (error) {
+      console.error(error)
+    }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  return <div className='flex flex-col gap-3'>
+    <div className='inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg'>
+      <RiLockPasswordLine className='h-6 w-6 text-2xl text-text-accent-light-mode-only' />
+    </div>
+    <div className='pb-4 pt-2'>
+      <h2 className='title-4xl-semi-bold text-text-primary'>{t('login.resetPassword')}</h2>
+      <p className='body-md-regular mt-2 text-text-secondary'>
+        {t('login.resetPasswordDesc')}
+      </p>
+    </div>
+
+    <form onSubmit={noop}>
+      <input type='text' className='hidden' />
+      <div className='mb-2'>
+        <label htmlFor="email" className='system-md-semibold my-2 text-text-secondary'>{t('login.email')}</label>
+        <div className='mt-1'>
+          <Input id='email' type="email" disabled={loading} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
+        </div>
+        <div className='mt-3'>
+          <Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.sendVerificationCode')}</Button>
+        </div>
+      </div>
+    </form>
+    <div className='py-2'>
+      <div className='h-px bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
+    </div>
+    <Link href={`/webapp-signin?${searchParams.toString()}`} className='flex h-9 items-center justify-center text-text-tertiary hover:text-text-primary'>
+      <div className='inline-block rounded-full bg-background-default-dimmed p-1'>
+        <RiArrowLeftLine size={12} />
+      </div>
+      <span className='system-xs-regular ml-2'>{t('login.backToLogin')}</span>
+    </Link>
+  </div>
+}

web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx

@@ -0,0 +1,188 @@
+'use client'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import cn from 'classnames'
+import { RiCheckboxCircleFill } from '@remixicon/react'
+import { useCountDown } from 'ahooks'
+import Button from '@/app/components/base/button'
+import { changeWebAppPasswordWithToken } from '@/service/common'
+import Toast from '@/app/components/base/toast'
+import Input from '@/app/components/base/input'
+
+const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
+
+const ChangePasswordForm = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = decodeURIComponent(searchParams.get('token') || '')
+
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [showSuccess, setShowSuccess] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  const showErrorMessage = useCallback((message: string) => {
+    Toast.notify({
+      type: 'error',
+      message,
+    })
+  }, [])
+
+  const getSignInUrl = () => {
+    return `/webapp-signin?redirect_url=${searchParams.get('redirect_url') || ''}`
+  }
+
+  const AUTO_REDIRECT_TIME = 5000
+  const [leftTime, setLeftTime] = useState<number | undefined>(undefined)
+  const [countdown] = useCountDown({
+    leftTime,
+    onEnd: () => {
+      router.replace(getSignInUrl())
+    },
+  })
+
+  const valid = useCallback(() => {
+    if (!password.trim()) {
+      showErrorMessage(t('login.error.passwordEmpty'))
+      return false
+    }
+    if (!validPassword.test(password)) {
+      showErrorMessage(t('login.error.passwordInvalid'))
+      return false
+    }
+    if (password !== confirmPassword) {
+      showErrorMessage(t('common.account.notEqual'))
+      return false
+    }
+    return true
+  }, [password, confirmPassword, showErrorMessage, t])
+
+  const handleChangePassword = useCallback(async () => {
+    if (!valid())
+      return
+    try {
+      await changeWebAppPasswordWithToken({
+        url: '/forgot-password/resets',
+        body: {
+          token,
+          new_password: password,
+          password_confirm: confirmPassword,
+        },
+      })
+      setShowSuccess(true)
+      setLeftTime(AUTO_REDIRECT_TIME)
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }, [password, token, valid, confirmPassword])
+
+  return (
+    <div className={
+      cn(
+        'flex w-full grow flex-col items-center justify-center',
+        'px-6',
+        'md:px-[108px]',
+      )
+    }>
+      {!showSuccess && (
+        <div className='flex flex-col md:w-[400px]'>
+          <div className="mx-auto w-full">
+            <h2 className="title-4xl-semi-bold text-text-primary">
+              {t('login.changePassword')}
+            </h2>
+            <p className='body-md-regular mt-2 text-text-secondary'>
+              {t('login.changePasswordTip')}
+            </p>
+          </div>
+
+          <div className="mx-auto mt-6 w-full">
+            <div className="bg-white">
+              {/* Password */}
+              <div className='mb-5'>
+                <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                  {t('common.account.newPassword')}
+                </label>
+                <div className='relative mt-1'>
+                  <Input
+                    id="password" type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    placeholder={t('login.passwordPlaceholder') || ''}
+                  />
+
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowPassword(!showPassword)}
+                    >
+                      {showPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
+                <div className='body-xs-regular mt-1 text-text-secondary'>{t('login.error.passwordInvalid')}</div>
+              </div>
+              {/* Confirm Password */}
+              <div className='mb-5'>
+                <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                  {t('common.account.confirmPassword')}
+                </label>
+                <div className='relative mt-1'>
+                  <Input
+                    id="confirmPassword"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    value={confirmPassword}
+                    onChange={e => setConfirmPassword(e.target.value)}
+                    placeholder={t('login.confirmPasswordPlaceholder') || ''}
+                  />
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    >
+                      {showConfirmPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <Button
+                  variant='primary'
+                  className='w-full'
+                  onClick={handleChangePassword}
+                >
+                  {t('login.changePasswordBtn')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {showSuccess && (
+        <div className="flex flex-col md:w-[400px]">
+          <div className="mx-auto w-full">
+            <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
+              <RiCheckboxCircleFill className='h-6 w-6 text-text-success' />
+            </div>
+            <h2 className="title-4xl-semi-bold text-text-primary">
+              {t('login.passwordChangedTip')}
+            </h2>
+          </div>
+          <div className="mx-auto mt-6 w-full">
+            <Button variant='primary' className='w-full' onClick={() => {
+              setLeftTime(undefined)
+              router.replace(getSignInUrl())
+            }}>{t('login.passwordChanged')} ({Math.round(countdown / 1000)}) </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ChangePasswordForm

web/app/(shareLayout)/webapp-signin/check-code/page.tsx

@@ -0,0 +1,115 @@
+'use client'
+import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import Countdown from '@/app/components/signin/countdown'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import { sendWebAppEMailLoginCode, webAppEmailLoginWithCode } from '@/service/common'
+import I18NContext from '@/context/i18n'
+import { setAccessToken } from '@/app/components/share/utils'
+import { fetchAccessToken } from '@/service/share'
+
+export default function CheckCode() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const email = decodeURIComponent(searchParams.get('email') as string)
+  const token = decodeURIComponent(searchParams.get('token') as string)
+  const [code, setVerifyCode] = useState('')
+  const [loading, setIsLoading] = useState(false)
+  const { locale } = useContext(I18NContext)
+  const redirectUrl = searchParams.get('redirect_url')
+
+  const getAppCodeFromRedirectUrl = useCallback(() => {
+    const appCode = redirectUrl?.split('/').pop()
+    if (!appCode)
+      return null
+
+    return appCode
+  }, [redirectUrl])
+
+  const verify = async () => {
+    try {
+      const appCode = getAppCodeFromRedirectUrl()
+      if (!code.trim()) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.emptyCode'),
+        })
+        return
+      }
+      if (!/\d{6}/.test(code)) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.invalidCode'),
+        })
+        return
+      }
+      if (!redirectUrl || !appCode) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.error.redirectUrlMissing'),
+        })
+        return
+      }
+      setIsLoading(true)
+      const ret = await webAppEmailLoginWithCode({ email, code, token })
+      if (ret.result === 'success') {
+        localStorage.setItem('webapp_access_token', ret.data.access_token)
+        const tokenResp = await fetchAccessToken({ appCode, webAppAccessToken: ret.data.access_token })
+        await setAccessToken(appCode, tokenResp.access_token)
+        router.replace(redirectUrl)
+      }
+    }
+    catch (error) { console.error(error) }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  const resendCode = async () => {
+    try {
+      const ret = await sendWebAppEMailLoginCode(email, locale)
+      if (ret.result === 'success') {
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent(ret.data))
+        router.replace(`/webapp-signin/check-code?${params.toString()}`)
+      }
+    }
+    catch (error) { console.error(error) }
+  }
+
+  return <div className='flex w-[400px] flex-col gap-3'>
+    <div className='inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg'>
+      <RiMailSendFill className='h-6 w-6 text-2xl text-text-accent-light-mode-only' />
+    </div>
+    <div className='pb-4 pt-2'>
+      <h2 className='title-4xl-semi-bold text-text-primary'>{t('login.checkCode.checkYourEmail')}</h2>
+      <p className='body-md-regular mt-2 text-text-secondary'>
+        <span dangerouslySetInnerHTML={{ __html: t('login.checkCode.tips', { email }) as string }}></span>
+        <br />
+        {t('login.checkCode.validTime')}
+      </p>
+    </div>
+
+    <form action="">
+      <label htmlFor="code" className='system-md-semibold mb-1 text-text-secondary'>{t('login.checkCode.verificationCode')}</label>
+      <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
+      <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
+      <Countdown onResend={resendCode} />
+    </form>
+    <div className='py-2'>
+      <div className='h-px bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
+    </div>
+    <div onClick={() => router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'>
+      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
+        <RiArrowLeftLine size={12} />
+      </div>
+      <span className='system-xs-regular ml-2'>{t('login.back')}</span>
+    </div>
+  </div>
+}

web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx

@@ -0,0 +1,80 @@
+'use client'
+import { useRouter, useSearchParams } from 'next/navigation'
+import React, { useCallback, useEffect } from 'react'
+import Toast from '@/app/components/base/toast'
+import { fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { SSOProtocol } from '@/types/feature'
+import Loading from '@/app/components/base/loading'
+import AppUnavailable from '@/app/components/base/app-unavailable'
+
+const ExternalMemberSSOAuth = () => {
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const searchParams = useSearchParams()
+  const router = useRouter()
+
+  const redirectUrl = searchParams.get('redirect_url')
+
+  const showErrorToast = (message: string) => {
+    Toast.notify({
+      type: 'error',
+      message,
+    })
+  }
+
+  const getAppCodeFromRedirectUrl = useCallback(() => {
+    const appCode = redirectUrl?.split('/').pop()
+    if (!appCode)
+      return null
+
+    return appCode
+  }, [redirectUrl])
+
+  const handleSSOLogin = useCallback(async () => {
+    const appCode = getAppCodeFromRedirectUrl()
+    if (!appCode || !redirectUrl) {
+      showErrorToast('redirect url or app code is invalid.')
+      return
+    }
+
+    switch (systemFeatures.webapp_auth.sso_config.protocol) {
+      case SSOProtocol.SAML: {
+        const samlRes = await fetchWebSAMLSSOUrl(appCode, redirectUrl)
+        router.push(samlRes.url)
+        break
+      }
+      case SSOProtocol.OIDC: {
+        const oidcRes = await fetchWebOIDCSSOUrl(appCode, redirectUrl)
+        router.push(oidcRes.url)
+        break
+      }
+      case SSOProtocol.OAuth2: {
+        const oauth2Res = await fetchWebOAuth2SSOUrl(appCode, redirectUrl)
+        router.push(oauth2Res.url)
+        break
+      }
+      case '':
+        break
+      default:
+        showErrorToast('SSO protocol is not supported.')
+    }
+  }, [getAppCodeFromRedirectUrl, redirectUrl, router, systemFeatures.webapp_auth.sso_config.protocol])
+
+  useEffect(() => {
+    handleSSOLogin()
+  }, [handleSSOLogin])
+
+  if (!systemFeatures.webapp_auth.sso_config.protocol) {
+    return <div className="flex h-full items-center justify-center">
+      <AppUnavailable code={403} unknownReason='sso protocol is invalid.' />
+    </div>
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Loading />
+    </div>
+  )
+}
+
+export default React.memo(ExternalMemberSSOAuth)

web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import { noop } from 'lodash-es'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+import { emailRegex } from '@/config'
+import Toast from '@/app/components/base/toast'
+import { sendWebAppEMailLoginCode } from '@/service/common'
+import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
+import I18NContext from '@/context/i18n'
+
+export default function MailAndCodeAuth() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const emailFromLink = decodeURIComponent(searchParams.get('email') || '')
+  const [email, setEmail] = useState(emailFromLink)
+  const [loading, setIsLoading] = useState(false)
+  const { locale } = useContext(I18NContext)
+
+  const handleGetEMailVerificationCode = async () => {
+    try {
+      if (!email) {
+        Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+        return
+      }
+
+      if (!emailRegex.test(email)) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.error.emailInValid'),
+        })
+        return
+      }
+      setIsLoading(true)
+      const ret = await sendWebAppEMailLoginCode(email, locale)
+      if (ret.result === 'success') {
+        localStorage.setItem(COUNT_DOWN_KEY, `${COUNT_DOWN_TIME_MS}`)
+        const params = new URLSearchParams(searchParams)
+        params.set('email', encodeURIComponent(email))
+        params.set('token', encodeURIComponent(ret.data))
+        router.push(`/webapp-signin/check-code?${params.toString()}`)
+      }
+    }
+    catch (error) {
+      console.error(error)
+    }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (<form onSubmit={noop}>
+    <input type='text' className='hidden' />
+    <div className='mb-2'>
+      <label htmlFor="email" className='system-md-semibold my-2 text-text-secondary'>{t('login.email')}</label>
+      <div className='mt-1'>
+        <Input id='email' type="email" value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
+      </div>
+      <div className='mt-3'>
+        <Button loading={loading} disabled={loading || !email} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button>
+      </div>
+    </div>
+  </form>
+  )
+}

web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx

@@ -0,0 +1,171 @@
+import Link from 'next/link'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import { noop } from 'lodash-es'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import { emailRegex } from '@/config'
+import { webAppLogin } from '@/service/common'
+import Input from '@/app/components/base/input'
+import I18NContext from '@/context/i18n'
+import { setAccessToken } from '@/app/components/share/utils'
+import { fetchAccessToken } from '@/service/share'
+
+type MailAndPasswordAuthProps = {
+  isEmailSetup: boolean
+}
+
+const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
+
+export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAuthProps) {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18NContext)
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [showPassword, setShowPassword] = useState(false)
+  const emailFromLink = decodeURIComponent(searchParams.get('email') || '')
+  const [email, setEmail] = useState(emailFromLink)
+  const [password, setPassword] = useState('')
+
+  const [isLoading, setIsLoading] = useState(false)
+  const redirectUrl = searchParams.get('redirect_url')
+
+  const getAppCodeFromRedirectUrl = useCallback(() => {
+    const appCode = redirectUrl?.split('/').pop()
+    if (!appCode)
+      return null
+
+    return appCode
+  }, [redirectUrl])
+  const handleEmailPasswordLogin = async () => {
+    const appCode = getAppCodeFromRedirectUrl()
+    if (!email) {
+      Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+      return
+    }
+    if (!emailRegex.test(email)) {
+      Toast.notify({
+        type: 'error',
+        message: t('login.error.emailInValid'),
+      })
+      return
+    }
+    if (!password?.trim()) {
+      Toast.notify({ type: 'error', message: t('login.error.passwordEmpty') })
+      return
+    }
+    if (!passwordRegex.test(password)) {
+      Toast.notify({
+        type: 'error',
+        message: t('login.error.passwordInvalid'),
+      })
+      return
+    }
+    if (!redirectUrl || !appCode) {
+      Toast.notify({
+        type: 'error',
+        message: t('login.error.redirectUrlMissing'),
+      })
+      return
+    }
+    try {
+      setIsLoading(true)
+      const loginData: Record<string, any> = {
+        email,
+        password,
+        language: locale,
+        remember_me: true,
+      }
+
+      const res = await webAppLogin({
+        url: '/login',
+        body: loginData,
+      })
+      if (res.result === 'success') {
+        localStorage.setItem('webapp_access_token', res.data.access_token)
+        const tokenResp = await fetchAccessToken({ appCode, webAppAccessToken: res.data.access_token })
+        await setAccessToken(appCode, tokenResp.access_token)
+        router.replace(redirectUrl)
+      }
+      else {
+        Toast.notify({
+          type: 'error',
+          message: res.data,
+        })
+      }
+    }
+
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  return <form onSubmit={noop}>
+    <div className='mb-3'>
+      <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        {t('login.email')}
+      </label>
+      <div className="mt-1">
+        <Input
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+          id="email"
+          type="email"
+          autoComplete="email"
+          placeholder={t('login.emailPlaceholder') || ''}
+          tabIndex={1}
+        />
+      </div>
+    </div>
+
+    <div className='mb-3'>
+      <label htmlFor="password" className="my-2 flex items-center justify-between">
+        <span className='system-md-semibold text-text-secondary'>{t('login.password')}</span>
+        <Link
+          href={`/webapp-reset-password?${searchParams.toString()}`}
+          className={`system-xs-regular ${isEmailSetup ? 'text-components-button-secondary-accent-text' : 'pointer-events-none text-components-button-secondary-accent-text-disabled'}`}
+          tabIndex={isEmailSetup ? 0 : -1}
+          aria-disabled={!isEmailSetup}
+        >
+          {t('login.forget')}
+        </Link>
+      </label>
+      <div className="relative mt-1">
+        <Input
+          id="password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter')
+              handleEmailPasswordLogin()
+          }}
+          type={showPassword ? 'text' : 'password'}
+          autoComplete="current-password"
+          placeholder={t('login.passwordPlaceholder') || ''}
+          tabIndex={2}
+        />
+        <div className="absolute inset-y-0 right-0 flex items-center">
+          <Button
+            type="button"
+            variant='ghost'
+            onClick={() => setShowPassword(!showPassword)}
+          >
+            {showPassword ? '👀' : '😝'}
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <div className='mb-2'>
+      <Button
+        tabIndex={2}
+        variant='primary'
+        onClick={handleEmailPasswordLogin}
+        disabled={isLoading || !email || !password}
+        className="w-full"
+      >{t('login.signBtn')}</Button>
+    </div>
+  </form>
+}

web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx

@@ -0,0 +1,87 @@
+'use client'
+import { useRouter, useSearchParams } from 'next/navigation'
+import type { FC } from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import Toast from '@/app/components/base/toast'
+import Button from '@/app/components/base/button'
+import { SSOProtocol } from '@/types/feature'
+import { fetchMembersOAuth2SSOUrl, fetchMembersOIDCSSOUrl, fetchMembersSAMLSSOUrl } from '@/service/share'
+
+type SSOAuthProps = {
+  protocol: SSOProtocol | ''
+}
+
+const SSOAuth: FC<SSOAuthProps> = ({
+  protocol,
+}) => {
+  const router = useRouter()
+  const { t } = useTranslation()
+  const searchParams = useSearchParams()
+
+  const redirectUrl = searchParams.get('redirect_url')
+  const getAppCodeFromRedirectUrl = useCallback(() => {
+    const appCode = redirectUrl?.split('/').pop()
+    if (!appCode)
+      return null
+
+    return appCode
+  }, [redirectUrl])
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSSOLogin = () => {
+    const appCode = getAppCodeFromRedirectUrl()
+    if (!redirectUrl || !appCode) {
+      Toast.notify({
+        type: 'error',
+        message: 'invalid redirect URL or app code',
+      })
+      return
+    }
+    setIsLoading(true)
+    if (protocol === SSOProtocol.SAML) {
+      fetchMembersSAMLSSOUrl(appCode, redirectUrl).then((res) => {
+        router.push(res.url)
+      }).finally(() => {
+        setIsLoading(false)
+      })
+    }
+    else if (protocol === SSOProtocol.OIDC) {
+      fetchMembersOIDCSSOUrl(appCode, redirectUrl).then((res) => {
+        router.push(res.url)
+      }).finally(() => {
+        setIsLoading(false)
+      })
+    }
+    else if (protocol === SSOProtocol.OAuth2) {
+      fetchMembersOAuth2SSOUrl(appCode, redirectUrl).then((res) => {
+        router.push(res.url)
+      }).finally(() => {
+        setIsLoading(false)
+      })
+    }
+    else {
+      Toast.notify({
+        type: 'error',
+        message: 'invalid SSO protocol',
+      })
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Button
+      tabIndex={0}
+      onClick={() => { handleSSOLogin() }}
+      disabled={isLoading}
+      className="w-full"
+    >
+      <Lock01 className='mr-2 h-5 w-5 text-text-accent-light-mode-only' />
+      <span className="truncate">{t('login.withSSO')}</span>
+    </Button>
+  )
+}
+
+export default SSOAuth

web/app/(shareLayout)/webapp-signin/layout.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+export default function SignInLayout({ children }: any) {
+  const { systemFeatures } = useGlobalPublicStore()
+  useDocumentTitle('')
+  return <>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        {/* <Header /> */}
+        <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}>
+          <div className='flex justify-center md:w-[440px] lg:w-[600px]'>
+            {children}
+          </div>
+        </div>
+        {systemFeatures.branding.enabled === false && <div className='system-xs-regular px-8 py-6 text-text-tertiary'>
+          © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+        </div>}
+      </div>
+    </div>
+  </>
+}

web/app/(shareLayout)/webapp-signin/normalForm.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
+import MailAndCodeAuth from './components/mail-and-code-auth'
+import MailAndPasswordAuth from './components/mail-and-password-auth'
+import SSOAuth from './components/sso-auth'
+import Loading from '@/app/components/base/loading'
+import cn from '@/utils/classnames'
+import { LicenseStatus } from '@/types/feature'
+import { IS_CE_EDITION } from '@/config'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+const NormalForm = () => {
+  const { t } = useTranslation()
+
+  const [isLoading, setIsLoading] = useState(true)
+  const { systemFeatures } = useGlobalPublicStore()
+  const [authType, updateAuthType] = useState<'code' | 'password'>('password')
+  const [showORLine, setShowORLine] = useState(false)
+  const [allMethodsAreDisabled, setAllMethodsAreDisabled] = useState(false)
+
+  const init = useCallback(async () => {
+    try {
+      setAllMethodsAreDisabled(!systemFeatures.enable_social_oauth_login && !systemFeatures.enable_email_code_login && !systemFeatures.enable_email_password_login && !systemFeatures.sso_enforced_for_signin)
+      setShowORLine((systemFeatures.enable_social_oauth_login || systemFeatures.sso_enforced_for_signin) && (systemFeatures.enable_email_code_login || systemFeatures.enable_email_password_login))
+      updateAuthType(systemFeatures.enable_email_password_login ? 'password' : 'code')
+    }
+    catch (error) {
+      console.error(error)
+      setAllMethodsAreDisabled(true)
+    }
+    finally { setIsLoading(false) }
+  }, [systemFeatures])
+  useEffect(() => {
+    init()
+  }, [init])
+  if (isLoading) {
+    return <div className={
+      cn(
+        'flex w-full grow flex-col items-center justify-center',
+        'px-6',
+        'md:px-[108px]',
+      )
+    }>
+      <Loading type='area' />
+    </div>
+  }
+  if (systemFeatures.license?.status === LicenseStatus.LOST) {
+    return <div className='mx-auto mt-8 w-full'>
+      <div className='relative'>
+        <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
+          <div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
+            <RiContractLine className='h-5 w-5' />
+            <RiErrorWarningFill className='absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary' />
+          </div>
+          <p className='system-sm-medium text-text-primary'>{t('login.licenseLost')}</p>
+          <p className='system-xs-regular mt-1 text-text-tertiary'>{t('login.licenseLostTip')}</p>
+        </div>
+      </div>
+    </div>
+  }
+  if (systemFeatures.license?.status === LicenseStatus.EXPIRED) {
+    return <div className='mx-auto mt-8 w-full'>
+      <div className='relative'>
+        <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
+          <div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
+            <RiContractLine className='h-5 w-5' />
+            <RiErrorWarningFill className='absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary' />
+          </div>
+          <p className='system-sm-medium text-text-primary'>{t('login.licenseExpired')}</p>
+          <p className='system-xs-regular mt-1 text-text-tertiary'>{t('login.licenseExpiredTip')}</p>
+        </div>
+      </div>
+    </div>
+  }
+  if (systemFeatures.license?.status === LicenseStatus.INACTIVE) {
+    return <div className='mx-auto mt-8 w-full'>
+      <div className='relative'>
+        <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
+          <div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
+            <RiContractLine className='h-5 w-5' />
+            <RiErrorWarningFill className='absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary' />
+          </div>
+          <p className='system-sm-medium text-text-primary'>{t('login.licenseInactive')}</p>
+          <p className='system-xs-regular mt-1 text-text-tertiary'>{t('login.licenseInactiveTip')}</p>
+        </div>
+      </div>
+    </div>
+  }
+
+  return (
+    <>
+      <div className="mx-auto mt-8 w-full">
+        <div className="mx-auto w-full">
+          <h2 className="title-4xl-semi-bold text-text-primary">{t('login.pageTitle')}</h2>
+          {!systemFeatures.branding.enabled && <p className='body-md-regular mt-2 text-text-tertiary'>{t('login.welcome')}</p>}
+        </div>
+        <div className="relative">
+          <div className="mt-6 flex flex-col gap-3">
+            {systemFeatures.sso_enforced_for_signin && <div className='w-full'>
+              <SSOAuth protocol={systemFeatures.sso_enforced_for_signin_protocol} />
+            </div>}
+          </div>
+
+          {showORLine && <div className="relative mt-6">
+            <div className="absolute inset-0 flex items-center" aria-hidden="true">
+              <div className='h-px w-full bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
+            </div>
+            <div className="relative flex justify-center">
+              <span className="system-xs-medium-uppercase px-2 text-text-tertiary">{t('login.or')}</span>
+            </div>
+          </div>}
+          {
+            (systemFeatures.enable_email_code_login || systemFeatures.enable_email_password_login) && <>
+              {systemFeatures.enable_email_code_login && authType === 'code' && <>
+                <MailAndCodeAuth />
+                {systemFeatures.enable_email_password_login && <div className='cursor-pointer py-1 text-center' onClick={() => { updateAuthType('password') }}>
+                  <span className='system-xs-medium text-components-button-secondary-accent-text'>{t('login.usePassword')}</span>
+                </div>}
+              </>}
+              {systemFeatures.enable_email_password_login && authType === 'password' && <>
+                <MailAndPasswordAuth isEmailSetup={systemFeatures.is_email_setup} />
+                {systemFeatures.enable_email_code_login && <div className='cursor-pointer py-1 text-center' onClick={() => { updateAuthType('code') }}>
+                  <span className='system-xs-medium text-components-button-secondary-accent-text'>{t('login.useVerificationCode')}</span>
+                </div>}
+              </>}
+            </>
+          }
+          {allMethodsAreDisabled && <>
+            <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
+              <div className='shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
+                <RiDoorLockLine className='h-5 w-5' />
+              </div>
+              <p className='system-sm-medium text-text-primary'>{t('login.noLoginMethod')}</p>
+              <p className='system-xs-regular mt-1 text-text-tertiary'>{t('login.noLoginMethodTip')}</p>
+            </div>
+            <div className="relative my-2 py-2">
+              <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                <div className='h-px w-full bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
+              </div>
+            </div>
+          </>}
+          {!systemFeatures.branding.enabled && <>
+            <div className="system-xs-regular mt-2 block w-full text-text-tertiary">
+              {t('login.tosDesc')}
+              &nbsp;
+              <Link
+                className='system-xs-medium text-text-secondary hover:underline'
+                target='_blank' rel='noopener noreferrer'
+                href='https://dify.ai/terms'
+              >{t('login.tos')}</Link>
+              &nbsp;&&nbsp;
+              <Link
+                className='system-xs-medium text-text-secondary hover:underline'
+                target='_blank' rel='noopener noreferrer'
+                href='https://dify.ai/privacy'
+              >{t('login.pp')}</Link>
+            </div>
+            {IS_CE_EDITION && <div className="w-hull system-xs-regular mt-2 block text-text-tertiary">
+              {t('login.goToInit')}
+              &nbsp;
+              <Link
+                className='system-xs-medium text-text-secondary hover:underline'
+                href='/install'
+              >{t('login.setAdminAccount')}</Link>
+            </div>}
+          </>}
+
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default NormalForm

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -1,103 +1,125 @@
 'use client'
 import { useRouter, useSearchParams } from 'next/navigation'
 import type { FC } from 'react'
-import React, { useEffect } from 'react'
-import cn from '@/utils/classnames'
+import React, { useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import NormalForm from './normalForm'
+import ExternalMemberSsoAuth from './components/external-member-sso-auth'
 import Toast from '@/app/components/base/toast'
-import { fetchSystemFeatures, fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
-import { setAccessToken } from '@/app/components/share/utils'
+import { removeAccessToken, setAccessToken } from '@/app/components/share/utils'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import Loading from '@/app/components/base/loading'
+import AppUnavailable from '@/app/components/base/app-unavailable'
+import { AccessMode } from '@/models/access-control'
+import { fetchAccessToken } from '@/service/share'
 
 const WebSSOForm: FC = () => {
+  const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const webAppAccessMode = useGlobalPublicStore(s => s.webAppAccessMode)
   const searchParams = useSearchParams()
   const router = useRouter()
 
   const redirectUrl = searchParams.get('redirect_url')
   const tokenFromUrl = searchParams.get('web_sso_token')
   const message = searchParams.get('message')
+  const code = searchParams.get('code')
 
-  const showErrorToast = (message: string) => {
+  const getSigninUrl = useCallback(() => {
+    const params = new URLSearchParams(searchParams)
+    params.delete('message')
+    params.delete('code')
+    return `/webapp-signin?${params.toString()}`
+  }, [searchParams])
+
+  const backToHome = useCallback(() => {
+    removeAccessToken()
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router])
+
+  const showErrorToast = (msg: string) => {
     Toast.notify({
       type: 'error',
-      message,
+      message: msg,
     })
   }
 
-  const getAppCodeFromRedirectUrl = () => {
+  const getAppCodeFromRedirectUrl = useCallback(() => {
     const appCode = redirectUrl?.split('/').pop()
     if (!appCode)
       return null
 
     return appCode
-  }
-
-  const processTokenAndRedirect = async () => {
-    const appCode = getAppCodeFromRedirectUrl()
-    if (!appCode || !tokenFromUrl || !redirectUrl) {
-      showErrorToast('redirect url or app code or token is invalid.')
-      return
-    }
-
-    await setAccessToken(appCode, tokenFromUrl)
-    router.push(redirectUrl)
-  }
-
-  const handleSSOLogin = async (protocol: string) => {
-    const appCode = getAppCodeFromRedirectUrl()
-    if (!appCode || !redirectUrl) {
-      showErrorToast('redirect url or app code is invalid.')
-      return
-    }
-
-    switch (protocol) {
-      case 'saml': {
-        const samlRes = await fetchWebSAMLSSOUrl(appCode, redirectUrl)
-        router.push(samlRes.url)
-        break
-      }
-      case 'oidc': {
-        const oidcRes = await fetchWebOIDCSSOUrl(appCode, redirectUrl)
-        router.push(oidcRes.url)
-        break
-      }
-      case 'oauth2': {
-        const oauth2Res = await fetchWebOAuth2SSOUrl(appCode, redirectUrl)
-        router.push(oauth2Res.url)
-        break
-      }
-      default:
-        showErrorToast('SSO protocol is not supported.')
-    }
-  }
+  }, [redirectUrl])
 
   useEffect(() => {
-    const init = async () => {
-      const res = await fetchSystemFeatures()
-      const protocol = res.sso_enforced_for_web_protocol
+    (async () => {
+      if (message)
+        return
 
-      if (message) {
-        showErrorToast(message)
+      const appCode = getAppCodeFromRedirectUrl()
+      if (appCode && tokenFromUrl && redirectUrl) {
+        localStorage.setItem('webapp_access_token', tokenFromUrl)
+        const tokenResp = await fetchAccessToken({ appCode, webAppAccessToken: tokenFromUrl })
+        await setAccessToken(appCode, tokenResp.access_token)
+        router.replace(redirectUrl)
         return
       }
-
-      if (!tokenFromUrl) {
-        await handleSSOLogin(protocol)
-        return
+      if (appCode && redirectUrl && localStorage.getItem('webapp_access_token')) {
+        const tokenResp = await fetchAccessToken({ appCode, webAppAccessToken: localStorage.getItem('webapp_access_token') })
+        await setAccessToken(appCode, tokenResp.access_token)
+        router.replace(redirectUrl)
       }
+    })()
+  }, [getAppCodeFromRedirectUrl, redirectUrl, router, tokenFromUrl, message])
 
-      await processTokenAndRedirect()
-    }
+  useEffect(() => {
+    if (webAppAccessMode && webAppAccessMode === AccessMode.PUBLIC && redirectUrl)
+      router.replace(redirectUrl)
+  }, [webAppAccessMode, router, redirectUrl])
 
-    init()
-  }, [message, tokenFromUrl]) // Added dependencies to useEffect
-
-  return (
-    <div className="flex items-center justify-center h-full">
-      <div className={cn('flex flex-col items-center w-full grow justify-center', 'px-6', 'md:px-[108px]')}>
-        <Loading type='area' />
-      </div>
+  if (tokenFromUrl) {
+    return <div className='flex h-full items-center justify-center'>
+      <Loading />
     </div>
-  )
+  }
+
+  if (message) {
+    return <div className='flex h-full flex-col items-center justify-center gap-y-4'>
+      <AppUnavailable className='h-auto w-auto' code={code || t('share.common.appUnavailable')} unknownReason={message} />
+      <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{code === '403' ? t('common.userProfile.logout') : t('share.login.backToHome')}</span>
+    </div>
+  }
+  if (!redirectUrl) {
+    showErrorToast('redirect url is invalid.')
+    return <div className='flex h-full items-center justify-center'>
+      <AppUnavailable code={t('share.common.appUnavailable')} unknownReason='redirect url is invalid.' />
+    </div>
+  }
+  if (webAppAccessMode && webAppAccessMode === AccessMode.PUBLIC) {
+    return <div className='flex h-full items-center justify-center'>
+      <Loading />
+    </div>
+  }
+  if (!systemFeatures.webapp_auth.enabled) {
+    return <div className="flex h-full items-center justify-center">
+      <p className='system-xs-regular text-text-tertiary'>{t('login.webapp.disabled')}</p>
+    </div>
+  }
+  if (webAppAccessMode && (webAppAccessMode === AccessMode.ORGANIZATION || webAppAccessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS)) {
+    return <div className='w-full max-w-[400px]'>
+      <NormalForm />
+    </div>
+  }
+
+  if (webAppAccessMode && webAppAccessMode === AccessMode.EXTERNAL_MEMBERS)
+    return <ExternalMemberSsoAuth />
+
+  return <div className='flex h-full flex-col items-center justify-center gap-y-4'>
+    <AppUnavailable className='h-auto w-auto' isUnknownReason={true} />
+    <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{t('share.login.backToHome')}</span>
+  </div>
 }
 
 export default React.memo(WebSSOForm)

web/app/account/account-page/index.tsx

@@ -16,6 +16,7 @@ import { ToastContext } from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
 import { IS_CE_EDITION } from '@/config'
 import Input from '@/app/components/base/input'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const titleClassName = `
   system-sm-semibold text-text-secondary
@@ -28,7 +29,7 @@ const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
 
 export default function AccountPage() {
   const { t } = useTranslation()
-  const { systemFeatures } = useAppContext()
+  const { systemFeatures } = useGlobalPublicStore()
   const { mutateUserProfile, userProfile, apps } = useAppContext()
   const { notify } = useContext(ToastContext)
   const [editNameModalVisible, setEditNameModalVisible] = useState(false)
@@ -133,7 +134,7 @@ export default function AccountPage() {
         <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
       </div>
       <div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
-        <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
+        <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size={64} />
         <div className='ml-4'>
           <p className='system-xl-semibold text-text-primary'>{userProfile.name}</p>
           <p className='system-xs-regular text-text-tertiary'>{userProfile.email}</p>

web/app/account/header.tsx

@@ -5,9 +5,11 @@ import { useRouter } from 'next/navigation'
 import Button from '../components/base/button'
 import Avatar from './avatar'
 import LogoSite from '@/app/components/base/logo/logo-site'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Header = () => {
   const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
   const router = useRouter()
 
   const back = () => {
@@ -25,7 +27,7 @@ const Header = () => {
       <div className='flex items-center flex-shrink-0 gap-3'>
         <Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>
           <RiRobot2Line className='w-4 h-4' />
-          <p>{t('common.account.studio')}</p>
+          <p>{!systemFeatures.branding.enabled && 'Dify '}{t('common.account.studio')}</p>
           <RiArrowRightUpLine className='w-4 h-4' />
         </Button>
         <div className='w-[1px] h-4 bg-divider-regular' />

web/app/account/layout.tsx

@@ -32,9 +32,4 @@ const Layout = ({ children }: { children: ReactNode }) => {
     </>
   )
 }
-
-export const metadata = {
-  title: 'Dify',
-}
-
 export default Layout

web/app/account/page.tsx

@@ -1,6 +1,11 @@
+'use client'
+import { useTranslation } from 'react-i18next'
 import AccountPage from './account-page'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 export default function Account() {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.account'))
   return <div className='max-w-[640px] w-full mx-auto pt-12 px-6'>
     <AccountPage />
   </div>

web/app/activate/activateForm.tsx

@@ -7,8 +7,10 @@ import Button from '@/app/components/base/button'
 
 import { invitationCheck } from '@/service/common'
 import Loading from '@/app/components/base/loading'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 const ActivateForm = () => {
+  useDocumentTitle('')
   const router = useRouter()
   const { t } = useTranslation()
   const searchParams = useSearchParams()

web/app/activate/page.tsx

@@ -1,10 +1,13 @@
+'use client'
 import React from 'react'
 import Header from '../signin/_header'
 import style from '../signin/page.module.css'
 import ActivateForm from './activateForm'
 import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Activate = () => {
+  const { systemFeatures } = useGlobalPublicStore()
   return (
     <div className={cn(
       style.background,
@@ -21,9 +24,9 @@ const Activate = () => {
       }>
         <Header />
         <ActivateForm />
-        <div className='px-8 py-6 text-sm font-normal text-gray-500'>
+        {!systemFeatures.branding.enabled && <div className='px-8 py-6 text-sm font-normal text-gray-500'>
           © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
-        </div>
+        </div>}
       </div>
     </div>
   )

web/app/components/app-sidebar/app-info.tsx

@@ -5,6 +5,7 @@ import { RiArrowDownSLine } from '@remixicon/react'
 import React, { useCallback, useState } from 'react'
 import AppIcon from '../base/app-icon'
 import SwitchAppModal from '../app/switch-app-modal'
+import AccessControl from '../app/app-access-control'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import {
@@ -18,7 +19,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import AppsContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
-import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
+import { copyApp, deleteApp, exportAppConfig, fetchAppDetail, updateAppInfo } from '@/service/apps'
 import DuplicateAppModal from '@/app/components/app/duplicate-modal'
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
@@ -50,6 +51,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
   const [showSwitchTip, setShowSwitchTip] = useState<string>('')
   const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
   const [showImportDSLModal, setShowImportDSLModal] = useState<boolean>(false)
+  const [showAccessControl, setShowAccessControl] = useState<boolean>(false)
   const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
 
   const mutateApps = useContextSelector(
@@ -175,7 +177,20 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
       })
     }
     setShowConfirmDelete(false)
-  }, [appDetail, mutateApps, notify, onPlanInfoChanged, replace, t])
+  }, [appDetail, mutateApps, notify, onPlanInfoChanged, replace, setAppDetail, t])
+
+  const handleClickAccessControl = useCallback(() => {
+    if (!appDetail)
+      return
+    setShowAccessControl(true)
+    setOpen(false)
+  }, [appDetail])
+  const handleAccessControlUpdate = useCallback(() => {
+    fetchAppDetail({ url: '/apps', id: appDetail!.id }).then((res) => {
+      setAppDetail(res)
+      setShowAccessControl(false)
+    })
+  }, [appDetail, setAppDetail])
 
   const { isCurrentWorkspaceEditor } = useAppContext()
 
@@ -374,6 +389,10 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                   </div>
                 )
               }
+              <Divider />
+              <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={handleClickAccessControl}>
+                <span className='text-gray-700 text-sm leading-5'>{t('app.accessControl')}</span>
+              </div>
               <Divider className="!my-1" />
               <div className='group h-9 py-2 px-3 mx-1 flex items-center hover:bg-red-50 rounded-lg cursor-pointer' onClick={() => {
                 setOpen(false)
@@ -466,6 +485,11 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
             onClose={() => setSecretEnvList([])}
           />
         )}
+        {
+          showAccessControl && <AccessControl app={appDetail}
+            onConfirm={handleAccessControlUpdate}
+            onClose={() => { setShowAccessControl(false) }} />
+        }
       </div>
     </PortalToFollowElem>
   )

web/app/components/app-sidebar/index.tsx

@@ -17,7 +17,7 @@ export type IAppDetailNavProps = {
   desc: string
   isExternal?: boolean
   icon: string
-  icon_background: string
+  icon_background: string | null
   navigation: Array<{
     name: string
     href: string

web/app/components/app/app-access-control/access-control-dialog.tsx

@@ -0,0 +1,61 @@
+import { Fragment, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+type DialogProps = {
+  className?: string
+  children: ReactNode
+  show: boolean
+  onClose?: () => void
+}
+
+const AccessControlDialog = ({
+  className,
+  children,
+  show,
+  onClose,
+}: DialogProps) => {
+  const close = useCallback(() => {
+    onClose?.()
+  }, [onClose])
+  return (
+    <Transition appear show={show} as={Fragment}>
+      <Dialog as="div" open={true} className="relative z-20" onClose={() => null}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-background-overlay bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 flex items-center justify-center">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className={cn('w-[600px] min-h-[323px] h-auto bg-components-panel-bg shadow-xl rounded-2xl transition-all transform relative p-0 overflow-y-auto', className)}>
+              <div onClick={() => close()} className="absolute top-5 right-5 w-8 h-8 flex items-center justify-center cursor-pointer z-10">
+                <RiCloseLine className='w-5 h-5' />
+              </div>
+              {children}
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition >
+  )
+}
+
+export default AccessControlDialog

web/app/components/app/app-access-control/access-control-item.tsx

@@ -0,0 +1,30 @@
+'use client'
+import type { FC, PropsWithChildren } from 'react'
+import useAccessControlStore from '../../../../context/access-control-store'
+import type { AccessMode } from '@/models/access-control'
+
+type AccessControlItemProps = PropsWithChildren<{
+  type: AccessMode
+}>
+
+const AccessControlItem: FC<AccessControlItemProps> = ({ type, children }) => {
+  const { currentMenu, setCurrentMenu } = useAccessControlStore(s => ({ currentMenu: s.currentMenu, setCurrentMenu: s.setCurrentMenu }))
+  if (currentMenu !== type) {
+    return <div
+      className="rounded-[10px] border-[1px] cursor-pointer
+      border-components-option-card-option-border bg-components-option-card-option-bg
+      hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover"
+      onClick={() => setCurrentMenu(type)} >
+      {children}
+    </div>
+  }
+
+  return <div className="rounded-[10px] border-[1.5px]
+  border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-sm">
+    {children}
+  </div>
+}
+
+AccessControlItem.displayName = 'AccessControlItem'
+
+export default AccessControlItem

web/app/components/app/app-access-control/add-member-or-group-pop.tsx

@@ -0,0 +1,204 @@
+'use client'
+import { RiAddCircleFill, RiArrowRightSLine, RiOrganizationChart } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useDebounce } from 'ahooks'
+import { FloatingOverlay } from '@floating-ui/react'
+import Avatar from '../../base/avatar'
+import Button from '../../base/button'
+import Checkbox from '../../base/checkbox'
+import Input from '../../base/input'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
+import Loading from '../../base/loading'
+import useAccessControlStore from '../../../../context/access-control-store'
+import classNames from '@/utils/classnames'
+import { useSearchForWhiteListCandidates } from '@/service/access-control'
+import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
+import { SubjectType } from '@/models/access-control'
+import { useSelector } from '@/context/app-context'
+
+export default function AddMemberOrGroupDialog() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [keyword, setKeyword] = useState('')
+  const selectedGroupsForBreadcrumb = useAccessControlStore(s => s.selectedGroupsForBreadcrumb)
+  const debouncedKeyword = useDebounce(keyword, { wait: 500 })
+
+  const lastAvailableGroup = selectedGroupsForBreadcrumb[selectedGroupsForBreadcrumb.length - 1]
+  const { isLoading, isFetchingNextPage, fetchNextPage, data } = useSearchForWhiteListCandidates({ keyword: debouncedKeyword, groupId: lastAvailableGroup?.id, resultsPerPage: 10 }, open)
+  const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setKeyword(e.target.value)
+  }
+
+  const anchorRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const hasMore = data?.pages?.[0].hasMore ?? false
+    let observer: IntersectionObserver | undefined
+    if (anchorRef.current) {
+      observer = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && !isLoading && hasMore)
+          fetchNextPage()
+      }, { rootMargin: '20px' })
+      observer.observe(anchorRef.current)
+    }
+    return () => observer?.disconnect()
+  }, [isLoading, fetchNextPage, anchorRef, data])
+
+  return <PortalToFollowElem open={open} onOpenChange={setOpen} offset={{ crossAxis: 300 }} placement='bottom-end'>
+    <PortalToFollowElemTrigger asChild>
+      <Button variant='ghost-accent' size='small' className='shrink-0 flex items-center gap-x-0.5' onClick={() => setOpen(!open)}>
+        <RiAddCircleFill className='w-4 h-4' />
+        <span>{t('common.operation.add')}</span>
+      </Button>
+    </PortalToFollowElemTrigger>
+    {open && <FloatingOverlay />}
+    <PortalToFollowElemContent className='z-[25]'>
+      <div className='w-[400px] max-h-[400px] relative overflow-y-auto flex flex-col border-[0.5px] border-components-panel-border rounded-xl bg-components-panel-bg-blur backdrop-blur-[5px] shadow-lg'>
+        <div className='p-2 pb-0.5 sticky top-0 bg-components-panel-bg-blur backdrop-blur-[5px] z-1'>
+          <Input value={keyword} onChange={handleKeywordChange} showLeftIcon placeholder={t('app.accessControlDialog.operateGroupAndMember.searchPlaceholder') as string} />
+        </div>
+        {
+          isLoading
+            ? <div className='p-1'><Loading /></div>
+            : (data?.pages?.length ?? 0) > 0
+              ? <>
+                <div className='flex items-center h-7 px-2 py-0.5'>
+                  <SelectedGroupsBreadCrumb />
+                </div>
+                <div className='p-1'>
+                  {renderGroupOrMember(data?.pages ?? [])}
+                  {isFetchingNextPage && <Loading />}
+                </div>
+                <div ref={anchorRef} className='h-0'> </div>
+              </>
+              : <div className='flex items-center justify-center h-7 px-2 py-0.5'>
+                <span className='system-xs-regular text-text-tertiary'>{t('app.accessControlDialog.operateGroupAndMember.noResult')}</span>
+              </div>
+        }
+      </div>
+    </PortalToFollowElemContent>
+  </PortalToFollowElem>
+}
+
+type GroupOrMemberData = { subjects: Subject[]; currPage: number }[]
+function renderGroupOrMember(data: GroupOrMemberData) {
+  return data?.map((page) => {
+    return <div key={`search_group_member_page_${page.currPage}`}>
+      {page.subjects?.map((item, index) => {
+        if (item.subjectType === SubjectType.GROUP)
+          return <GroupItem key={index} group={(item as SubjectGroup).groupData} />
+        return <MemberItem key={index} member={(item as SubjectAccount).accountData} />
+      })}
+    </div>
+  }) ?? null
+}
+
+function SelectedGroupsBreadCrumb() {
+  const selectedGroupsForBreadcrumb = useAccessControlStore(s => s.selectedGroupsForBreadcrumb)
+  const setSelectedGroupsForBreadcrumb = useAccessControlStore(s => s.setSelectedGroupsForBreadcrumb)
+  const { t } = useTranslation()
+
+  const handleBreadCrumbClick = useCallback((index: number) => {
+    const newGroups = selectedGroupsForBreadcrumb.slice(0, index + 1)
+    setSelectedGroupsForBreadcrumb(newGroups)
+  }, [setSelectedGroupsForBreadcrumb, selectedGroupsForBreadcrumb])
+  const handleReset = useCallback(() => {
+    setSelectedGroupsForBreadcrumb([])
+  }, [setSelectedGroupsForBreadcrumb])
+  return <div className='flex items-center h-7 px-2 py-0.5 gap-x-0.5'>
+    <span className={classNames('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'text-text-accent cursor-pointer')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span>
+    {selectedGroupsForBreadcrumb.map((group, index) => {
+      return <div key={index} className='flex items-center gap-x-0.5 text-text-tertiary system-xs-regular'>
+        <span>/</span>
+        <span className={index === selectedGroupsForBreadcrumb.length - 1 ? '' : 'text-text-accent cursor-pointer'} onClick={() => handleBreadCrumbClick(index)}>{group.name}</span>
+      </div>
+    })}
+  </div>
+}
+
+type GroupItemProps = {
+  group: AccessControlGroup
+}
+function GroupItem({ group }: GroupItemProps) {
+  const { t } = useTranslation()
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
+  const selectedGroupsForBreadcrumb = useAccessControlStore(s => s.selectedGroupsForBreadcrumb)
+  const setSelectedGroupsForBreadcrumb = useAccessControlStore(s => s.setSelectedGroupsForBreadcrumb)
+  const isChecked = specificGroups.some(g => g.id === group.id)
+  const handleCheckChange = useCallback(() => {
+    if (!isChecked) {
+      const newGroups = [...specificGroups, group]
+      setSpecificGroups(newGroups)
+    }
+    else {
+      const newGroups = specificGroups.filter(g => g.id !== group.id)
+      setSpecificGroups(newGroups)
+    }
+  }, [specificGroups, setSpecificGroups, group, isChecked])
+
+  const handleExpandClick = useCallback(() => {
+    setSelectedGroupsForBreadcrumb([...selectedGroupsForBreadcrumb, group])
+  }, [selectedGroupsForBreadcrumb, setSelectedGroupsForBreadcrumb, group])
+  return <BaseItem>
+    <Checkbox checked={isChecked} className='w-4 h-4 shrink-0' onCheck={handleCheckChange} />
+    <div className='flex item-center grow'>
+      <div className='w-5 h-5 rounded-full bg-components-icon-bg-blue-solid overflow-hidden mr-2'>
+        <div className='w-full h-full flex items-center justify-center bg-access-app-icon-mask-bg'>
+          <RiOrganizationChart className='w-[14px] h-[14px] text-components-avatar-shape-fill-stop-0' />
+        </div>
+      </div>
+      <p className='system-sm-medium text-text-secondary mr-1'>{group.name}</p>
+      <p className='system-xs-regular text-text-tertiary'>{group.groupSize}</p>
+    </div>
+    <Button size="small" disabled={isChecked} variant='ghost-accent'
+      className='py-1 px-1.5 shrink-0 flex items-center justify-between' onClick={handleExpandClick}>
+      <span className='px-[3px]'>{t('app.accessControlDialog.operateGroupAndMember.expand')}</span>
+      <RiArrowRightSLine className='w-4 h-4' />
+    </Button>
+  </BaseItem>
+}
+
+type MemberItemProps = {
+  member: AccessControlAccount
+}
+function MemberItem({ member }: MemberItemProps) {
+  const currentUser = useSelector(s => s.userProfile)
+  const { t } = useTranslation()
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
+  const isChecked = specificMembers.some(m => m.id === member.id)
+  const handleCheckChange = useCallback(() => {
+    if (!isChecked) {
+      const newMembers = [...specificMembers, member]
+      setSpecificMembers(newMembers)
+    }
+    else {
+      const newMembers = specificMembers.filter(m => m.id !== member.id)
+      setSpecificMembers(newMembers)
+    }
+  }, [specificMembers, setSpecificMembers, member, isChecked])
+  return <BaseItem className='pr-3'>
+    <Checkbox checked={isChecked} className='w-4 h-4 shrink-0' onCheck={handleCheckChange} />
+    <div className='flex items-center grow'>
+      <div className='w-5 h-5 rounded-full bg-components-icon-bg-blue-solid overflow-hidden mr-2'>
+        <div className='w-full h-full flex items-center justify-center bg-access-app-icon-mask-bg'>
+          <Avatar className='w-[14px] h-[14px]' textClassName='text-[12px]' avatar={null} name={member.name} />
+        </div>
+      </div>
+      <p className='system-sm-medium text-text-secondary mr-1'>{member.name}</p>
+      {currentUser.email === member.email && <p className='system-xs-regular text-text-tertiary'>({t('common.you')})</p>}
+    </div>
+    <p className='system-xs-regular text-text-quaternary'>{member.email}</p>
+  </BaseItem>
+}
+
+type BaseItemProps = {
+  className?: string
+  children: React.ReactNode
+}
+function BaseItem({ children, className }: BaseItemProps) {
+  return <div className={classNames('p-1 pl-2 flex items-center space-x-2 hover:rounded-lg hover:bg-state-base-hover cursor-pointer', className)}>
+    {children}
+  </div>
+}

web/app/components/app/app-access-control/index.tsx

@@ -0,0 +1,110 @@
+'use client'
+import { Dialog } from '@headlessui/react'
+import { RiBuildingLine, RiGlobalLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect } from 'react'
+import Button from '../../base/button'
+import Toast from '../../base/toast'
+import useAccessControlStore from '../../../../context/access-control-store'
+import AccessControlDialog from './access-control-dialog'
+import AccessControlItem from './access-control-item'
+import SpecificGroupsOrMembers, { WebAppSSONotEnabledTip } from './specific-groups-or-members'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import type { App } from '@/types/app'
+import type { Subject } from '@/models/access-control'
+import { AccessMode, SubjectType } from '@/models/access-control'
+import { useUpdateAccessMode } from '@/service/access-control'
+
+type AccessControlProps = {
+  app: App
+  onClose: () => void
+  onConfirm?: () => void
+}
+
+export default function AccessControl(props: AccessControlProps) {
+  const { app, onClose, onConfirm } = props
+  const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const setAppId = useAccessControlStore(s => s.setAppId)
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  const currentMenu = useAccessControlStore(s => s.currentMenu)
+  const setCurrentMenu = useAccessControlStore(s => s.setCurrentMenu)
+  const hideTip = systemFeatures.webapp_auth.enabled
+    && (systemFeatures.webapp_auth.allow_sso
+      || systemFeatures.webapp_auth.allow_email_password_login
+      || systemFeatures.webapp_auth.allow_email_code_login)
+
+  useEffect(() => {
+    setAppId(app.id)
+    setCurrentMenu(app.access_mode ?? AccessMode.SPECIFIC_GROUPS_MEMBERS)
+  }, [app, setAppId, setCurrentMenu])
+
+  const { isPending, mutateAsync: updateAccessMode } = useUpdateAccessMode()
+  const handleConfirm = useCallback(async () => {
+    const submitData: {
+      appId: string
+      accessMode: AccessMode
+      subjects?: Pick<Subject, 'subjectId' | 'subjectType'>[]
+    } = { appId: app.id, accessMode: currentMenu }
+    if (currentMenu === AccessMode.SPECIFIC_GROUPS_MEMBERS) {
+      const subjects: Pick<Subject, 'subjectId' | 'subjectType'>[] = []
+      specificGroups.forEach((group) => {
+        subjects.push({ subjectId: group.id, subjectType: SubjectType.GROUP })
+      })
+      specificMembers.forEach((member) => {
+        subjects.push({
+          subjectId: member.id,
+          subjectType: SubjectType.ACCOUNT,
+        })
+      })
+      submitData.subjects = subjects
+    }
+    await updateAccessMode(submitData)
+    Toast.notify({ type: 'success', message: t('app.accessControlDialog.updateSuccess') })
+    onConfirm?.()
+  }, [updateAccessMode, app, specificGroups, specificMembers, t, onConfirm, currentMenu])
+  return <AccessControlDialog show onClose={onClose}>
+    <div className='flex flex-col gap-y-3'>
+      <div className='pb-3 pl-6 pr-14 pt-6'>
+        <Dialog.Title className='title-2xl-semi-bold text-text-primary'>{t('app.accessControlDialog.title')}</Dialog.Title>
+        <Dialog.Description className='system-xs-regular mt-1 text-text-tertiary'>{t('app.accessControlDialog.description')}</Dialog.Description>
+      </div>
+      <div className='px-6 pb-3 flex flex-col gap-y-1'>
+        <div className='leading-6'>
+          <p className='system-sm-medium'>{t('app.accessControlDialog.accessLabel')}</p>
+        </div>
+        <AccessControlItem type={AccessMode.ORGANIZATION}>
+          <div className='flex items-center p-3'>
+            <div className='grow flex items-center gap-x-2'>
+              <RiBuildingLine className='w-4 h-4 text-text-primary' />
+              <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.organization')}</p>
+            </div>
+          </div>
+        </AccessControlItem>
+        <AccessControlItem type={AccessMode.SPECIFIC_GROUPS_MEMBERS}>
+          <SpecificGroupsOrMembers />
+        </AccessControlItem>
+        <AccessControlItem type={AccessMode.EXTERNAL_MEMBERS}>
+          <div className='flex items-center p-3'>
+            <div className='flex grow items-center gap-x-2'>
+              <RiVerifiedBadgeLine className='h-4 w-4 text-text-primary' />
+              <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.external')}</p>
+            </div>
+            {!hideTip && <WebAppSSONotEnabledTip />}
+          </div>
+        </AccessControlItem>
+        <AccessControlItem type={AccessMode.PUBLIC}>
+          <div className='flex items-center p-3 gap-x-2'>
+            <RiGlobalLine className='w-4 h-4 text-text-primary' />
+            <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.anyone')}</p>
+          </div>
+        </AccessControlItem>
+      </div>
+      <div className='flex items-center justify-end p-6 pt-5 gap-x-2'>
+        <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button disabled={isPending} loading={isPending} variant='primary' onClick={handleConfirm}>{t('common.operation.confirm')}</Button>
+      </div>
+    </div>
+  </AccessControlDialog>
+}

web/app/components/app/app-access-control/specific-groups-or-members.tsx

@@ -0,0 +1,127 @@
+'use client'
+import { RiAlertFill, RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect } from 'react'
+import Avatar from '../../base/avatar'
+import Tooltip from '../../base/tooltip'
+import Loading from '../../base/loading'
+import useAccessControlStore from '../../../../context/access-control-store'
+import AddMemberOrGroupDialog from './add-member-or-group-pop'
+import type { AccessControlAccount, AccessControlGroup } from '@/models/access-control'
+import { AccessMode } from '@/models/access-control'
+import { useAppWhiteListSubjects } from '@/service/access-control'
+
+export default function SpecificGroupsOrMembers() {
+  const currentMenu = useAccessControlStore(s => s.currentMenu)
+  const appId = useAccessControlStore(s => s.appId)
+  const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
+  const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
+  const { t } = useTranslation()
+
+  const { isPending, data } = useAppWhiteListSubjects(appId, Boolean(appId) && currentMenu === AccessMode.SPECIFIC_GROUPS_MEMBERS)
+  useEffect(() => {
+    setSpecificGroups(data?.groups ?? [])
+    setSpecificMembers(data?.members ?? [])
+  }, [data, setSpecificGroups, setSpecificMembers])
+
+  if (currentMenu !== AccessMode.SPECIFIC_GROUPS_MEMBERS) {
+    return <div className='flex items-center p-3'>
+      <div className='grow flex items-center gap-x-2'>
+        <RiLockLine className='w-4 h-4 text-text-primary' />
+        <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.specific')}</p>
+      </div>
+    </div>
+  }
+
+  return <div>
+    <div className='flex items-center gap-x-1 p-3'>
+      <div className='grow flex items-center gap-x-1'>
+        <RiLockLine className='w-4 h-4 text-text-primary' />
+        <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.specific')}</p>
+      </div>
+      <div className='flex items-center gap-x-1'>
+        <AddMemberOrGroupDialog />
+      </div>
+    </div>
+    <div className='px-1 pb-1'>
+      <div className='bg-background-section rounded-lg p-2 flex flex-col gap-y-2 max-h-[400px] overflow-y-auto'>
+        {isPending ? <Loading /> : <RenderGroupsAndMembers />}
+      </div>
+    </div>
+  </div >
+}
+
+function RenderGroupsAndMembers() {
+  const { t } = useTranslation()
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  if (specificGroups.length <= 0 && specificMembers.length <= 0)
+    return <div className='px-2 pt-5 pb-1.5'><p className='system-xs-regular text-text-tertiary text-center'>{t('app.accessControlDialog.noGroupsOrMembers')}</p></div>
+  return <>
+    <p className='system-2xs-medium-uppercase text-text-tertiary sticky top-0'>{t('app.accessControlDialog.groups', { count: specificGroups.length ?? 0 })}</p>
+    <div className='flex flex-row flex-wrap gap-1'>
+      {specificGroups.map((group, index) => <GroupItem key={index} group={group} />)}
+    </div>
+    <p className='system-2xs-medium-uppercase text-text-tertiary sticky top-0'>{t('app.accessControlDialog.members', { count: specificMembers.length ?? 0 })}</p>
+    <div className='flex flex-row flex-wrap gap-1'>
+      {specificMembers.map((member, index) => <MemberItem key={index} member={member} />)}
+    </div>
+  </>
+}
+
+type GroupItemProps = {
+  group: AccessControlGroup
+}
+function GroupItem({ group }: GroupItemProps) {
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
+  const handleRemoveGroup = useCallback(() => {
+    setSpecificGroups(specificGroups.filter(g => g.id !== group.id))
+  }, [group, setSpecificGroups, specificGroups])
+  return <BaseItem icon={<RiOrganizationChart className='w-[14px] h-[14px] text-components-avatar-shape-fill-stop-0' />}
+    onRemove={handleRemoveGroup}>
+    <p className='system-xs-regular text-text-primary'>{group.name}</p>
+    <p className='system-xs-regular text-text-tertiary'>{group.groupSize}</p>
+  </BaseItem>
+}
+
+type MemberItemProps = {
+  member: AccessControlAccount
+}
+function MemberItem({ member }: MemberItemProps) {
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
+  const handleRemoveMember = useCallback(() => {
+    setSpecificMembers(specificMembers.filter(m => m.id !== member.id))
+  }, [member, setSpecificMembers, specificMembers])
+  return <BaseItem icon={<Avatar className='w-[14px] h-[14px]' textClassName='text-[12px]' avatar={null} name={member.name} />}
+    onRemove={handleRemoveMember}>
+    <p className='system-xs-regular text-text-primary'>{member.name}</p>
+  </BaseItem>
+}
+
+type BaseItemProps = {
+  icon: React.ReactNode
+  children: React.ReactNode
+  onRemove?: () => void
+}
+function BaseItem({ icon, onRemove, children }: BaseItemProps) {
+  return <div className='rounded-full border-[0.5px] bg-components-badge-white-to-dark shadow-xs p-1 pr-1.5 group flex items-center flex-row gap-x-1'>
+    <div className='w-5 h-5 rounded-full bg-components-icon-bg-blue-solid overflow-hidden'>
+      <div className='w-full h-full flex items-center justify-center bg-access-app-icon-mask-bg'>
+        {icon}
+      </div>
+    </div>
+    {children}
+    <div className='flex items-center justify-center w-4 h-4 cursor-pointer' onClick={onRemove}>
+      <RiCloseCircleFill className='w-[14px] h-[14px] text-text-quaternary' />
+    </div>
+  </div>
+}
+
+export function WebAppSSONotEnabledTip() {
+  const { t } = useTranslation()
+  return <Tooltip asChild={false} popupContent={t('app.accessControlDialog.webAppSSONotEnabledTip')}>
+    <RiAlertFill className='w-4 h-4 text-text-warning-secondary shrink-0' />
+  </Tooltip>
+}

web/app/components/app/app-publisher/index.tsx

@@ -1,13 +1,28 @@
 import {
   memo,
   useCallback,
+  useEffect,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import dayjs from 'dayjs'
-import { RiArrowDownSLine, RiPlanetLine } from '@remixicon/react'
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiBuildingLine,
+  RiGlobalLine,
+  RiLockLine,
+  RiPlanetLine,
+  RiPlayCircleLine,
+  RiPlayList2Line,
+  RiVerifiedBadgeLine,
+} from '@remixicon/react'
 import Toast from '../../base/toast'
 import type { ModelAndParameter } from '../configuration/debug/types'
+import Divider from '../../base/divider'
+import AccessControl from '../app-access-control'
+import Loading from '../../base/loading'
+import Tooltip from '../../base/tooltip'
 import SuggestedAction from './suggested-action'
 import PublishWithMultipleModel from './publish-with-multiple-model'
 import Button from '@/app/components/base/button'
@@ -20,13 +35,15 @@ import { fetchInstalledAppList } from '@/service/explore'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useGetLanguage } from '@/context/i18n'
-import { PlayCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
-import { LeftIndent02 } from '@/app/components/base/icons/src/vender/line/editor'
 import { FileText } from '@/app/components/base/icons/src/vender/line/files'
 import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
 import type { InputVar } from '@/app/components/workflow/types'
 import { appDefaultIconBackground } from '@/config'
+import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/access-control'
+import { AccessMode } from '@/models/access-control'
+import { fetchAppDetail } from '@/service/apps'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export type AppPublisherProps = {
   disabled?: boolean
@@ -65,10 +82,32 @@ const AppPublisher = ({
   const [published, setPublished] = useState(false)
   const [open, setOpen] = useState(false)
   const appDetail = useAppStore(state => state.appDetail)
+  const setAppDetail = useAppStore(s => s.setAppDetail)
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
   const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
   const appURL = `${appBaseURL}/${appMode}/${accessToken}`
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
+  const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
 
+  useEffect(() => {
+    if (open && appDetail)
+      refetch()
+  }, [open, appDetail, refetch])
+
+  const [showAppAccessControl, setShowAppAccessControl] = useState(false)
+  const [isAppAccessSet, setIsAppAccessSet] = useState(true)
+  useEffect(() => {
+    if (appDetail && appAccessSubjects) {
+      if (appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0)
+        setIsAppAccessSet(false)
+      else
+        setIsAppAccessSet(true)
+    }
+    else {
+      setIsAppAccessSet(true)
+    }
+  }, [appAccessSubjects, appDetail])
   const language = useGetLanguage()
   const formatTimeFromNow = useCallback((time: number) => {
     return dayjs(time).locale(language === 'zh_Hans' ? 'zh-cn' : language.replace('_', '-')).fromNow()
@@ -120,6 +159,13 @@ const AppPublisher = ({
     }
   }, [appDetail?.id])
 
+  const handleAccessControlUpdate = useCallback(() => {
+    fetchAppDetail({ url: '/apps', id: appDetail!.id }).then((res) => {
+      setAppDetail(res)
+      setShowAppAccessControl(false)
+    })
+  }, [appDetail, setAppDetail])
+
   const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
 
   return (
@@ -161,12 +207,10 @@ const AppPublisher = ({
                     `}
                     size='small'
                     onClick={handleRestore}
-                    disabled={published}
-                  >
+                    disabled={published}>
                     {t('workflow.common.restore')}
                   </Button>
-                </div>
-              )
+                </div>)
               : (
                 <div className='flex items-center h-[18px] leading-[18px] text-[13px] font-medium text-gray-700'>
                   {t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
@@ -196,58 +240,129 @@ const AppPublisher = ({
               )
             }
           </div>
-          <div className='p-4 pt-3 border-t-[0.5px] border-t-black/5'>
-            <SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
-            {appDetail?.mode === 'workflow'
-              ? (
-                <SuggestedAction
-                  disabled={!publishedAt}
-                  link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                  icon={<LeftIndent02 className='w-4 h-4' />}
-                >
-                  {t('workflow.common.batchRunApp')}
-                </SuggestedAction>
-              )
-              : (
-                <SuggestedAction
+          {(isGettingUserCanAccessApp || isGettingAppWhiteListSubjects)
+            ? <div className='py-2'><Loading /></div>
+            : <>
+
+              <Divider className='my-0' />
+              <div className='p-4 pt-3'>
+                <div className='flex items-center h-6'>
+                  <p className='system-xs-medium text-text-tertiary'>{t('app.publishApp.title')}</p>
+                </div>
+                <div className='flex h-8 cursor-pointer items-center gap-x-0.5  rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2 hover:bg-primary-50 hover:text-text-accent'
                   onClick={() => {
-                    setEmbeddingModalOpen(true)
-                    handleTrigger()
-                  }}
-                  disabled={!publishedAt}
-                  icon={<CodeBrowser className='w-4 h-4' />}
-                >
-                  {t('workflow.common.embedIntoSite')}
-                </SuggestedAction>
-              )}
-            <SuggestedAction
-              onClick={() => {
-                handleOpenInExplore()
-              }}
-              disabled={!publishedAt}
-              icon={<RiPlanetLine className='w-4 h-4' />}
-            >
-              {t('workflow.common.openInExplore')}
-            </SuggestedAction>
-            <SuggestedAction disabled={!publishedAt} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
-            {appDetail?.mode === 'workflow' && (
-              <WorkflowToolConfigureButton
-                disabled={!publishedAt}
-                published={!!toolPublished}
-                detailNeedUpdate={!!toolPublished && published}
-                workflowAppId={appDetail?.id}
-                icon={{
-                  content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
-                  background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
-                }}
-                name={appDetail?.name}
-                description={appDetail?.description}
-                inputs={inputs}
-                handlePublish={handlePublish}
-                onRefreshData={onRefreshData}
-              />
-            )}
-          </div>
+                    setShowAppAccessControl(true)
+                  }}>
+                  <div className='flex grow items-center gap-x-1.5 pr-1 overflow-hidden'>
+                    {appDetail?.access_mode === AccessMode.ORGANIZATION
+                      && <>
+                        <RiBuildingLine className='h-4 w-4 shrink-0 text-text-secondary' />
+                        <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>
+                      </>
+                    }
+                    {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS
+                      && <>
+                        <RiLockLine className='h-4 w-4 shrink-0 text-text-secondary' />
+                        <div className='grow truncate'>
+                          <span className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</span>
+                        </div>
+                      </>
+                    }
+                    {appDetail?.access_mode === AccessMode.PUBLIC
+                      && <>
+                        <RiGlobalLine className='h-4 w-4 shrink-0 text-text-secondary' />
+                        <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>
+                      </>
+                    }
+                    {appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS
+                      && <>
+                        <RiVerifiedBadgeLine className='h-4 w-4 shrink-0 text-text-secondary' />
+                        <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.external')}</p>
+                      </>
+                    }
+                  </div>
+                  {!isAppAccessSet && <p className='system-xs-regular shrink-0 text-text-tertiary'>{t('app.publishApp.notSet')}</p>}
+                  <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
+                    <RiArrowRightSLine className='h-4 w-4 text-text-quaternary' />
+                  </div>
+                </div>
+                {!isAppAccessSet && <p className='system-xs-regular mt-1 text-text-warning'>{t('app.publishApp.notSetDesc')}</p>}
+              </div>
+              <div className='flex flex-col gap-y-1 border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
+                <Tooltip triggerClassName='flex' disabled={!systemFeatures.webapp_auth.enabled || appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS || userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                  <SuggestedAction
+                    className='flex-1'
+                    disabled={!publishedAt || (systemFeatures.webapp_auth.enabled && appDetail?.access_mode !== AccessMode.EXTERNAL_MEMBERS && !userCanAccessApp?.result)}
+                    link={appURL}
+                    icon={<RiPlayCircleLine className='h-4 w-4' />}
+                  >
+                    {t('workflow.common.runApp')}
+                  </SuggestedAction>
+                </Tooltip>
+                {(appDetail?.mode === 'workflow' || appDetail?.mode === 'completion')
+                  ? (
+                    <Tooltip triggerClassName='flex' disabled={!systemFeatures.webapp_auth.enabled || appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS || userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                      <SuggestedAction
+                        className='flex-1'
+                        disabled={!publishedAt || (systemFeatures.webapp_auth.enabled && appDetail?.access_mode !== AccessMode.EXTERNAL_MEMBERS && !userCanAccessApp?.result)}
+                        link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
+                        icon={<RiPlayList2Line className='h-4 w-4' />}
+                      >
+                        {t('workflow.common.batchRunApp')}
+                      </SuggestedAction>
+                    </Tooltip>
+                  )
+                  : (
+                    <div className='flex'>
+                      <SuggestedAction
+                        onClick={() => {
+                          setEmbeddingModalOpen(true)
+                          handleTrigger()
+                        }}
+                        disabled={!publishedAt}
+                        icon={<CodeBrowser className='h-4 w-4' />}
+                      >
+                        {t('workflow.common.embedIntoSite')}
+                      </SuggestedAction>
+                    </div>
+                  )}
+                <Tooltip triggerClassName='flex' disabled={!systemFeatures.webapp_auth.enabled || userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                  <SuggestedAction
+                    className='flex-1'
+                    onClick={() => {
+                      publishedAt && handleOpenInExplore()
+                    }}
+                    disabled={!publishedAt || (systemFeatures.webapp_auth.enabled && !userCanAccessApp?.result)}
+                    icon={<RiPlanetLine className='h-4 w-4' />}
+                  >
+                    {t('workflow.common.openInExplore')}
+                  </SuggestedAction>
+                </Tooltip>
+                <div className='flex' >
+                  <SuggestedAction disabled={!publishedAt} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
+                </div>
+
+                {appDetail?.mode === 'workflow' && (
+                  <div className='flex' >
+                    <WorkflowToolConfigureButton
+                      disabled={!publishedAt}
+                      published={!!toolPublished}
+                      detailNeedUpdate={!!toolPublished && published}
+                      workflowAppId={appDetail?.id}
+                      icon={{
+                        content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
+                        background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
+                      }}
+                      name={appDetail?.name}
+                      description={appDetail?.description}
+                      inputs={inputs}
+                      handlePublish={handlePublish}
+                      onRefreshData={onRefreshData}
+                    />
+                  </div>
+                )}
+              </div>
+            </>}
         </div>
       </PortalToFollowElemContent>
       <EmbeddedModal
@@ -257,6 +372,7 @@ const AppPublisher = ({
         appBaseUrl={appBaseURL}
         accessToken={accessToken}
       />
+      {showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
     </PortalToFollowElem >
   )
 }

web/app/components/app/app-publisher/suggested-action.tsx

@@ -8,22 +8,30 @@ export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement
   disabled?: boolean
 }>
 
-const SuggestedAction = ({ icon, link, disabled, children, className, ...props }: SuggestedActionProps) => (
-  <a
-    href={disabled ? undefined : link}
-    target='_blank'
-    rel='noreferrer'
-    className={classNames(
-      'flex justify-start items-center gap-2 h-[34px] px-2.5 bg-gray-100 rounded-lg transition-colors [&:not(:first-child)]:mt-1',
-      disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-primary-50 hover:text-primary-600 cursor-pointer',
-      className,
-    )}
-    {...props}
-  >
-    <div className='relative w-4 h-4'>{icon}</div>
-    <div className='grow shrink basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
-    <ArrowUpRight />
-  </a>
-)
+const SuggestedAction = ({ icon, link, disabled, children, className, onClick, ...props }: SuggestedActionProps) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (disabled)
+      return
+    onClick?.(e)
+  }
+  return (
+    <a
+      href={disabled ? undefined : link}
+      target='_blank'
+      rel='noreferrer'
+      className={classNames(
+        'flex-1 flex justify-start items-center text-text-secondary gap-2 h-[34px] px-2.5 bg-gray-100 rounded-lg transition-colors [&:not(:first-child)]:mt-1',
+        disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-primary-50 hover:text-primary-600 cursor-pointer',
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      <div className='relative w-4 h-4'>{icon}</div>
+      <div className='grow shrink basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
+      <ArrowUpRight />
+    </a>
+  )
+}
 
 export default SuggestedAction

web/app/components/app/overview/appCard.tsx

@@ -209,7 +209,7 @@ function AppCard({
               )}
             </div>
           </div>
-        </div>
+        </div >
         <div className={'pt-2 flex flex-row items-center flex-wrap gap-y-2'}>
           {!isApp && <SecretKeyButton className='flex-shrink-0 !h-8 bg-white mr-2' textCls='!text-gray-700 font-medium' iconCls='stroke-[1.2px]' appId={appInfo.id} />}
           {OPERATIONS_MAP[cardType].map((op) => {
@@ -239,36 +239,38 @@ function AppCard({
             )
           })}
         </div>
-      </div>
-      {isApp
-        ? (
-          <>
-            <SettingsModal
-              isChat={appMode === 'chat'}
-              appInfo={appInfo}
-              isShow={showSettingsModal}
-              onClose={() => setShowSettingsModal(false)}
-              onSave={onSaveSiteConfig}
-            />
-            <EmbeddedModal
-              siteInfo={appInfo.site}
-              isShow={showEmbedded}
-              onClose={() => setShowEmbedded(false)}
-              appBaseUrl={app_base_url}
-              accessToken={access_token}
-            />
-            <CustomizeModal
-              isShow={showCustomizeModal}
-              linkUrl=""
-              onClose={() => setShowCustomizeModal(false)}
-              appId={appInfo.id}
-              api_base_url={appInfo.api_base_url}
-              mode={appInfo.mode}
-            />
-          </>
-        )
-        : null}
-    </div>
+      </div >
+      {
+        isApp
+          ? (
+            <>
+              <SettingsModal
+                isChat={appMode === 'chat'}
+                appInfo={appInfo}
+                isShow={showSettingsModal}
+                onClose={() => setShowSettingsModal(false)}
+                onSave={onSaveSiteConfig}
+              />
+              <EmbeddedModal
+                siteInfo={appInfo.site}
+                isShow={showEmbedded}
+                onClose={() => setShowEmbedded(false)}
+                appBaseUrl={app_base_url}
+                accessToken={access_token}
+              />
+              <CustomizeModal
+                isShow={showCustomizeModal}
+                linkUrl=""
+                onClose={() => setShowCustomizeModal(false)}
+                appId={appInfo.id}
+                api_base_url={appInfo.api_base_url}
+                mode={appInfo.mode}
+              />
+            </>
+          )
+          : null
+      }
+    </div >
   )
 }
 

web/app/components/app/overview/settings/index.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
 import Link from 'next/link'
 import { Trans, useTranslation } from 'react-i18next'
-import { useContext, useContextSelector } from 'use-context-selector'
+import { useContext } from 'use-context-selector'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Modal from '@/app/components/base/modal'
 import ActionButton from '@/app/components/base/action-button'
@@ -21,7 +21,6 @@ import type { AppIconType, AppSSO, Language } from '@/types/app'
 import { useToastContext } from '@/app/components/base/toast'
 import { LanguagesSupported, languages } from '@/i18n/language'
 import Tooltip from '@/app/components/base/tooltip'
-import AppContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
@@ -65,8 +64,6 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   onClose,
   onSave,
 }) => {
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
-  const { isCurrentWorkspaceEditor } = useAppContext()
   const { notify } = useToastContext()
   const [isShowMore, setIsShowMore] = useState(false)
   const {
@@ -110,7 +107,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       : { type: 'emoji', icon, background: icon_background! },
   )
 
-  const { enableBilling, plan } = useProviderContext()
+  const { enableBilling, plan, webappCopyrightEnabled } = useProviderContext()
   const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
   const isFreePlan = plan.type === 'sandbox'
   const handlePlanClick = useCallback(() => {
@@ -138,7 +135,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
     setAppIcon(icon_type === 'image'
       ? { type: 'image', url: icon_url!, fileId: icon }
       : { type: 'emoji', icon, background: icon_background! })
-  }, [appInfo])
+  }, [appInfo, chat_color_theme, chat_color_theme_inverted, copyright, custom_disclaimer, default_language, description, icon, icon_background, icon_type, icon_url, privacy_policy, show_workflow_steps, title, use_icon_as_answer_icon])
 
   const onHide = () => {
     onClose()
@@ -177,7 +174,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       chat_color_theme: inputInfo.chatColorTheme,
       chat_color_theme_inverted: inputInfo.chatColorThemeInverted,
       prompt_public: false,
-      copyright: isFreePlan
+      copyright: !webappCopyrightEnabled
         ? ''
         : inputInfo.copyrightSwitchValue
           ? inputInfo.copyright
@@ -324,28 +321,6 @@ const SettingsModal: FC<ISettingsModalProps> = ({
             </div>
             <p className='pb-0.5 text-text-tertiary body-xs-regular'>{t(`${prefixSettings}.workflow.showDesc`)}</p>
           </div>
-          {/* SSO */}
-          {systemFeatures.enable_web_sso_switch_component && (
-            <>
-              <Divider className="h-px my-0" />
-              <div className='w-full'>
-                <p className='mb-1 system-xs-medium-uppercase text-text-tertiary'>{t(`${prefixSettings}.sso.label`)}</p>
-                <div className='flex justify-between items-center'>
-                  <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.sso.title`)}</div>
-                  <Tooltip
-                    disabled={systemFeatures.sso_enforced_for_web}
-                    popupContent={
-                      <div className='w-[180px]'>{t(`${prefixSettings}.sso.tooltip`)}</div>
-                    }
-                    asChild={false}
-                  >
-                    <Switch disabled={!systemFeatures.sso_enforced_for_web || !isCurrentWorkspaceEditor} defaultValue={systemFeatures.sso_enforced_for_web && inputInfo.enable_sso} onChange={v => setInputInfo({ ...inputInfo, enable_sso: v })}></Switch>
-                  </Tooltip>
-                </div>
-                <p className='pb-0.5 body-xs-regular text-text-tertiary'>{t(`${prefixSettings}.sso.description`)}</p>
-              </div>
-            </>
-          )}
           {/* more settings switch */}
           <Divider className="h-px my-0" />
           {!isShowMore && (
@@ -354,7 +329,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                 <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.entry`)}</div>
                 <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.more.copyRightPlaceholder`)} & {t(`${prefixSettings}.more.privacyPolicyPlaceholder`)}</p>
               </div>
-              <RiArrowRightSLine className='shrink-0 ml-1 w-4 h-4 text-text-secondary'/>
+              <RiArrowRightSLine className='shrink-0 ml-1 w-4 h-4 text-text-secondary' />
             </div>
           )}
           {/* more settings */}
@@ -380,14 +355,14 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     )}
                   </div>
                   <Tooltip
-                    disabled={!isFreePlan}
+                    disabled={webappCopyrightEnabled}
                     popupContent={
-                      <div className='w-[260px]'>{t(`${prefixSettings}.more.copyrightTooltip`)}</div>
+                      <div className='w-[180px]'>{t(`${prefixSettings}.more.copyrightTooltip`)}</div>
                     }
                     asChild={false}
                   >
                     <Switch
-                      disabled={isFreePlan}
+                      disabled={!webappCopyrightEnabled}
                       defaultValue={inputInfo.copyrightSwitchValue}
                       onChange={v => setInputInfo({ ...inputInfo, copyrightSwitchValue: v })}
                     />
@@ -439,20 +414,22 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           <Button variant='primary' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
         </div>
       </Modal >
-      {showAppIconPicker && (
-        <AppIconPicker
-          onSelect={(payload) => {
-            setAppIcon(payload)
-            setShowAppIconPicker(false)
-          }}
-          onClose={() => {
-            setAppIcon(icon_type === 'image'
-              ? { type: 'image', url: icon_url!, fileId: icon }
-              : { type: 'emoji', icon, background: icon_background! })
-            setShowAppIconPicker(false)
-          }}
-        />
-      )}
+      {
+        showAppIconPicker && (
+          <AppIconPicker
+            onSelect={(payload) => {
+              setAppIcon(payload)
+              setShowAppIconPicker(false)
+            }}
+            onClose={() => {
+              setAppIcon(icon_type === 'image'
+                ? { type: 'image', url: icon_url!, fileId: icon }
+                : { type: 'emoji', icon, background: icon_background! })
+              setShowAppIconPicker(false)
+            }}
+          />
+        )
+      }
     </>
 
   )

web/app/components/base/app-unavailable.tsx

@@ -2,23 +2,26 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import classNames from '@/utils/classnames'
 
 type IAppUnavailableProps = {
-  code?: number
+  code?: number | string
   isUnknownReason?: boolean
   unknownReason?: string
+  className?: string
 }
 
 const AppUnavailable: FC<IAppUnavailableProps> = ({
   code = 404,
   isUnknownReason,
   unknownReason,
+  className,
 }) => {
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center justify-center w-screen h-screen'>
-      <h1 className='mr-5 h-[50px] leading-[50px] pr-5 text-[24px] font-medium'
+    <div className={classNames('flex h-screen w-screen items-center justify-center', className)}>
+      <h1 className='mr-5 h-[50px] pr-5 text-[24px] font-medium leading-[50px] shrink-0'
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',
         }}>{code}</h1>

web/app/components/base/chat/chat-with-history/context.tsx

@@ -21,6 +21,7 @@ export type ChatWithHistoryContextValue = {
   appInfoLoading?: boolean
   appMeta?: AppMeta
   appData?: AppData
+  userCanAccess?: boolean
   appParams?: ChatConfig
   appChatListDataLoading?: boolean
   currentConversationId: string
@@ -52,6 +53,7 @@ export type ChatWithHistoryContextValue = {
 }
 
 export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>({
+  userCanAccess: false,
   currentConversationId: '',
   appPrevChatTree: [],
   pinnedConversationList: [],
@@ -59,21 +61,21 @@ export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>
   showConfigPanelBeforeChat: false,
   newConversationInputs: {},
   newConversationInputsRef: { current: {} },
-  handleNewConversationInputsChange: () => {},
+  handleNewConversationInputsChange: () => { },
   inputsForms: [],
-  handleNewConversation: () => {},
-  handleStartChat: () => {},
-  handleChangeConversation: () => {},
-  handlePinConversation: () => {},
-  handleUnpinConversation: () => {},
-  handleDeleteConversation: () => {},
+  handleNewConversation: () => { },
+  handleStartChat: () => { },
+  handleChangeConversation: () => { },
+  handlePinConversation: () => { },
+  handleUnpinConversation: () => { },
+  handleDeleteConversation: () => { },
   conversationRenaming: false,
-  handleRenameConversation: () => {},
-  handleNewConversationCompleted: () => {},
+  handleRenameConversation: () => { },
+  handleNewConversationCompleted: () => { },
   chatShouldReloadKey: '',
   isMobile: false,
   isInstalledApp: false,
-  handleFeedback: () => {},
-  currentChatInstanceRef: { current: { handleStop: () => {} } },
+  handleFeedback: () => { },
+  currentChatInstanceRef: { current: { handleStop: () => { } } },
 })
 export const useChatWithHistoryContext = () => useContext(ChatWithHistoryContext)

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -42,6 +42,8 @@ import { changeLanguage } from '@/i18n/i18next-config'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
+import { useGetUserCanAccessApp } from '@/service/access-control'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 function getFormattedChatList(messages: any[]) {
   const newChatList: ChatItem[] = []
@@ -71,7 +73,13 @@ function getFormattedChatList(messages: any[]) {
 
 export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   const isInstalledApp = useMemo(() => !!installedAppInfo, [installedAppInfo])
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR(installedAppInfo ? null : 'appInfo', fetchAppInfo)
+  const { isPending: isCheckingPermission, data: userCanAccessResult } = useGetUserCanAccessApp({
+    appId: installedAppInfo?.app.id || appInfo?.app_id,
+    isInstalledApp,
+    enabled: systemFeatures.webapp_auth.enabled,
+  })
 
   useAppFavicon({
     enable: !installedAppInfo,
@@ -418,7 +426,8 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
 
   return {
     appInfoError,
-    appInfoLoading,
+    appInfoLoading: appInfoLoading || (systemFeatures.webapp_auth.enabled && isCheckingPermission),
+    userCanAccess: systemFeatures.webapp_auth.enabled ? userCanAccessResult?.result : true,
     isInstalledApp,
     appId,
     currentConversationId,

web/app/components/base/chat/chat-with-history/index.tsx

@@ -1,9 +1,13 @@
+'use client'
 import type { FC } from 'react'
 import {
+  useCallback,
   useEffect,
   useState,
 } from 'react'
 import { useAsyncEffect } from 'ahooks'
+import { useTranslation } from 'react-i18next'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useThemeContext } from '../embedded-chatbot/theme/theme-context'
 import {
   ChatWithHistoryContext,
@@ -17,8 +21,9 @@ import ChatWrapper from './chat-wrapper'
 import type { InstalledApp } from '@/models/explore'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { checkOrSetAccessToken } from '@/app/components/share/utils'
+import { checkOrSetAccessToken, removeAccessToken } from '@/app/components/share/utils'
 import AppUnavailable from '@/app/components/base/app-unavailable'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 type ChatWithHistoryProps = {
   className?: string
@@ -27,6 +32,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
   className,
 }) => {
   const {
+    userCanAccess,
     appInfoError,
     appData,
     appInfoLoading,
@@ -36,6 +42,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     chatShouldReloadKey,
     isMobile,
     themeBuilder,
+    isInstalledApp,
   } = useChatWithHistoryContext()
 
   const chatReady = (!showConfigPanelBeforeChat || !!appPrevChatTree.length)
@@ -52,11 +59,36 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     }
   }, [site, customConfig, themeBuilder])
 
+  useDocumentTitle(site?.title || 'Chat')
+
+  const { t } = useTranslation()
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+  const getSigninUrl = useCallback(() => {
+    const params = new URLSearchParams(searchParams)
+    params.delete('message')
+    params.set('redirect_url', pathname)
+    return `/webapp-signin?${params.toString()}`
+  }, [searchParams, pathname])
+
+  const backToHome = useCallback(() => {
+    removeAccessToken()
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router])
+
   if (appInfoLoading) {
     return (
       <Loading type='app' />
     )
   }
+  if (!userCanAccess) {
+    return <div className='flex h-full flex-col items-center justify-center gap-y-2'>
+      <AppUnavailable className='h-auto w-auto' code={403} unknownReason='no permission.' />
+      {!isInstalledApp && <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{t('common.userProfile.logout')}</span>}
+    </div>
+  }
 
   if (appInfoError) {
     return (
@@ -114,6 +146,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
   const {
     appInfoError,
     appInfoLoading,
+    userCanAccess,
     appData,
     appParams,
     appMeta,
@@ -149,6 +182,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
       appInfoError,
       appInfoLoading,
       appData,
+      userCanAccess,
       appParams,
       appMeta,
       appChatListDataLoading,

web/app/components/base/chat/chat-with-history/sidebar/index.tsx

@@ -11,10 +11,12 @@ import { Edit05 } from '@/app/components/base/icons/src/vender/line/general'
 import type { ConversationItem } from '@/models/share'
 import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
+import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 
 const Sidebar = () => {
   const { t } = useTranslation()
   const {
+    isInstalledApp,
     appData,
     pinnedConversationList,
     conversationList,
@@ -115,11 +117,14 @@ const Sidebar = () => {
           )
         }
       </div>
-      {appData?.site.copyright && (
-        <div className='px-4 pb-4 text-xs text-gray-400'>
-          © {(new Date()).getFullYear()} {appData?.site.copyright}
-        </div>
-      )}
+      <div className='flex items-center justify-between px-4 pb-4 '>
+        <MenuDropdown hideLogout={isInstalledApp} placement='top-start' data={appData?.site} />
+        {appData?.site.copyright && (
+          <div className='text-xs text-gray-400 truncate'>
+            © {(new Date()).getFullYear()} {appData?.site.copyright}
+          </div>
+        )}
+      </div>
       {!!showConfirm && (
         <Confirm
           title={t('share.chat.deleteConversation.title')}

web/app/components/base/chat/embedded-chatbot/context.tsx

@@ -16,6 +16,7 @@ import type {
 } from '@/models/share'
 
 export type EmbeddedChatbotContextValue = {
+  userCanAccess?: boolean
   appInfoError?: any
   appInfoLoading?: boolean
   appMeta?: AppMeta
@@ -46,6 +47,7 @@ export type EmbeddedChatbotContextValue = {
 }
 
 export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>({
+  userCanAccess: false,
   currentConversationId: '',
   appPrevChatList: [],
   pinnedConversationList: [],
@@ -53,16 +55,16 @@ export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>
   showConfigPanelBeforeChat: false,
   newConversationInputs: {},
   newConversationInputsRef: { current: {} },
-  handleNewConversationInputsChange: () => {},
+  handleNewConversationInputsChange: () => { },
   inputsForms: [],
-  handleNewConversation: () => {},
-  handleStartChat: () => {},
-  handleChangeConversation: () => {},
-  handleNewConversationCompleted: () => {},
+  handleNewConversation: () => { },
+  handleStartChat: () => { },
+  handleChangeConversation: () => { },
+  handleNewConversationCompleted: () => { },
   chatShouldReloadKey: '',
   isMobile: false,
   isInstalledApp: false,
-  handleFeedback: () => {},
-  currentChatInstanceRef: { current: { handleStop: () => {} } },
+  handleFeedback: () => { },
+  currentChatInstanceRef: { current: { handleStop: () => { } } },
 })
 export const useEmbeddedChatbotContext = () => useContext(EmbeddedChatbotContext)

web/app/components/base/chat/embedded-chatbot/hooks.tsx

@@ -35,6 +35,8 @@ import { changeLanguage } from '@/i18n/i18next-config'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
+import { useGetUserCanAccessApp } from '@/service/access-control'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 function getFormattedChatList(messages: any[]) {
   const newChatList: ChatItem[] = []
@@ -64,7 +66,13 @@ function getFormattedChatList(messages: any[]) {
 
 export const useEmbeddedChatbot = () => {
   const isInstalledApp = false
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR('appInfo', fetchAppInfo)
+  const { isPending: isCheckingPermission, data: userCanAccessResult } = useGetUserCanAccessApp({
+    appId: appInfo?.app_id,
+    isInstalledApp,
+    enabled: systemFeatures.webapp_auth.enabled,
+  })
 
   const appData = useMemo(() => {
     return appInfo
@@ -319,7 +327,8 @@ export const useEmbeddedChatbot = () => {
 
   return {
     appInfoError,
-    appInfoLoading,
+    appInfoLoading: appInfoLoading || (systemFeatures.webapp_auth.enabled && isCheckingPermission),
+    userCanAccess: systemFeatures.webapp_auth.enabled ? userCanAccessResult?.result : true,
     isInstalledApp,
     appId,
     currentConversationId,

web/app/components/base/chat/embedded-chatbot/index.tsx

@@ -1,10 +1,14 @@
+'use client'
 import {
+  useCallback,
   useEffect,
   useState,
 } from 'react'
 import { useAsyncEffect } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import { RiLoopLeftLine } from '@remixicon/react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import Tooltip from '../../tooltip'
 import {
   EmbeddedChatbotContext,
   useEmbeddedChatbotContext,
@@ -12,8 +16,7 @@ import {
 import { useEmbeddedChatbot } from './hooks'
 import { isDify } from './utils'
 import { useThemeContext } from './theme/theme-context'
-import cn from '@/utils/classnames'
-import { checkOrSetAccessToken } from '@/app/components/share/utils'
+import { checkOrSetAccessToken, removeAccessToken } from '@/app/components/share/utils'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Loading from '@/app/components/base/loading'
@@ -21,11 +24,13 @@ import LogoHeader from '@/app/components/base/logo/logo-embedded-chat-header'
 import Header from '@/app/components/base/chat/embedded-chatbot/header'
 import ConfigPanel from '@/app/components/base/chat/embedded-chatbot/config-panel'
 import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
-import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 const Chatbot = () => {
   const { t } = useTranslation()
   const {
+    userCanAccess,
     isMobile,
     appInfoError,
     appInfoLoading,
@@ -35,6 +40,7 @@ const Chatbot = () => {
     appChatListDataLoading,
     handleNewConversation,
     themeBuilder,
+    isInstalledApp,
   } = useEmbeddedChatbotContext()
 
   const chatReady = (!showConfigPanelBeforeChat || !!appPrevChatList.length)
@@ -53,12 +59,37 @@ const Chatbot = () => {
     }
   }, [site, customConfig, themeBuilder])
 
+  useDocumentTitle(site?.title || 'Chat')
+
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+  const getSigninUrl = useCallback(() => {
+    const params = new URLSearchParams(searchParams)
+    params.delete('message')
+    params.set('redirect_url', pathname)
+    return `/webapp-signin?${params.toString()}`
+  }, [searchParams, pathname])
+
+  const backToHome = useCallback(() => {
+    removeAccessToken()
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router])
+
   if (appInfoLoading) {
     return (
       <Loading type='app' />
     )
   }
 
+  if (!userCanAccess) {
+    return <div className='flex h-full flex-col items-center justify-center gap-y-2'>
+      <AppUnavailable className='h-auto w-auto' code={403} unknownReason='no permission.' />
+      {!isInstalledApp && <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{t('common.userProfile.logout')}</span>}
+    </div>
+  }
+
   if (appInfoError) {
     return (
       <AppUnavailable />
@@ -91,7 +122,7 @@ const Chatbot = () => {
                     popupContent={t('share.chat.resetChat')}
                   >
                     <div className='p-1.5 bg-white border-[0.5px] border-gray-100 rounded-lg shadow-md cursor-pointer' onClick={handleNewConversation}>
-                      <RiLoopLeftLine className="h-4 w-4 text-gray-500"/>
+                      <RiLoopLeftLine className="h-4 w-4 text-gray-500" />
                     </div>
                   </Tooltip>
                 </div>
@@ -114,6 +145,7 @@ const EmbeddedChatbotWrapper = () => {
     appInfoError,
     appInfoLoading,
     appData,
+    userCanAccess,
     appParams,
     appMeta,
     appChatListDataLoading,
@@ -139,6 +171,7 @@ const EmbeddedChatbotWrapper = () => {
   } = useEmbeddedChatbot()
 
   return <EmbeddedChatbotContext.Provider value={{
+    userCanAccess,
     appInfoError,
     appInfoLoading,
     appData,

web/app/components/base/chat/utils.ts

@@ -156,7 +156,7 @@ function getThreadMessages(tree: ChatItemInTree[], targetMessageId?: string): Ch
   let targetNode: ChatItemInTree | undefined
 
   // find path to the target message
-  const stack = tree.toReversed().map(rootNode => ({
+  const stack = tree.slice().reverse().map(rootNode => ({
     node: rootNode,
     path: [rootNode],
   }))

web/app/components/base/logo/logo-site.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import classNames from '@/utils/classnames'
 import { useSelector } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type LogoSiteProps = {
   className?: string
@@ -10,13 +11,17 @@ type LogoSiteProps = {
 const LogoSite: FC<LogoSiteProps> = ({
   className,
 }) => {
+  const { systemFeatures } = useGlobalPublicStore()
   const { theme } = useSelector((s) => {
     return {
       theme: s.theme,
     }
   })
 
-  const src = theme === 'light' ? '/logo/logo-site.png' : `/logo/logo-site-${theme}.png`
+  let src = theme === 'light' ? '/logo/logo-site.png' : `/logo/logo-site-${theme}.png`
+  if (systemFeatures.branding.enabled)
+    src = systemFeatures.branding.workspace_logo
+
   return (
     <img
       src={src}

web/app/components/base/tooltip/index.tsx

@@ -90,6 +90,7 @@ const Tooltip: FC<TooltipProps> = ({
         }}
         onMouseLeave={() => triggerMethod === 'hover' && handleLeave(true)}
         asChild={asChild}
+        className={!asChild ? triggerClassName : ''}
       >
         {children || <div className={triggerClassName || 'p-[1px] w-3.5 h-3.5 shrink-0'}><RiQuestionLine className='text-text-quaternary hover:text-text-tertiary w-full h-full' /></div>}
       </PortalToFollowElemTrigger>