اتصال به بک‌اند

فرم‌ها را از حالت نمایشی به سرور واقعی وصل کنید: نشانی سرویس‌ها، قالب درخواست و پاسخ.

نحوهٔ کار#

وقتی demo برابر false باشد، هر فرم پس از اعتبارسنجی موفق، فیلدهایش را به‌صورت JSON با روش POST به نشانی سرویس مربوط می‌فرستد و بر اساس پاسخ سرور پیام نشان می‌دهد یا به صفحهٔ بعد می‌رود. کد جاوااسکریپت را لازم نیست تغییر دهید؛ فقط config.js و سرور شما.

راه‌اندازی#

1. حالت نمایشی را خاموش کنید

   window.MN_CONFIG = {
     demo: false,
     // ...
   };

2. نشانی سرویس‌ها را بنویسید

   هر کلید در api با صفت data-endpoint یک فرم مطابقت دارد:

   api: {
     login:       "/api/auth/login",
     register:    "/api/auth/register",
     forgot:      "/api/auth/forgot-password",
     reset:       "/api/auth/reset-password",
     verifyOtp:   "/api/auth/verify-otp",
     resendOtp:   "/api/auth/resend-otp",
     resendEmail: "/api/auth/resend-email",
     waitlist:    "/api/waitlist"
   }

3. سرویس‌ها را پیاده‌سازی کنید

   هر سرویس بدنهٔ JSON جدول زیر را می‌گیرد و طبق [قالب پاسخ](#response) جواب می‌دهد.

4. ورود اجتماعی را فعال کنید (اختیاری)

   نشانی شروع جریان OAuth سرور خود را در social.google یا social.apple بنویسید. دکمه‌ای که نشانی ندارد در حالت غیرنمایشی پنهان می‌شود.

سرویس‌ها و دادهٔ ارسالی#

نام کلیدهای JSON همان صفت name هر input است. چک‌باکس‌ها مقدار true یا false می‌فرستند.

مقدار purpose برای otp.html پیش‌فرض reset و برای 2fa.html برابر 2fa است. در پیوند تأیید ایمیل با ?purpose=email به email تغییر می‌کند. هر فیلد پنهان (<input type="hidden" name="...">) که به فرم اضافه کنید هم همراه درخواست ارسال می‌شود.

شناسهٔ بازیابی رمز#

reset-password.html به‌طور پیش‌فرض فقط دو رمز را می‌فرستد؛ سرور می‌تواند هویت بازیابی را از نشست (کوکی) که در مرحلهٔ تأیید کد ساخته است بخواند. اگر بازیابی شما با توکن در آدرس کار می‌کند، یک فیلد پنهان اضافه کنید:

<input type="hidden" name="token" id="reset-token">
<script>
  document.getElementById("reset-token").value =
    new URLSearchParams(location.search).get("token") || "";
</script>

قالب پاسخ#

سرور باید با JSON پاسخ دهد. کد وضعیت HTTP تعیین می‌کند چه اتفاقی بیفتد:

نمونه پاسخ‌ها#

// 200 OK
{
  "message": "خوش آمدید",
  "next": "/dashboard"
}

// 422 Unprocessable Content
{
  "message": "اطلاعات واردشده معتبر نیست.",
  "errors": {
    "email": "این ایمیل قبلاً ثبت شده است."
  }
}

// 401 Unauthorized
{
  "message": "ایمیل یا رمز عبور درست نیست."
}

// 423 Locked
{}

نمونهٔ سرور#

نمونهٔ زیر سرویس ورود را نشان می‌دهد. منطق بررسی کاربر مال شماست؛ فقط شکل پاسخ‌ها مهم است.

import express from "express";
const app = express();
app.use(express.json());

app.post("/api/auth/login", async (req, res) => {
  const { email, password, remember } = req.body;
  const user = await findUser(email);               // منطق شما

  if (user?.locked) return res.status(423).json({});
  if (!user || !(await user.checkPassword(password))) {
    return res.status(401).json({ message: "ایمیل یا رمز عبور درست نیست." });
  }

  req.session.userId = user.id;
  res.json({ next: user.twoFactor ? "2fa.html" : "/dashboard" });
});

app.listen(3000);

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;

Route::post('/api/auth/login', function (Request $request) {
    $credentials = $request->validate([
        'email'    => ['required', 'email'],
        'password' => ['required'],
    ]);

    if (! Auth::attempt($credentials, $request->boolean('remember'))) {
        return response()->json(['message' => 'ایمیل یا رمز عبور درست نیست.'], 401);
    }

    $request->session()->regenerate();
    return response()->json(['next' => '/dashboard']);
});

curl -i -X POST http://localhost:3000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"user@example.com","password":"Secret123","remember":true}'

توکن CSRF#

اگر در صفحه تگ <meta name="csrf-token" content="..."> باشد، مقدار آن در هدر X-CSRF-Token همراه هر درخواست ارسال می‌شود. نام تگ و هدر در config.csrf قابل تغییر است:

<meta name="csrf-token" content="{{ csrf_token() }}">

csrf: { meta: "csrf-token", header: "X-XSRF-TOKEN" }

چون صفحه‌ها فایل ایستا هستند، برای تزریق توکن آن‌ها را از قالب‌ساز سرور (Blade، Twig، EJS و مانند آن) سرو کنید یا توکن را از یک سرویس جداگانه بخوانید و پیش از ارسال فرم در تگ meta بنویسید.

کوکی و CORS#

اگر صفحه‌ها و API روی یک دامنه‌اند، تنظیم خاصی لازم نیست. اگر API روی دامنهٔ دیگری است:

• در config.js مقدار credentials: "include" را بگذارید.
• سرور باید Access-Control-Allow-Origin را برابر دامنهٔ صفحه‌ها (نه *) و Access-Control-Allow-Credentials را true بفرستد.
• کوکی نشست باید SameSite=None; Secure باشد.
• نشانی‌های api را کامل (با https://دامنه) بنویسید.

رویدادهای موفقیت و خطا#

به‌جای یا در کنار پاسخ سرور، می‌توانید به رویدادهای mn:success و mn:error گوش دهید؛ مثلاً برای ثبت آمار یا هدایت به مقصد خارج از دامنه:

document.addEventListener("mn:success", e => {
  const { endpoint, data } = e.detail;
  if (endpoint === "login") analytics.track("login");
});

جزئیات رویدادها در [مرجع جاوااسکریپت](javascript.html#events) آمده است. مقدار data-next روی فرم می‌تواند هر نشانی (از جمله دامنهٔ دیگر) باشد؛ محدودیت هم‌مبدأ فقط برای next ارسالی از سرور اعمال می‌شود.

ملاحظات سمت سرور#

اعتبارسنجی سمت مرورگر فقط تجربهٔ کاربری را بهتر می‌کند و جایگزین بررسی سرور نیست. این موارد باید در سرور اجرا شوند:

• اعتبارسنجی دوبارهٔ همهٔ ورودی‌ها و ذخیرهٔ رمز با الگوریتم مناسب (bcrypt، Argon2).
• محدودیت تعداد تلاش برای ورود، ارسال کد و بازیابی رمز؛ پاسخ 429 یا 423.
• محافظت CSRF برای درخواست‌هایی که با کوکی احراز هویت می‌شوند.
• انقضا و یک‌بارمصرف بودن کدها و توکن‌ها.
• عدم افشای وجود یا نبود یک ایمیل در پاسخ «فراموشی رمز».