خواندن و وارد کردن خودکار پیامک پسورد ورود یا ثبت نام در فرم وب سایت

سلام دوستان من دنبال راهی بودم تا زمانی که کاربر شماره تماس برای ورود یا ثبت نام وارد کرد و پیامک پسورد براش ارسال شد به صورت خودکار پیامک پسورد در فیلد اینپوت وارد بشه و نیازی به وارد کردن توسط کاربر نباشه . کد زیر رو پیاده سازی کردم ولی حتی زمانی که 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);
      });
  });

ثبت پرسش جدید

مهدی نظری

تخصص : توسعه دهنده Front End

@mahdi.nazari 2 سال پیش مطرح شد

سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨

درخواستی که می‌خواهید انجام بدی ، نیاز به ارسال پیامک به تلفن همراه کاربر داره و برای این کار نیاز به استفاده از یک سیستم پیامک (مثل 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) برای ارسال پیامک‌ها استفاده کنی و تنظیمات مربوط به آن را در کد خود تنظیم کنی.

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

خواندن و وارد کردن خودکار پیامک پسورد ورود یا ثبت نام در فرم وب سایت

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

	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);
	});
	});

	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} اجرا شد`);
	});

	// JavaScript که پیامک کد OTP را در فیلد ورودی وارد می‌کند
	const otpInput = document.getElementById('otp-input');
	otpInput.value = otpCode;