با سلام
اخیرا چالشی برام پیش اومد که باید توسط WebOTP API مرورگر، پیامک کد تایید ارسال شده برای کاربر رو بصورت خودکار توسط مرورگر دریافت می خوندم و داخل تگ Input قرار میدادم چون آموزش بخصوصی به زبان فارسی ندیدم سعی کردم این مقاله رو بنویسم
مراحل انجام کار:
1- اول باید قالب پیامک ارسالی تون به این صورت اصلاح کنید
عنوان سایت شما
code : <code>
@<website_url> #<code>
تو قسمت website_url بعد از @ اسم دامنه سایت رو بدون http (دامنه فرانت اند) رو می نویسید بعد یه فاصله میدید و بعد از # کد تایید رو قرار می دید
حتما باید موارد رو رعایت کنید وگرنه کد دریافت نمی شه
مثال :
به سایت ویرگول خوش آمدید
code : 12345
@virgool.io #12345
2- کد بررسی رو بعد از ارسال کد تایید به بک اند رو اجرا کنید
if ('OTPCredential' in window) {
const ac = new AbortController();
navigator.credentials
.get({
otp: { transport: ['sms'] },
signal: ac.signal,
})
.then((otp) => {
console.log('otp recived');
form.value.code = otp.code;
verifyLogin();
ac.abort();
})
.catch((err) => {
ac.abort();
console.log(err);
});
} else {
console.log('not supported');
}
نکته دیگه ای که باید به اون دقت کنیم اینه که دامنه سایتی که کد otp رو دریافت می کنید حتما باید دارای گواهینامه ssl باشه و با https شروع بشه
امیدوارم که این مقاله واستون مفید باشه
