سلام دوستان من دنبال راهی بودم تا زمانی که کاربر شماره تماس برای ورود یا ثبت نام وارد کرد و پیامک پسورد براش ارسال شد به صورت خودکار پیامک پسورد در فیلد اینپوت وارد بشه و نیازی به وارد کردن توسط کاربر نباشه . کد زیر رو پیاده سازی کردم ولی حتی زمانی که console.log هم میگیرم توی قسمت cache ارسال میشه .
البته به این نکات هم دقت کردم :
نکته 1: فقط روی https کار میکنه پس در حالت تست فعالش کنید
نکته 2: در sms دریافتی حتما باید در آخر متن اون این فرمت اعمال بشه
@example.com #MY_CODE
نکته 3: کد رو حتما چک کنید ک نقطه یا فاصله اضافی نداشته باشه بعد ستش کنید
useEffect(() => {
const controller = new AbortController();
navigator.credentials
?.get({
otp: {transport: ['sms']},
signal: controller.signal,
} as CredentialRequestOptions & { otp: { transport: string[] } })
.then((otp: any) => {
console.log('otp : ' + otp)
console.log('otp code : ' + otp.code)
})
.catch((err) => {
console.log(err);
});
});
سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨
درخواستی که میخواهید انجام بدی ، نیاز به ارسال پیامک به تلفن همراه کاربر داره و برای این کار نیاز به استفاده از یک سیستم پیامک (مثل Twilio یا Nexmo) داری. در ادامه، یک مثال از چگونگی انجام این کار با استفاده از Twilio و Node.js میارم برات . شما میتونی این مثال را تغییر بدی و به نیازهای خود وب سایت اعمال کنی.
نصب و راهاندازی بستههای مورد نیاز:
نصب بستههای express
و twilio
از طریق npm:
npm install express twilio
ساخت یک وب سرور با Express.js:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// تنظیمات Twilio
const accountSid = 'YOUR_TWILIO_ACCOUNT_SID';
const authToken = 'YOUR_TWILIO_AUTH_TOKEN';
const client = require('twilio')(accountSid, authToken);
// صفحه ورود/ثبت نام
app.get('/', (req, res) => {
res.send('<form action="/send-otp" method="post"><input type="tel" name="phoneNumber" placeholder="شماره تماس" required><button type="submit">ارسال کد OTP</button></form>');
});
// ارسال کد OTP
app.post('/send-otp', (req, res) => {
const phoneNumber = req.body.phoneNumber;
// تولید کد OTP تصادفی
const otpCode = Math.floor(1000 + Math.random() * 9000);
// ارسال کد OTP به شماره تلفن همراه
client.messages
.create({
body: `کد تایید: ${otpCode}`,
from: 'YOUR_TWILIO_PHONE_NUMBER',
to: phoneNumber
})
.then(message => {
console.log(message.sid);
res.send('کد تایید ارسال شد.');
})
.catch(error => {
console.error(error);
res.status(500).send('مشکلی در ارسال پیامک به وجود آمده است.');
});
});
app.listen(port, () => {
console.log(`وب سرور در http://localhost:${port} اجرا شد`);
});
در این مثال، ابتدا یک وب سرور Express ایجاد شده و یک فرم برای ورود/ثبت نام تعریف کردم . وقتی که کاربر شماره تلفن همراه خود را وارد میکنه و دکمه "ارسال کد OTP" را میزنه، یک کد OTP تصادفی تولید میشه و به شماره تلفن همراه ارسال میشود.
توجه داشته باش که باید اطلاعات تنظیمات Twilio (مانند accountSid
، authToken
، و from
) را با مقادیر واقعی خودت جایگزین کنی
برای اجرای وب سرور، دستور زیر را در خط فرمان وارد کنید:
node your-server-file.js
وب سرور شما حالا باید در آدرس http://localhost:3000 قابل دسترس باشد. کاربران میتوانند شماره تلفن همراه خود را وارد کنند و کد OTP را دریافت کنند.
برای پیادهسازی نمایش کد OTP در فیلد ورودی به صورت خودکار، میتوانید با استفاده از JavaScript کدی نوشته و در صفحهی وب خود اجرا کنی
مثلاً:
// JavaScript که پیامک کد OTP را در فیلد ورودی وارد میکند
const otpInput = document.getElementById('otp-input');
otpInput.value = otpCode;
این کد JavaScript باید در صفحهی وب شما اجرا میشه و کد OTP را از پیامک دریافتی به صورت خودکار در فیلد ورودی (otp-input
) قرار میده.
مهمترین نکته این است که شما باید از یک سیستم پیامک معتبر (مانند Twilio) برای ارسال پیامکها استفاده کنی و تنظیمات مربوط به آن را در کد خود تنظیم کنی.
امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟