From d6a8af03b4d2a56a30c6e42a2967347a6435c7ae Mon Sep 17 00:00:00 2001 From: NFish Date: Mon, 9 Jun 2025 15:44:49 +0800 Subject: [PATCH] Fix/add webapp no permission page (#20819) --- web/app/(shareLayout)/webapp-signin/page.tsx | 6 ++-- .../components/app/app-publisher/index.tsx | 6 ++-- web/app/components/base/app-unavailable.tsx | 2 +- .../base/chat/chat-with-history/index.tsx | 32 +++++++++++++++++-- .../base/chat/embedded-chatbot/index.tsx | 32 ++++++++++++++++--- .../share/text-generation/index.tsx | 23 +++++++++++-- web/app/components/share/utils.ts | 18 +---------- web/service/base.ts | 14 +++++--- 8 files changed, 95 insertions(+), 38 deletions(-) diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx index c12fde38d..07b7c8843 100644 --- a/web/app/(shareLayout)/webapp-signin/page.tsx +++ b/web/app/(shareLayout)/webapp-signin/page.tsx @@ -23,10 +23,12 @@ const WebSSOForm: FC = () => { const redirectUrl = searchParams.get('redirect_url') const tokenFromUrl = searchParams.get('web_sso_token') const message = searchParams.get('message') + const code = searchParams.get('code') const getSigninUrl = useCallback(() => { const params = new URLSearchParams(searchParams) params.delete('message') + params.delete('code') return `/webapp-signin?${params.toString()}` }, [searchParams]) @@ -85,8 +87,8 @@ const WebSSOForm: FC = () => { if (message) { return
- - {t('share.login.backToHome')} + + {code === '403' ? t('common.userProfile.logout') : t('share.login.backToHome')}
} if (!redirectUrl) { diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx index 5825bb72e..148596419 100644 --- a/web/app/components/app/app-publisher/index.tsx +++ b/web/app/components/app/app-publisher/index.tsx @@ -278,7 +278,7 @@ const AppPublisher = ({ onClick={() => { setShowAppAccessControl(true) }}> -
+
{appDetail?.access_mode === AccessMode.ORGANIZATION && <> @@ -288,7 +288,9 @@ const AppPublisher = ({ {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <> -

{t('app.accessControlDialog.accessItems.specific')}

+
+ {t('app.accessControlDialog.accessItems.specific')} +
} {appDetail?.access_mode === AccessMode.PUBLIC diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx index 928c85026..c501d3611 100644 --- a/web/app/components/base/app-unavailable.tsx +++ b/web/app/components/base/app-unavailable.tsx @@ -21,7 +21,7 @@ const AppUnavailable: FC = ({ return (
-

{code}

diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx index 1fd138319..fe8e7b430 100644 --- a/web/app/components/base/chat/chat-with-history/index.tsx +++ b/web/app/components/base/chat/chat-with-history/index.tsx @@ -1,5 +1,7 @@ +'use client' import type { FC } from 'react' import { + useCallback, useEffect, useState, } from 'react' @@ -17,10 +19,12 @@ 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 cn from '@/utils/classnames' import useDocumentTitle from '@/hooks/use-document-title' +import { useTranslation } from 'react-i18next' +import { usePathname, useRouter, useSearchParams } from 'next/navigation' type ChatWithHistoryProps = { className?: string @@ -38,6 +42,7 @@ const ChatWithHistory: FC = ({ isMobile, themeBuilder, sidebarCollapseState, + isInstalledApp, } = useChatWithHistoryContext() const isSidebarCollapsed = sidebarCollapseState const customConfig = appData?.custom_config @@ -51,13 +56,34 @@ const ChatWithHistory: FC = ({ 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 ( ) } - if (!userCanAccess) - return + if (!userCanAccess) { + return
+ + {!isInstalledApp && {t('common.userProfile.logout')}} +
+ } if (appInfoError) { return ( diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx index 002d14254..c54afd78e 100644 --- a/web/app/components/base/chat/embedded-chatbot/index.tsx +++ b/web/app/components/base/chat/embedded-chatbot/index.tsx @@ -1,4 +1,6 @@ +'use client' import { + useCallback, useEffect, useState, } from 'react' @@ -12,7 +14,7 @@ import { useEmbeddedChatbot } from './hooks' import { isDify } from './utils' import { useThemeContext } from './theme/theme-context' import { CssTransform } from './theme/utils' -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' @@ -23,6 +25,7 @@ import DifyLogo from '@/app/components/base/logo/dify-logo' import cn from '@/utils/classnames' import useDocumentTitle from '@/hooks/use-document-title' import { useGlobalPublicStore } from '@/context/global-public-context' +import { usePathname, useRouter, useSearchParams } from 'next/navigation' const Chatbot = () => { const { @@ -36,6 +39,7 @@ const Chatbot = () => { chatShouldReloadKey, handleNewConversation, themeBuilder, + isInstalledApp, } = useEmbeddedChatbotContext() const { t } = useTranslation() const systemFeatures = useGlobalPublicStore(s => s.systemFeatures) @@ -51,6 +55,22 @@ const Chatbot = () => { 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 ( <> @@ -66,8 +86,12 @@ const Chatbot = () => { ) } - if (!userCanAccess) - return + if (!userCanAccess) { + return
+ + {!isInstalledApp && {t('common.userProfile.logout')}} +
+ } if (appInfoError) { return ( @@ -141,7 +165,6 @@ const EmbeddedChatbotWrapper = () => { appInfoError, appInfoLoading, appData, - accessMode, userCanAccess, appParams, appMeta, @@ -176,7 +199,6 @@ const EmbeddedChatbotWrapper = () => { return = ({
) + 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 (!appId || !siteInfo || !promptConfig || (systemFeatures.webapp_auth.enabled && (isGettingAccessMode || isCheckingPermission))) { return (
) } - if (systemFeatures.webapp_auth.enabled && !userCanAccessResult?.result) - return + if (systemFeatures.webapp_auth.enabled && !userCanAccessResult?.result) { + return
+ + {!isInstalledApp && {t('common.userProfile.logout')}} +
+ } return (
{ - const sharedToken = globalThis.location.pathname.split('/').slice(-1)[0] - - const accessToken = localStorage.getItem('token') || JSON.stringify(getInitialTokenV2()) - let accessTokenJson = getInitialTokenV2() - try { - accessTokenJson = JSON.parse(accessToken) - if (isTokenV1(accessTokenJson)) - accessTokenJson = getInitialTokenV2() - } - catch { - - } - - localStorage.removeItem(CONVERSATION_ID_INFO) + localStorage.removeItem('token') localStorage.removeItem('webapp_access_token') - - delete accessTokenJson[sharedToken] - localStorage.setItem('token', JSON.stringify(accessTokenJson)) } diff --git a/web/service/base.ts b/web/service/base.ts index c3cafe600..ba398c07a 100644 --- a/web/service/base.ts +++ b/web/service/base.ts @@ -108,12 +108,13 @@ function unicodeToChar(text: string) { }) } -function requiredWebSSOLogin(message?: string) { - removeAccessToken() +function requiredWebSSOLogin(message?: string, code?: number) { const params = new URLSearchParams() params.append('redirect_url', globalThis.location.pathname) if (message) params.append('message', message) + if (code) + params.append('code', String(code)) globalThis.location.href = `/webapp-signin?${params.toString()}` } @@ -403,10 +404,12 @@ export const ssePost = async ( res.json().then((data: any) => { if (isPublicAPI) { if (data.code === 'web_app_access_denied') - requiredWebSSOLogin(data.message) + requiredWebSSOLogin(data.message, 403) - if (data.code === 'web_sso_auth_required') + if (data.code === 'web_sso_auth_required') { + removeAccessToken() requiredWebSSOLogin() + } if (data.code === 'unauthorized') { removeAccessToken() @@ -484,10 +487,11 @@ export const request = async(url: string, options = {}, otherOptions?: IOther const { code, message } = errRespData // webapp sso if (code === 'web_app_access_denied') { - requiredWebSSOLogin(message) + requiredWebSSOLogin(message, 403) return Promise.reject(err) } if (code === 'web_sso_auth_required') { + removeAccessToken() requiredWebSSOLogin() return Promise.reject(err) }