Kaynağa Gözat

fix: login security issue frontend (#25571)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
tags/1.9.0
Joel 1 ay önce
ebeveyn
işleme
394b0ac9c0
No account linked to committer's email address

+ 1
- 1
web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx Dosyayı Görüntüle

@@ -60,7 +60,7 @@ export default function MailAndCodeAuth() {
<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>
<Button loading={loading} disabled={loading || !email} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.signup.verifyMail')}</Button>
</div>
</div>
</form>

+ 0
- 6
web/app/reset-password/page.tsx Dosyayı Görüntüle

@@ -47,12 +47,6 @@ export default function CheckCode() {
params.set('email', encodeURIComponent(email))
router.push(`/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',

+ 1
- 1
web/app/signin/components/mail-and-code-auth.tsx Dosyayı Görüntüle

@@ -64,7 +64,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
<Input id='email' type="email" disabled={isInvite} 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>
<Button loading={loading} disabled={loading || !email} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.signup.verifyMail')}</Button>
</div>
</div>
</form>

+ 6
- 20
web/app/signin/components/mail-and-password-auth.tsx Dosyayı Görüntüle

@@ -47,13 +47,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
Toast.notify({ type: 'error', message: t('login.error.passwordEmpty') })
return
}
if (!passwordRegex.test(password)) {
Toast.notify({
type: 'error',
message: t('login.error.passwordInvalid'),
})
return
}

try {
setIsLoading(true)
const loginData: Record<string, any> = {
@@ -79,19 +73,11 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
router.replace(redirectUrl || '/apps')
}
}
else if (res.code === 'account_not_found') {
if (allowRegistration) {
const params = new URLSearchParams()
params.append('email', encodeURIComponent(email))
params.append('token', encodeURIComponent(res.data))
router.replace(`/reset-password/check-code?${params.toString()}`)
}
else {
Toast.notify({
type: 'error',
message: t('login.error.registrationNotAllowed'),
})
}
else if (res.code === 'authentication_failed') {
Toast.notify({
type: 'error',
message: t('login.error.invalidEmailOrPassword'),
})
}
else {
Toast.notify({

+ 12
- 1
web/app/signin/normal-form.tsx Dosyayı Görüntüle

@@ -15,6 +15,7 @@ import Toast from '@/app/components/base/toast'
import { IS_CE_EDITION } from '@/config'
import { useGlobalPublicStore } from '@/context/global-public-context'
import { resolvePostLoginRedirect } from './utils/post-login-redirect'
import Split from './split'

const NormalForm = () => {
const { t } = useTranslation()
@@ -166,8 +167,19 @@ const NormalForm = () => {
<span className='system-xs-medium text-components-button-secondary-accent-text'>{t('login.useVerificationCode')}</span>
</div>}
</>}
<Split className='mb-5 mt-4' />
</>
}

{systemFeatures.is_allow_register && authType === 'password' && (
<div className='mb-3 text-[13px] font-medium leading-4 text-text-secondary'>
<span>{t('login.signup.noAccount')}</span>
<Link
className='text-text-accent'
href='/signup'
>{t('login.signup.signUp')}</Link>
</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'>
@@ -207,7 +219,6 @@ const NormalForm = () => {
>{t('login.setAdminAccount')}</Link>
</div>}
</>}

</div>
</div>
</>

+ 19
- 0
web/app/signin/split.tsx Dosyayı Görüntüle

@@ -0,0 +1,19 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from '@/utils/classnames'

type Props = {
className?: string
}

const Split: FC<Props> = ({
className,
}) => {
return (
<div
className={cn('h-px w-[400px] bg-[linear-gradient(90deg,rgba(255,255,255,0.01)_0%,rgba(16,24,40,0.08)_50.5%,rgba(255,255,255,0.01)_100%)]', className)}>
</div>
)
}
export default React.memo(Split)

+ 110
- 0
web/app/signup/check-code/page.tsx Dosyayı Görüntüle

@@ -0,0 +1,110 @@
'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 I18NContext from '@/context/i18n'
import type { MailSendResponse, MailValidityResponse } from '@/service/use-common'
import { useMailValidity, useSendMail } from '@/service/use-common'

export default function CheckCode() {
const { t } = useTranslation()
const router = useRouter()
const searchParams = useSearchParams()
const email = decodeURIComponent(searchParams.get('email') as string)
const [token, setToken] = useState(decodeURIComponent(searchParams.get('token') as string))
const [code, setVerifyCode] = useState('')
const [loading, setIsLoading] = useState(false)
const { locale } = useContext(I18NContext)
const { mutateAsync: submitMail } = useSendMail()
const { mutateAsync: verifyCode } = useMailValidity()

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 res = await verifyCode({ email, code, token })
console.log(res)
if ((res as MailValidityResponse).is_valid) {
const params = new URLSearchParams(searchParams)
params.set('token', encodeURIComponent((res as MailValidityResponse).token))
router.push(`/signup/set-password?${params.toString()}`)
}
else {
Toast.notify({
type: 'error',
message: t('login.checkCode.invalidCode'),
})
}
}
catch (error) { console.error(error) }
finally {
setIsLoading(false)
}
}

const resendCode = async () => {
try {
const res = await submitMail({ email, language: locale })
if ((res as MailSendResponse).result === 'success') {
const params = new URLSearchParams(searchParams)
const newToken = (res as MailSendResponse)?.data
params.set('token', encodeURIComponent(newToken))
setToken(newToken)
router.replace(`/signup/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 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>
{t('login.checkCode.tipsPrefix')}
<strong>{email}</strong>
</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>
}

+ 102
- 0
web/app/signup/components/input-mail.tsx Dosyayı Görüntüle

@@ -0,0 +1,102 @@
'use client'
import { noop } from 'lodash'
import Input from '@/app/components/base/input'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { useCallback, useState } from 'react'
import Button from '@/app/components/base/button'
import { emailRegex } from '@/config'
import Toast from '@/app/components/base/toast'
import type { MailSendResponse } from '@/service/use-common'
import { useSendMail } from '@/service/use-common'
import I18n from '@/context/i18n'
import Split from '@/app/signin/split'
import Link from 'next/link'
import { useGlobalPublicStore } from '@/context/global-public-context'

type Props = {
onSuccess: (email: string, payload: string) => void
}
export default function Form({
onSuccess,
}: Props) {
const { t } = useTranslation()
const [email, setEmail] = useState('')
const { locale } = useContext(I18n)
const { systemFeatures } = useGlobalPublicStore()

const { mutateAsync: submitMail, isPending } = useSendMail()

const handleSubmit = useCallback(async () => {
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
}
const res = await submitMail({ email, language: locale })
if((res as MailSendResponse).result === 'success')
onSuccess(email, (res as MailSendResponse).data)
}, [email, locale, submitMail, t])

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-2'>
<Button
tabIndex={2}
variant='primary'
onClick={handleSubmit}
disabled={isPending || !email}
className="w-full"
>{t('login.signup.verifyMail')}</Button>
</div>
<Split className='mb-5 mt-4' />

<div className='text-[13px] font-medium leading-4 text-text-secondary'>
<span>{t('login.signup.haveAccount')}</span>
<Link
className='text-text-accent'
href='/signin'
>{t('login.signup.signIn')}</Link>
</div>

{!systemFeatures.branding.enabled && <>
<div className="system-xs-regular mt-3 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>
</>}

</form>
}

+ 26
- 0
web/app/signup/layout.tsx Dosyayı Görüntüle

@@ -0,0 +1,26 @@
'use client'
import Header from '@/app/signin/_header'

import cn from '@/utils/classnames'
import { useGlobalPublicStore } from '@/context/global-public-context'
import useDocumentTitle from '@/hooks/use-document-title'

export default function RegisterLayout({ 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 items-center 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 flex-col md:w-[400px]'>
{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>
</>
}

+ 30
- 0
web/app/signup/page.tsx Dosyayı Görüntüle

@@ -0,0 +1,30 @@
'use client'
import { useCallback } from 'react'
import MailForm from './components/input-mail'
import { useRouter, useSearchParams } from 'next/navigation'
import { useTranslation } from 'react-i18next'

const Signup = () => {
const router = useRouter()
const searchParams = useSearchParams()
const { t } = useTranslation()

const handleInputMailSubmitted = useCallback((email: string, result: string) => {
const params = new URLSearchParams(searchParams)
params.set('token', encodeURIComponent(result))
params.set('email', encodeURIComponent(email))
router.push(`/signup/check-code?${params.toString()}`)
}, [router, searchParams])

return (
<div className="mx-auto mt-8 w-full">
<div className="mx-auto mb-10 w-full">
<h2 className="title-4xl-semi-bold text-text-primary">{t('login.signup.createAccount')}</h2>
<p className='body-md-regular mt-2 text-text-tertiary'>{t('login.signup.welcome')}</p>
</div>
<MailForm onSuccess={handleInputMailSubmitted} />
</div>
)
}

export default Signup

+ 140
- 0
web/app/signup/set-password/page.tsx Dosyayı Görüntüle

@@ -0,0 +1,140 @@
'use client'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useRouter, useSearchParams } from 'next/navigation'
import cn from 'classnames'
import Button from '@/app/components/base/button'
import Toast from '@/app/components/base/toast'
import Input from '@/app/components/base/input'
import { validPassword } from '@/config'
import type { MailRegisterResponse } from '@/service/use-common'
import { useMailRegister } from '@/service/use-common'

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 { mutateAsync: register, isPending } = useMailRegister()

const showErrorMessage = useCallback((message: string) => {
Toast.notify({
type: 'error',
message,
})
}, [])

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 handleSubmit = useCallback(async () => {
if (!valid())
return
try {
const res = await register({
token,
new_password: password,
password_confirm: confirmPassword,
})
const { result, data } = res as MailRegisterResponse
if (result === 'success') {
Toast.notify({
type: 'success',
message: t('common.api.actionSuccess'),
})
localStorage.setItem('console_token', data.access_token)
localStorage.setItem('refresh_token', data.refresh_token)
router.replace('/apps')
}
}
catch (error) {
console.error(error)
}
}, [password, token, valid, confirmPassword, register])

return (
<div className={
cn(
'flex w-full grow flex-col items-center justify-center',
'px-6',
'md:px-[108px]',
)
}>
<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>
{/* 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='password'
value={password}
onChange={e => setPassword(e.target.value)}
placeholder={t('login.passwordPlaceholder') || ''}
/>

</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='password'
value={confirmPassword}
onChange={e => setConfirmPassword(e.target.value)}
placeholder={t('login.confirmPasswordPlaceholder') || ''}
/>
</div>
</div>
<div>
<Button
variant='primary'
className='w-full'
onClick={handleSubmit}
disabled={isPending || !password || !confirmPassword}
>
{t('login.changePasswordBtn')}
</Button>
</div>
</div>
</div>
</div>
</div>
)
}

export default ChangePasswordForm

+ 12
- 2
web/i18n/en-US/login.ts Dosyayı Görüntüle

@@ -1,6 +1,6 @@
const translation = {
pageTitle: 'Hey, let\'s get started!',
welcome: '👋 Welcome to Dify, please log in to continue.',
pageTitle: 'Log in to Dify',
welcome: '👋 Welcome! Please log in to get started.',
email: 'Email address',
emailPlaceholder: 'Your email',
password: 'Password',
@@ -62,6 +62,7 @@ const translation = {
passwordLengthInValid: 'Password must be at least 8 characters',
passwordInvalid: 'Password must contain letters and numbers, and the length must be greater than 8',
registrationNotAllowed: 'Account not found. Please contact the system admin to register.',
invalidEmailOrPassword: 'Invalid email or password.',
},
license: {
tip: 'Before starting Dify Community Edition, read the GitHub',
@@ -110,6 +111,15 @@ const translation = {
noLoginMethodTip: 'Please contact the system admin to add an authentication method.',
disabled: 'Webapp authentication is disabled. Please contact the system admin to enable it. You can try to use the app directly.',
},
signup: {
noAccount: 'Don’t have an account? ',
signUp: 'Sign Up',
createAccount: 'Create your account',
welcome: '👋 Welcome! Please fill in the details to get started.',
verifyMail: 'Continue with verification code',
haveAccount: 'Already have an account? ',
signIn: 'Sign In',
},
}

export default translation

+ 12
- 3
web/i18n/ja-JP/login.ts Dosyayı Görüntüle

@@ -1,6 +1,6 @@
const translation = {
pageTitle: 'はじめましょう!👋',
welcome: 'Dify へようこそ。続行するにはログインしてください。',
pageTitle: 'Dify にログイン',
welcome: '👋 ようこそ!まずはログインしてご利用ください。',
email: 'メールアドレス',
emailPlaceholder: 'メールアドレスを入力してください',
password: 'パスワード',
@@ -92,7 +92,7 @@ const translation = {
withSSO: 'SSO を続行する',
noLoginMethod: '認証方法が構成されていません',
backToLogin: 'ログインに戻る',
continueWithCode: 'コードで続行',
continueWithCode: '認証コードで続行',
noLoginMethodTip: 'システム管理者に連絡して、認証方法を追加してください。',
usePassword: 'パスワードを使用',
sendVerificationCode: '確認コードの送信',
@@ -110,6 +110,15 @@ const translation = {
noLoginMethodTip: 'システム管理者に連絡して、認証方法を追加してください。',
disabled: 'Web アプリの認証が無効になっています。システム管理者に連絡して有効にしてください。直接アプリを使用してみてください。',
},
signup: {
noAccount: 'アカウントをお持ちでないですか?',
signUp: '新規登録',
createAccount: 'アカウントを作成',
welcome: '👋 ようこそ!ご利用を始めるために必要な情報をご入力ください。',
verifyMail: '認証コードで続行',
haveAccount: 'すでにアカウントをお持ちですか?',
signIn: 'ログインはこちら',
},
}

export default translation

+ 12
- 2
web/i18n/zh-Hans/login.ts Dosyayı Görüntüle

@@ -1,6 +1,6 @@
const translation = {
pageTitle: '嗨,近来可好',
welcome: '👋 欢迎来到 Dify, 登录以继续',
pageTitle: '登录 Dify',
welcome: '👋 欢迎!请登录以开始使用。',
email: '邮箱',
emailPlaceholder: '输入邮箱地址',
password: '密码',
@@ -62,6 +62,7 @@ const translation = {
passwordInvalid: '密码必须包含字母和数字,且长度不小于 8 位',
passwordLengthInValid: '密码必须至少为 8 个字符',
registrationNotAllowed: '账户不存在,请联系系统管理员注册账户',
invalidEmailOrPassword: '邮箱或密码错误',
},
license: {
tip: '启动 Dify 社区版之前,请阅读 GitHub 上的',
@@ -110,6 +111,15 @@ const translation = {
noLoginMethodTip: '请联系系统管理员添加身份认证方式',
disabled: 'Web 应用身份认证已禁用,请联系系统管理员启用。您也可以尝试直接使用应用。',
},
signup: {
noAccount: '没有账户?',
signUp: '立即注册',
createAccount: '创建您的账户',
welcome: '👋 欢迎!请填写信息以开始使用。',
verifyMail: '发送验证码',
haveAccount: '已有账户?',
signIn: '立即登录',
},
}

export default translation

+ 6
- 0
web/service/base.ts Dosyayı Görüntüle

@@ -482,6 +482,12 @@ export const request = async<T>(url: string, options = {}, otherOptions?: IOther
return resp
const errResp: Response = err as any
if (errResp.status === 401) {
if(/\/login/.test(url)) {
const clonedResponse = errResp.clone()
const bodyJson = await clonedResponse.json() as Promise<ResponseError>
return bodyJson
}

const [parseErr, errRespData] = await asyncRunSafe<ResponseError>(errResp.json())
const loginUrl = `${globalThis.location.origin}${basePath}/signin`
if (parseErr) {

+ 32
- 0
web/service/use-common.ts Dosyayı Görüntüle

@@ -26,3 +26,35 @@ export const useGenerateStructuredOutputRules = () => {
},
})
}

export type MailSendResponse = { data: string, result: string }
export const useSendMail = () => {
return useMutation({
mutationKey: [NAME_SPACE, 'mail-send'],
mutationFn: (body: { email: string, language: string }) => {
return post<MailSendResponse>('/email-register/send-email', { body })
},
})
}

export type MailValidityResponse = { is_valid: boolean, token: string }

export const useMailValidity = () => {
return useMutation({
mutationKey: [NAME_SPACE, 'mail-validity'],
mutationFn: (body: { email: string, code: string, token: string }) => {
return post<MailValidityResponse>('/email-register/validity', { body })
},
})
}

export type MailRegisterResponse = { result: string, data: { access_token: string, refresh_token: string } }

export const useMailRegister = () => {
return useMutation({
mutationKey: [NAME_SPACE, 'mail-register'],
mutationFn: (body: { token: string, new_password: string, password_confirm: string }) => {
return post<MailRegisterResponse>('/email-register', { body })
},
})
}

Loading…
İptal
Kaydet