boursecu/boursecu_user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bug of WebOTP

Browse Source
This commit is contained in:
safavimohadeseh78
2026-07-21 12:06:42 +02:00
parent a60f1fbc68
commit 3be79ef9f0
6 changed files with 429 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.d.ts
Vendored
+3
View File
@@ -22,6 +22,7 @@ declare module 'vue' {
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASlider: typeof import('ant-design-vue/es')['Slider']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASwitch: typeof import('ant-design-vue/es')['Switch']
ATag: typeof import('ant-design-vue/es')['Tag']
ATextarea: typeof import('ant-design-vue/es')['Textarea']
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
@@ -60,6 +61,7 @@ declare module 'vue' {
RouterView: typeof import('vue-router')['RouterView']
SelectInRange: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/select-in-range.vue')['default']
Size: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/size.vue')['default']
SmsOtpField: typeof import('./src/components/SmsOtpField.vue')['default']
StartEnd: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/start-end.vue')['default']
Suffix: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/suffix.vue')['default']
SupportContactBar: typeof import('./src/components/SupportContactBar.vue')['default']
@@ -69,5 +71,6 @@ declare module 'vue' {
TransactionSkeleton: typeof import('./src/components/TransactionSkeleton.vue')['default']
VanActionSheet: typeof import('vant/es')['ActionSheet']
VanDialog: typeof import('vant/es')['Dialog']
VanField: typeof import('vant/es')['Field']
}
}
src/components/SmsOtpField.vue
+295
View File
@@ -0,0 +1,295 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { persianToEnglishDigits } from '@/utils/persianDigits'
import {
beginSmsOtpCapture,
clearPendingSmsOtp,
subscribeSmsOtp,
} from '@/utils/webOtp'
const props = withDefaults(
defineProps<{
modelValue?: string
length?: number
autofocus?: boolean
}>(),
{
modelValue: '',
length: 4,
autofocus: true,
},
)
const emit = defineEmits<{
'update:modelValue': [value: string]
change: [value: string]
complete: [value: string]
}>()
const inputRef = ref<HTMLInputElement | null>(null)
const localValue = ref('')
let completedFor = ''
let pollTimer: ReturnType<typeof setInterval> | null = null
let unsubscribeOtp: (() => void) | null = null
const digits = computed(() => {
const chars = localValue.value.padEnd(props.length, ' ').slice(0, props.length).split('')
return chars.map((ch) => (ch === ' ' ? '' : ch))
})
function normalize(raw: string) {
return persianToEnglishDigits(raw).replace(/\D/g, '').slice(0, props.length)
}
function applyCode(raw: string) {
const code = normalize(raw)
if (!code || code === localValue.value) {
return
}
localValue.value = code
if (inputRef.value && inputRef.value.value !== code) {
inputRef.value.value = code
}
emit('update:modelValue', code)
emit('change', code)
if (code.length === props.length && completedFor !== code) {
completedFor = code
clearPendingSmsOtp()
emit('complete', code)
}
if (code.length < props.length) {
completedFor = ''
}
}
function syncFromDom() {
const direct = inputRef.value?.value ?? ''
if (direct) {
applyCode(direct)
return
}
// اگر Chrome جای دیگری با autocomplete پر کرده
const nodes = document.querySelectorAll<HTMLInputElement>(
'input[autocomplete="one-time-code"]',
)
for (const node of nodes) {
const value = node.value ?? ''
if (normalize(value).length === props.length) {
applyCode(value)
return
}
}
}
function onInput(event: Event) {
applyCode((event.target as HTMLInputElement).value)
}
function onChange(event: Event) {
applyCode((event.target as HTMLInputElement).value)
}
function onAnimationStart(event: AnimationEvent) {
if (!String(event.animationName || '').includes('onAutoFillStart')) {
return
}
syncFromDom()
}
function focusInput() {
const el = inputRef.value
if (!el) return
el.focus({ preventScroll: true })
try {
el.setSelectionRange(el.value.length, el.value.length)
} catch {
/* ignore */
}
}
function clearInput() {
completedFor = ''
localValue.value = ''
clearPendingSmsOtp()
if (inputRef.value) {
inputRef.value.value = ''
}
emit('update:modelValue', '')
emit('change', '')
focusInput()
}
function fillInput(value: string) {
applyCode(value)
}
function startWebOtp() {
beginSmsOtpCapture(props.length)
}
function startPolling() {
stopPolling()
pollTimer = setInterval(() => {
syncFromDom()
}, 200)
}
function stopPolling() {
if (pollTimer) {
clearInterval(pollTimer)
pollTimer = null
}
}
watch(
() => props.modelValue,
(val) => {
const next = normalize(val ?? '')
if (next !== localValue.value) {
localValue.value = next
if (inputRef.value) {
inputRef.value.value = next
}
}
},
{ immediate: true },
)
onMounted(async () => {
await nextTick()
beginSmsOtpCapture(props.length)
unsubscribeOtp = subscribeSmsOtp((code) => {
applyCode(code)
})
if (props.autofocus) {
focusInput()
}
startPolling()
})
onBeforeUnmount(() => {
unsubscribeOtp?.()
unsubscribeOtp = null
stopPolling()
// listener سراسری را abort نکن — دیالوگ Allow هنوز ممکن است باز باشد
})
defineExpose({
focusInput,
clearInput,
fillInput,
startWebOtp,
inputRef,
})
</script>
<template>
<div class="sms-otp" dir="ltr" @click="focusInput">
<div class="sms-otp__boxes" aria-hidden="true">
<div
v-for="(digit, index) in digits"
:key="index"
class="sms-otp__box otp-input"
:class="{
'sms-otp__box--filled': !!digit,
'sms-otp__box--active': localValue.length === index,
}"
>
{{ digit }}
</div>
</div>
<input
ref="inputRef"
class="sms-otp__input"
type="text"
inputmode="numeric"
pattern="[0-9]*"
autocomplete="one-time-code"
name="one-time-code"
:maxlength="length"
enterkeyhint="done"
autocapitalize="off"
autocorrect="off"
spellcheck="false"
aria-label="کد تایید پیامک"
@input="onInput"
@change="onChange"
@keyup="onInput"
@paste="onInput"
@animationstart="onAnimationStart"
/>
</div>
</template>
<style scoped>
.sms-otp {
position: relative;
display: flex;
justify-content: center;
width: 100%;
margin-top: 1.25rem;
direction: ltr;
}
.sms-otp__boxes {
display: flex;
justify-content: center;
pointer-events: none;
}
.sms-otp__box {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin: 0 8px;
font-size: 20px;
font-weight: 600;
border: 1px solid #d1d5db;
border-radius: 4px;
background: #fff;
color: #111827;
}
.sms-otp__box--active {
border-color: var(--App-primary-color, #0a1b37);
}
.sms-otp__input {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
/* کمتر از این را Chrome گاهی autofill نمی‌کند */
opacity: 0.15;
color: transparent;
caret-color: var(--App-primary-color, #0a1b37);
background: transparent;
font-size: 16px;
letter-spacing: 48px;
text-align: left;
direction: ltr;
animation-name: onAutoFillStart;
animation-duration: 0.001s;
}
@keyframes onAutoFillStart {
from {
/**/
}
to {
/**/
}
}
</style>
src/utils/webOtp.ts
+93 -16
View File
@@ -1,39 +1,116 @@
import { persianToEnglishDigits } from '@/utils/persianDigits'
/** استخراج کد عددی از نتیجه WebOTP / Credential */
type OtpHandler = (code: string) => void
let activeController: AbortController | null = null
let listenGeneration = 0
let pendingCode: string | null = null
const handlers = new Set<OtpHandler>()
/** استخراج کد عددی از نتیجه WebOTP / Credential / رشته خام */
export function extractOtpCode(
credential: Credential | null | undefined,
length = 4
credential: Credential | null | undefined | string,
length = 4,
): string {
const raw = (credential as { code?: string } | null | undefined)?.code ?? ''
let raw = ''
if (typeof credential === 'string') {
raw = credential
} else if (credential && typeof credential === 'object') {
const c = credential as { code?: string; id?: string }
raw = c.code ?? c.id ?? ''
}
return persianToEnglishDigits(raw).replace(/\D/g, '').slice(0, length)
}
/**
* گوش دادن به SMS از طریق WebOTP API (Chrome Android).
* با کلیک Allow روی دیالوگ مرورگر، onCode با کد ۴ رقمی صدا زده می‌شود.
*/
export function listenForSmsOtp(onCode: (code: string) => void): AbortController {
const ac = new AbortController()
function emitCode(code: string) {
pendingCode = code
handlers.forEach((handler) => {
try {
handler(code)
} catch {
/* ignore subscriber errors */
}
})
}
if (!('OTPCredential' in window) || !navigator.credentials?.get) {
return ac
/**
* شروع زودهنگام WebOTP — باید قبل از ارسال SMS / همزمان با درخواست کد صدا زده شود.
* اگر از قبل در حال listen باشد، دوباره abort نمی‌کند (دیالوگ Allow را خراب نکند).
*/
export function beginSmsOtpCapture(length = 4): void {
if (typeof window === 'undefined' || !navigator.credentials?.get) {
return
}
if (activeController && !activeController.signal.aborted) {
return
}
const ac = new AbortController()
activeController = ac
const generation = ++listenGeneration
void navigator.credentials
.get({
otp: { transport: ['sms'] },
signal: ac.signal,
} as CredentialRequestOptions)
.then((credential) => {
const code = extractOtpCode(credential, 4)
if (code.length === 4) {
onCode(code)
if (generation !== listenGeneration) return
const code = extractOtpCode(credential, length)
if (code.length === length) {
emitCode(code)
}
})
.catch(() => {
/* aborted or denied — ignore */
/* Deny / Abort / unsupported */
})
.finally(() => {
if (activeController === ac) {
activeController = null
}
})
}
/** عضویت برای دریافت کد — اگر کد از قبل آمده باشد همان لحظه می‌دهد */
export function subscribeSmsOtp(handler: OtpHandler): () => void {
handlers.add(handler)
if (pendingCode) {
try {
handler(pendingCode)
} catch {
/* ignore */
}
}
return () => {
handlers.delete(handler)
}
}
export function clearPendingSmsOtp(): void {
pendingCode = null
}
export function stopSmsOtpCapture(): void {
listenGeneration += 1
activeController?.abort()
activeController = null
}
/**
* سازگاری با کد قبلی — subscribe + begin
* توجه: abort کردن این controller دیگر listener سراسری را قطع نمی‌کند.
*/
export function listenForSmsOtp(onCode: (code: string) => void): AbortController {
const ac = new AbortController()
const unsubscribe = subscribeSmsOtp((code) => {
if (!ac.signal.aborted) {
onCode(code)
}
})
beginSmsOtpCapture()
ac.signal.addEventListener('abort', () => {
unsubscribe()
})
return ac
}
src/views/login/components/Login.vue
+20 -83
View File
@@ -118,31 +118,12 @@
name="token"
style="position: relative"
>
<OtpInput
<SmsOtpField
ref="refOtpInput"
:is-input-num="true"
:num-inputs="4"
:should-auto-focus="true"
autocomplete="one-time-code"
:class="variant === 'desktop' ? 'dauth-otp justify-center' : 'mt-5 justify-center'"
input-classes="otp-input"
separator=""
style="direction: ltr"
:value="userFormState.token || ''"
@on-change="handleOnChange"
@on-complete="handleOnComplete"
/>
<!-- برای WebOTP / پیشنهاد کیبورد: autocomplete باید روی input واقعی باشد -->
<input
class="web-otp-assist"
type="text"
inputmode="numeric"
autocomplete="one-time-code"
maxlength="4"
tabindex="-1"
aria-hidden="true"
:value="userFormState.token || ''"
@input="onWebOtpAssistInput"
v-model="userFormState.token"
:class="variant === 'desktop' ? 'dauth-otp' : undefined"
@change="handleOnChange"
@complete="handleOnComplete"
/>
</AFormItem>
@@ -159,7 +140,7 @@
<div v-else class="flex items-center my-[23px] justify-center">
<span class="text-gray-400 mt-1">{{ userFormState.mobile }}</span>
<div class="flex items-center text-gray-700 mr-2" @click="stepTwoVerify = false">
<span class="ml-1">ویرایش شماره</span>
<span class="ml-1">ویرایش شش2ماره</span>
<BasicIcon icon="vuesax-linear:edit" size="20" />
</div>
</div>
@@ -333,8 +314,8 @@ import { mobileValidation, required } from '@/utils/inputRules'
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import { authenticateWithFingerprint, getToken, loading, removeToken, setToken, URLUserType } from '@/utils'
import {computed, reactive, ref, inject, unref, nextTick, onBeforeUnmount} from 'vue'
import OtpInput from 'vue3-otp-input'
import {computed, reactive, ref, inject, unref} from 'vue'
import SmsOtpField from '@/components/SmsOtpField.vue'
import type { Login } from '@/models/login'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
@@ -357,8 +338,8 @@ import {
isTWA
} from "@/utils/config";
import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
import { normalizeAuthFormFields, persianToEnglishDigits } from '@/utils/persianDigits'
import { listenForSmsOtp } from '@/utils/webOtp'
import { normalizeAuthFormFields } from '@/utils/persianDigits'
import { beginSmsOtpCapture, clearPendingSmsOtp } from '@/utils/webOtp'
import {getConfig} from "@/api/config";
import shareAppleIcon from '@/assets/img/share-apple.png'
import addToHomeScreenIcon from '@/assets/img/Add-to-homeScreen.png'
@@ -390,8 +371,7 @@ const walletStore = useWalletStore()
const setting=useSettingsStore()
const data = reactive(['ورود با پیامک', 'ورود با کلمه عبور'])
const value = ref(data[0])
const refOtpInput = ref<InstanceType<typeof OtpInput> | null>(null)
let otpAbort: AbortController | null = null
const refOtpInput = ref<InstanceType<typeof SmsOtpField> | null>(null)
const userFormState = reactive<Login>({
provider: 'customer'
@@ -402,18 +382,16 @@ onFinish(() => {
enableSendAgainCode.value = true
})
onBeforeUnmount(() => {
otpAbort?.abort()
otpAbort = null
})
async function reSendCode() {
userFormState.token = undefined
;(refOtpInput.value as { clearInput?: () => void } | null)?.clearInput?.()
clearPendingSmsOtp()
refOtpInput.value?.clearInput?.()
enableSendAgainCode.value = false
normalizeAuthFormFields(userFormState)
beginSmsOtpCapture()
await loginCustomer(userFormState)
getcode()
refOtpInput.value?.startWebOtp?.()
refOtpInput.value?.focusInput?.()
reset()
}
@@ -489,10 +467,11 @@ function phoneVerification() {
userFormState.token = undefined
userFormState.password = undefined
userFormState.provider = 'customer'
// مهم: قبل از ارسال SMS گوش بده تا دیالوگ Allow به listener زنده وصل باشد
beginSmsOtpCapture()
const { id } = await loginCustomer(userFormState)
userFormState.id = id
stepTwoVerify.value = true
getcode()
reset()
} else {
const { access_token } = await verifyToken(userFormState)
@@ -510,37 +489,6 @@ function phoneVerification() {
}
})
}
const getcode = () => {
otpAbort?.abort()
otpAbort = listenForSmsOtp((code) => {
void applySmsOtpCode(code)
})
}
async function applySmsOtpCode(code: string) {
userFormState.token = code
await nextTick()
const input = refOtpInput.value as { fillInput?: (v: string) => void } | null
if (input?.fillInput) {
try {
input.fillInput(code)
return
} catch {
/* fall through */
}
}
await phoneVerification()
}
function onWebOtpAssistInput(event: Event) {
const raw = (event.target as HTMLInputElement | null)?.value ?? ''
const code = persianToEnglishDigits(raw).replace(/\D/g, '').slice(0, 4)
if (code.length === 4) {
void applySmsOtpCode(code)
} else {
userFormState.token = code
}
}
const goToEducate = () => {
router.push({ name: "educate" })
@@ -570,18 +518,7 @@ async function proceedWithInstall() {
transform: translate(100%, 0);
}
/* Must stay in DOM (not display:none) so Chrome/Safari can autofill OTP */
.web-otp-assist {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
opacity: 0;
pointer-events: none;
.error-token {
position: relative;
}
</style>
src/views/login/composables/useLoginForm.ts
+12 -35
View File
@@ -1,7 +1,7 @@
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import OtpInput from 'vue3-otp-input'
import type SmsOtpField from '@/components/SmsOtpField.vue'
import type { Login } from '@/models/login'
import {
authenticateWithFingerprint,
@@ -11,14 +11,13 @@ import {
} from '@/utils'
import useCountdownTimer from '@/utils/useCountdownTimer'
import { loginCustomer, verifyToken } from '@/api/login'
import router from '@/router'
import { useUserStore } from '@/store/userStore'
import { useWalletStore } from '@/store/walletStore'
import { useSettingsStore } from '@/store/settingsStore'
import { setTruth } from '@/app/authBoot'
import { completeLoginNavigation } from '@/layouts/composables/useMobileScrollReset'
import { normalizeAuthFormFields } from '@/utils/persianDigits'
import { listenForSmsOtp } from '@/utils/webOtp'
import { beginSmsOtpCapture, clearPendingSmsOtp } from '@/utils/webOtp'
export function useLoginForm() {
const { time, onFinish, reset } = useCountdownTimer('00:02:00', 'mm:ss')
@@ -27,11 +26,10 @@ export function useLoginForm() {
const formRef = ref<FormInstance>()
const userStore = useUserStore()
const walletStore = useWalletStore()
const refOtpInput = ref<InstanceType<typeof OtpInput> | null>(null)
const refOtpInput = ref<InstanceType<typeof SmsOtpField> | null>(null)
const isSMS = ref(true)
const isRegister = ref<boolean | undefined>()
const showPWAInstallGuide = ref(false)
let otpAbort: AbortController | null = null
const userFormState = reactive<Login>({
provider: 'customer',
@@ -42,17 +40,19 @@ export function useLoginForm() {
})
onBeforeUnmount(() => {
otpAbort?.abort()
otpAbort = null
// SmsOtpField cleans its own listener
})
async function reSendCode() {
userFormState.token = undefined
;(refOtpInput.value as { clearInput?: () => void } | null)?.clearInput?.()
clearPendingSmsOtp()
refOtpInput.value?.clearInput?.()
enableSendAgainCode.value = false
normalizeAuthFormFields(userFormState)
beginSmsOtpCapture()
await loginCustomer(userFormState)
getcode()
refOtpInput.value?.startWebOtp?.()
refOtpInput.value?.focusInput?.()
reset()
}
@@ -92,31 +92,8 @@ export function useLoginForm() {
await completeLoginNavigation()
}
async function applySmsOtpCode(code: string) {
userFormState.token = code
await nextTick()
const input = refOtpInput.value as { fillInput?: (v: string) => void } | null
if (input?.fillInput) {
try {
input.fillInput(code)
// fillInput → on-complete → handleOnComplete → phoneVerification
return
} catch {
/* fall through */
}
}
await phoneVerification()
}
function getcode() {
otpAbort?.abort()
otpAbort = listenForSmsOtp((code) => {
void applySmsOtpCode(code)
})
}
function phoneVerification() {
formRef.value?.validateFields().then(async () => {
return formRef.value?.validateFields().then(async () => {
try {
loading.value = true
normalizeAuthFormFields(userFormState)
@@ -125,10 +102,10 @@ export function useLoginForm() {
userFormState.token = undefined
userFormState.password = undefined
userFormState.provider = 'customer'
beginSmsOtpCapture()
const { id } = await loginCustomer(userFormState)
userFormState.id = id
stepTwoVerify.value = true
getcode()
reset()
} else {
const { access_token } = await verifyToken(userFormState)
src/views/login/desktop/components/DesktopLoginForm.vue
+6 -37
View File
@@ -3,15 +3,13 @@ import { mobileValidation, required } from '@/utils/inputRules'
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import OtpInput from 'vue3-otp-input'
import SmsOtpField from '@/components/SmsOtpField.vue'
import { useConfigStore } from '@/store/configStore'
import { useLoginPageContext } from '../../composables/useLoginPage'
import DesktopPwaGuideModal from './DesktopPwaGuideModal.vue'
import router from '@/router'
import {isTWA} from "@/utils/config";
import {useUserStore} from "@/store/userStore";
import {useSettingsStore} from "@/store/settingsStore";
import { persianToEnglishDigits } from '@/utils/persianDigits'
const emit = defineEmits<{
register: [val: boolean]
@@ -42,17 +40,6 @@ const {
proceedWithInstall,
} = useLoginPageContext().loginForm
function onWebOtpAssistInput(event: Event) {
const raw = (event.target as HTMLInputElement | null)?.value ?? ''
const code = persianToEnglishDigits(raw).replace(/\D/g, '').slice(0, 4)
if (code.length === 4) {
userFormState.token = code
handleOnComplete(code)
} else {
handleOnChange(code)
}
}
function goToEducate() {
router.push({ name: 'educate' })
}
@@ -137,30 +124,12 @@ function goToAboutUs() {
name="token"
style="position: relative"
>
<OtpInput
<SmsOtpField
ref="refOtpInput"
:is-input-num="true"
:num-inputs="4"
:should-auto-focus="true"
autocomplete="one-time-code"
class="dauth-otp justify-center"
input-classes="otp-input"
separator=""
style="direction: ltr"
:value="userFormState.token || ''"
@on-change="handleOnChange"
@on-complete="handleOnComplete"
/>
<input
class="web-otp-assist"
type="text"
inputmode="numeric"
autocomplete="one-time-code"
maxlength="4"
tabindex="-1"
aria-hidden="true"
:value="userFormState.token || ''"
@input="onWebOtpAssistInput"
v-model="userFormState.token"
class="dauth-otp"
@change="handleOnChange"
@complete="handleOnComplete"
/>
</AFormItem>