پرش به مطلب اصلی

حساب کاربری وردپرس در اپ

در این آموزش صفحه‌های ورود، ثبت‌نام، ورود با شماره موبایل، پروفایل و تغییر رمز را می‌سازیم؛ همه روی حساب کاربری سایت وردپرسی شما.

مهم

اپ‌ادیتور دو سیستم حساب کاربری مستقل دارد:

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

این آموزش درباره دومی است. اگر هر دو را فعال کنید، کاربر باید در هر دو وارد شود و ورود یکی به‌معنی ورود دیگری نیست.

پیش‌نیازها​

  • افزونه AppEditor - App Builder for WordPress روی سایت نصب و به پنل متصل باشد. بدون این افزونه هیچ‌کدام از عملکردهای این صفحه کار نمی‌کنند.
  • در اپ ادیتور ← تنظیمات وردپرس، گزینه «فعال بودن API اپ» روشن باشد.
  • برای ثبت‌نام از داخل اپ، هم گزینه «اجازه ثبت‌نام از اپ» در افزونه و هم تنظیمات ← عمومی ← عضویت در وردپرس روشن باشد.
  • برای ورود با موبایل، Digits یا ارائه‌دهنده پشتیبانی‌شده دیگری نصب و آزمایش شده باشد و ورود موبایلی در تنظیمات افزونه فعال باشد.

مراحل کامل در راه‌اندازی اتصال وردپرس آمده است.

گام ۱: صفحه ورود​

  1. صفحه‌ای به نام «ورود» بسازید. میان‌بر: از منوی افزودن ویجت مسیر وردپرس ← بلوک‌های حساب کاربری ← فرم ورود را انتخاب کنید.
  2. برای ساخت دستی، دو فیلد متن فرم اضافه کنید:
    • فیلد نام کاربری یا ایمیل، با متغیر login.username
    • فیلد رمز عبور با حالت مخفی، با متغیر login.password
  3. دکمه «ورود» بسازید و عملکرد ورود به حساب وردپرس را روی آن بگذارید:
    • متغیر نام کاربری/ایمیل: login.username
    • متغیر رمز عبور: login.password
  4. زیر دکمه، یک ویجت متن با مقدار {{sys.wordpress.lastError}} بگذارید و آن را با شرط «خالی نبودن» همان متغیر نمایش دهید تا پیام خطا دیده شود.
یادداشت

فیلدهای عملکرد نام متغیر می‌گیرند نه مقدار. رمز عبور هرگز داخل تنظیمات اپ ذخیره نمی‌شود و فقط هنگام اجرا خوانده می‌شود.

بعد از ورود موفق​

پس از ورود:

  • sys.wordpress.authenticated برابر true می‌شود.
  • sys.wordpress.user با اطلاعات کاربر پر می‌شود.
  • متغیرهای profile.edit، profile.address.billing، profile.address.shipping و آدرس‌های checkout.payload خودکار مقدار می‌گیرند.

روی همان دکمه، بعد از عملکرد ورود یک عملکرد باز کردن صفحه به صفحه «حساب من» اضافه کنید و هر دو را در یک عملکرد چندگانه بگذارید.

گام ۲: صفحه ثبت‌نام​

  1. صفحه‌ای به نام «ثبت‌نام» بسازید یا از بلوک آماده فرم ثبت‌نام استفاده کنید.
  2. فیلدها را به مسیرهای یک متغیر واحد وصل کنید: register.email، register.password، register.first_name و register.last_name.
  3. دکمه «ثبت‌نام» بسازید و عملکرد ثبت‌نام در وردپرس را با «متغیر اطلاعات ثبت‌نام» برابر register روی آن بگذارید.

مقدار نهایی این متغیر باید چنین شکلی داشته باشد:

{
  "email": "user@example.com",
  "password": "at-least-8-chars",
  "first_name": "نام",
  "last_name": "نام خانوادگی"
}
  • email و password اجباری‌اند و رمز باید حداقل ۸ کاراکتر باشد.
  • اگر username ندهید، از ایمیل ساخته می‌شود.
  • اگر ایمیل یا نام کاربری تکراری باشد، پیام خطا در sys.wordpress.lastError قرار می‌گیرد.

تأیید ایمیل و ارسال مجدد​

ثبت‌نام موفق به معنی ورود فوری نیست. افزونه یک پیوند یک‌بارمصرف با اعتبار ۲۴ ساعت به ایمیل کاربر می‌فرستد و پاسخ دارای verification_required را در sys.wordpress.lastResult قرار می‌دهد. در اپ پیام «پیوند تأیید برای شما ارسال شد» نشان دهید و کاربر را تا پیش از باز کردن پیوند وارد حساب نکنید.

برای دکمه «ارسال مجدد ایمیل تأیید»:

  1. یک فیلد ایمیل با متغیر register.email بسازید.
  2. عملکرد ارسال مجدد ایمیل تأیید را اضافه کنید و «متغیر ایمیل» را register.email بگذارید.
  3. پیام عمومی پاسخ را نمایش دهید؛ این پیام عمداً مشخص نمی‌کند حسابی با آن ایمیل وجود دارد یا نه.

ارسال مجدد محدودیت زمانی دارد و فقط برای حساب تأییدنشده ایمیل تازه می‌فرستد.

گام ۳: ورود با شماره موبایل​

این مسیر دو مرحله دارد و بین دو مرحله باید «شناسه درخواست» را نگه دارید.

مرحله اول: ارسال کد​

  1. فیلد شماره موبایل بسازید و مقدارش را در login.phone بریزید.
  2. دکمه «ارسال کد» با عملکرد ارسال کد ورود موبایلی:
    • متغیر شماره موبایل: login.phone
    • پیش‌شماره کشور: +98
    • «اگر کاربر وجود نداشت ثبت‌نام شود» را در صورت نیاز روشن کنید.
  3. پس از ارسال موفق، پاسخ سرور در sys.wordpress.lastResult قرار می‌گیرد. بلافاصله بعد از این عملکرد، یک مقداردهی متغیر اضافه کنید که login.challenge را برابر {{sys.wordpress.lastResult.data.challenge_id}} بگذارد.
  4. سپس صفحه «تأیید کد» را باز کنید.

هر سه مورد را در یک عملکرد چندگانه و به همین ترتیب بچینید.

نکته

اگر مطمئن نیستید نام دقیق فیلد شناسه در پاسخ چیست، برای یک بار یک ویجت متن با مقدار {{sys.wordpress.lastResult}} بگذارید و پاسخ کامل را روی دستگاه ببینید.

مرحله دوم: تأیید کد​

  1. در صفحه «تأیید کد»، فیلد کد بسازید و مقدارش را در login.code بریزید.
  2. دکمه «تأیید» با عملکرد تأیید کد ورود موبایلی:
    • متغیر شناسه درخواست: login.challenge
    • متغیر کد تأیید: login.code
  3. دکمه «ارسال مجدد» با عملکرد ارسال مجدد کد ورود موبایلی و همان متغیر شناسه درخواست.

فاصله مجاز ارسال مجدد، مدت اعتبار کد و سقف تلاش در تنظیمات افزونه تعیین می‌شوند.

گام ۴: صفحه حساب من​

  1. صفحه‌ای به نام «حساب من» بسازید.
  2. کل محتوای آن را با شرط ورود کاربر به حساب وردپرس نمایش دهید و در حالت مخالف، دکمه «ورود» را نشان دهید.
  3. بلوک آماده کارت پروفایل کاربر را اضافه کنید، یا ویجت‌های متن با این مقادیر بسازید:
{{sys.wordpress.user.display_name}}
{{sys.wordpress.user.email}}
  1. دکمه‌های میان‌بر به «سفارش‌های من»، «علاقه‌مندی‌ها»، «فایل‌های خریداری‌شده» و «ویرایش پروفایل» اضافه کنید.
  2. دکمه «خروج» با عملکرد خروج از حساب وردپرس و دکمه «خروج از همه دستگاه‌ها» با عملکرد متناظر آن بگذارید.

گام ۵: ویرایش پروفایل​

  1. صفحه «ویرایش پروفایل» را بسازید.
  2. فیلدها را مستقیم به مسیرهای profile.edit.first_name، profile.edit.last_name، profile.edit.display_name و profile.edit.email وصل کنید. چون این متغیرها پس از ورود خودکار پر شده‌اند، فرم از ابتدا مقدار دارد و کاربر فقط اصلاح می‌کند.
  3. دکمه «ذخیره» با عملکرد ویرایش پروفایل وردپرس و «متغیر اطلاعات پروفایل» برابر profile.edit.
  4. بعد از آن، عملکرد به‌روزرسانی اطلاعات کاربر وردپرس را اضافه کنید تا اطلاعات نمایش‌داده‌شده تازه شود.

آدرس‌ها​

برای ویرایش آدرس، فیلدها را به profile.address.billing.* و profile.address.shipping.* وصل کنید و در متغیر ارسالی، آن‌ها را زیر کلیدهای billing و shipping بگذارید.

فیلدهای هر آدرس: first_name، last_name، company، country، state، city، address_1، address_2، postcode، phone، email.

گام ۶: تغییر و بازیابی رمز​

تغییر رمز​

  1. دو فیلد رمز بسازید: password.current و password.new.
  2. دکمه «تغییر رمز» با عملکرد تغییر رمز وردپرس و همین دو متغیر.

رمز جدید باید حداقل ۸ کاراکتر باشد.

بازیابی رمز​

  1. صفحه «بازیابی رمز» با یک فیلد برای نام کاربری یا ایمیل، در متغیر forget.login.
  2. دکمه با عملکرد بازیابی رمز وردپرس و «متغیر نام کاربری/ایمیل» برابر forget.login.
  3. ایمیل بازیابی از خود وردپرس ارسال می‌شود؛ در اپ فقط پیام «ایمیل ارسال شد» را نشان دهید.

نمایش خطاها به کاربر​

الگوی ساده‌ای که در همه فرم‌ها جواب می‌دهد:

  1. یک ویجت متن با مقدار {{sys.wordpress.lastError}} بسازید.
  2. آن را با شرط مقدار متغیر و مقایسه «خالی نبودن» نمایش دهید.
  3. رنگ آن را قرمز و اندازه‌اش را کوچک بگذارید.

با این کار، پیام‌های واقعی سرور مانند «رمز عبور اشتباه است» یا «این ایمیل قبلاً ثبت شده» به کاربر نمایش داده می‌شود.

اشتباه‌های رایج​

  • استفاده از گزینه «نیاز به ورود» صفحه برای محافظت از صفحه‌های وردپرسی؛ آن گزینه حساب اپ‌ادیتور را بررسی می‌کند.
  • گذاشتن مقدار به‌جای نام متغیر در فیلدهای عملکرد.
  • فراموش کردن ذخیره «شناسه درخواست» بین دو مرحله ورود موبایلی.
  • روشن نکردن «اجازه ثبت‌نام از اپ» در تنظیمات افزونه و تعجب از خطای دسترسی.
  • روشن نکردن عضویت عمومی وردپرس یا بررسی نکردن تحویل ایمیل تأیید.
  • انتظار اینکه ورود به حساب وردپرس، کاربر را به حساب اپ‌ادیتور هم وارد کند.

مطالب مرتبط​