صفحهٔ ورود خودتان را بکشید

هدف

راه ورود به درگاه‌تان را شبیه باقی سایت کنید: صفحهٔ ورود، صفحهٔ ساخت حساب و صفحهٔ گذرواژه را فراموش کرده‌اید؟ که خودتان کشیده‌اید، و صفحهٔ اصلی و صفحهٔ قیمت‌ها برای هر کسی که هنوز وارد نشده باز بماند.

پیش از شروع

• درگاهی که چه کسی می‌تواند باز کند آن روی کسانی که وارد می‌شوند است. ببینید از بازدیدکنندگان بخواهید وارد شوند.
• کسی که نصب Parsware شما را اداره می‌کند ارسال ایمیل را راه انداخته باشد. ساخت حساب و بازنشانی گذرواژه هر دو ایمیل می‌فرستند.

۱. صفحه‌ها را بکشید

در برنامهٔ استودیوی درگاه‌تان سه صفحه بکشید. هر نامی خواستید بگذارید — این نام‌ها فقط نمونه‌اند:

صفحه	چه چیزی رویش است
Sign in	جعبهٔ ایمیل، جعبهٔ گذرواژه، جعبهٔ کد (پایین‌تر را ببینید)، دکمهٔ ورود
Create account	جعبهٔ نام، جعبهٔ ایمیل، جعبهٔ گذرواژه، دکمهٔ ساخت حساب
Forgot password	جعبهٔ ایمیل و دکمهٔ فرستادن پیوند

هر جعبه را انتخاب کنید و می‌پذیرد را تنظیم کنید: نشانی ایمیل برای نشانی و گذرواژه برای گذرواژه. جعبهٔ گذرواژه آنچه تایپ می‌شود را پنهان می‌کند و چشمی برای نشان‌دادنش دارد.

هر جعبه را، مثل هر فرم دیگری، به یک فیلد وضعیت ببندید — state.email، state.password.

۲. به هر دکمه کنترل‌کننده‌اش را بدهید

دکمه	کنترل‌کننده
ورود	signIn(getState("email"), getState("password"), getState("code"), "needsCode");
ساخت حساب	signUp(getState("name"), getState("email"), getState("password"), "sent");
فرستادن پیوند	requestPasswordReset(getState("email"), "sent");

گذرواژه به پلتفرم می‌رود، درست همان‌طور که از صفحهٔ ورودِ خودِ پلتفرم می‌رود. هرگز به چیزی از آنِ شما فرستاده نمی‌شود، و هیچ چیزی در صفحهٔ شما نشستی را که برمی‌گردد نمی‌تواند بخواند.

آخرین آرگومان نام یک فیلد وضعیت است، و صفحهٔ شما از همین راه می‌فهمد چه شد:

• signUp و requestPasswordReset وقتی ایمیل رفت آن را true می‌کنند. فرم را در یک پشته با Visible برابر !state.sent بگذارید، و پیام «ایمیلتان را ببینید» را در پشتهٔ دیگری با Visible برابر state.sent.
• signIn وقتی حساب ورود دومرحله‌ای را روشن کرده باشد آن را true می‌کند. به جعبهٔ کد Visible برابر state.needsCode بدهید: بازدیدکننده شش رقم را تایپ می‌کند و دوباره ورود را می‌زند.

چرا به صفحهٔ «ایمیلتان را ببینید» نرویم؟

خط بعدی یک کنترل‌کننده اجرا می‌شود چه فراخوانی موفق شده باشد چه نه، پس navigate(...) پس از signUp حتی وقتی نشانی رد شده هم به آن‌جا می‌رفت. نشان‌دادن پیام از روی فیلد وضعیت یعنی پیام فقط وقتی ظاهر می‌شود که ایمیل واقعاً رفته باشد.

اگر پلتفرم رد کند — گذرواژهٔ نادرست، نشانی‌ای که از پیش حساب دارد — دلیلش در یک پیام، به زبان خود بازدیدکننده، به او گفته می‌شود. برای این لازم نیست چیزی بکشید.

۳. به درگاه دربارهٔ آن‌ها بگویید

1. راه‌حل‌تان را باز کنید، درگاه‌ها را انتخاب کنید و درگاه را باز کنید.
2. در صفحهٔ ورود، صفحهٔ Sign in را انتخاب کنید.
3. در باز پیش از ورود، صفحه‌هایی را انتخاب کنید که هر کسی می‌تواند ببیند: صفحهٔ اصلی، صفحهٔ قیمت‌ها، Create account و Forgot password.
4. ذخیره را بزنید.

بازدیدکننده چه می‌بیند

کسی که وارد نشده هر صفحهٔ بازی را می‌تواند بخواند. اگر به صفحهٔ دیگری برود — با پیوند، نشانک یا دکمه — صفحهٔ Sign in شما را می‌بیند، در نشانی همان صفحه. وقتی وارد شد، همان نشانی همان صفحه‌ای می‌شود که خواسته بود.

پس پیوند حساب شما در نوار بالا برای همه کار می‌کند: به غریبه صفحهٔ ورود را نشان می‌دهد و به کسی که وارد شده حسابش را.

کسی که در خودِ صفحهٔ Sign in وارد شود به صفحهٔ آغازین درگاه می‌رود.

صفحه‌های پشت ورود برای غریبه‌ها فرستاده نمی‌شوند

صفحه‌ای که باز نیست در صفحه پنهان نشده — اصلاً برای کسی که وارد نشده فرستاده نمی‌شود. آنچه به‌جایش دریافت می‌کند صفحهٔ ورود شماست.

۴. صفحه‌ای را هم که پیوند بازنشانی باز می‌کند بکشید (اختیاری)

وقتی کسی پیوند بازنشانی گذرواژه می‌خواهد، پیوندِ ایمیل صفحه‌ای را باز می‌کند که در آن گذرواژهٔ تازه را انتخاب می‌کند. آن صفحه را هم می‌توانید بکشید.

1. صفحه‌ای بکشید — مثلاً New password — با دو جعبهٔ گذرواژه که به state.password و state.again بسته شده‌اند، و دکمهٔ ثبت گذرواژه با این کنترل‌کننده:

   if (getState("password") != getState("again")) {
     notifyError("The two passwords are different.");
   } else {
     resetPassword(getState("password"));
   }

2. در درگاه، آن را در صفحهٔ گذرواژهٔ تازه انتخاب کنید. این جعبه وقتی صفحهٔ ورود انتخاب شده باشد ظاهر می‌شود، چون بازدیدکننده پس از آن به صفحهٔ ورود می‌رود.

صفحهٔ شما فقط گذرواژه را می‌بیند. پیوند رمزی از ایمیل با خود دارد. پلتفرم پیش از آن‌که صفحهٔ شما ظاهر شود آن را از نشانی برمی‌دارد و وقتی دکمهٔ شما resetPassword را صدا می‌زند خودش آن را برمی‌گرداند. هیچ چیزی در صفحهٔ شما نمی‌تواند آن را بخواند.

وقتی گذرواژه ثبت شد، بازدیدکننده از همه‌جا خارج می‌شود، به صفحهٔ Sign in شما برده می‌شود و به او گفته می‌شود گذرواژه‌اش ثبت شد. اگر کسی New password را بی‌آن‌که از پیوندی آمده باشد باز کند، زدن دکمه به او می‌گوید پیوند ایمیلش را باز کند.

لازم نیست New password را به باز پیش از ورود اضافه کنید. کسی که پیوند بازنشانی دارد به‌هرحال وارد نشده، پس این صفحه همیشه به او نشان داده می‌شود.

۵. صفحه‌ای را هم که پیوند تأیید باز می‌کند بکشید (اختیاری)

پس از این‌که کسی حساب ساخت، پیوند ایمیل تأییدش صفحه‌ای را باز می‌کند که نشانی‌اش را تأیید می‌کند. آن صفحه را هم می‌توانید بکشید — نخستین صفحه‌ای است که یک مشتری تازه می‌بیند.

1. صفحه‌ای بکشید — مثلاً Address confirmed. چیزی برای تایپ‌کردن ندارد، پس به خودِ صفحه کنترل‌کنندهٔ بارگذاری‌ای بدهید که بی‌درنگ تأیید کند:

   confirmEmail("confirmed");

2. سطر «در حال بررسی پیوند…» را با Visible برابر !state.confirmed بگذارید، و پیام «نشانی شما تأیید شد» را با دکمهٔ ورود در پشته‌ای با Visible برابر state.confirmed.

3. در درگاه، آن را در صفحهٔ تأیید نشانی انتخاب کنید.

صفحهٔ شما هرگز رمزِ پیوند را نمی‌بیند، درست مثل صفحهٔ گذرواژهٔ تازه. و پیوند تأیید فقط یک بار کار می‌کند، پس صفحهٔ شما هر چند بار هم بخواهد، پلتفرم یک بار تأیید می‌کند و به درخواست‌های بعدی همان پاسخ را می‌دهد. اگر پیوند پیش‌تر به کار رفته یا منقضی شده باشد، در پیامی به بازدیدکننده گفته می‌شود.

صفحهٔ تأیید نشانی را خالی بگذارید تا صفحهٔ خودِ پلتفرم بماند؛ آن صفحه نشانی را تأیید می‌کند و بازدیدکننده را با پیامی به صفحهٔ Sign in شما برمی‌گرداند.

۶. نشانی‌ای که هنوز تأیید نشده، و گذرواژهٔ تازه (اختیاری)

کسی که نشانی‌اش را تأیید نکرده نمی‌تواند وارد شود و همین به او گفته می‌شود. به signIn آرگومان پنجمی بدهید — نام یک فیلد وضعیت — تا وقتی دلیل همین است true شود:

signIn(getState("email"), getState("password"), getState("code"), "needsCode", "unconfirmed");

وقتی این فیلد نام برده شود، پلتفرم برای این رد هیچ پیامی از خودش نشان نمی‌دهد — نقشهٔ شما همان پیام است، پس متن را هم مثل دکمه بکشید. بدون آن، مثل هر ردِ دیگری، در یک پیام به بازدیدکننده گفته می‌شود.

یک پشته با Visible برابر state.unconfirmed بکشید که دکمهٔ ارسال دوبارهٔ ایمیل تأیید را دارد:

resendConfirmation(getState("email"), "resent");

resendConfirmation فیلدی را که نام برده‌اید پس از درخواست true می‌کند و — مثل پیوند بازنشانی — می‌گوید «اگر حسابی در انتظار تأیید باشد»، چون پلتفرم نمی‌گوید هست یا نه. صفحهٔ Resend confirmation با یک جعبهٔ ایمیل و همین دکمه، که پیش از ورود باز است، به کار کسی می‌آید که هنوز ورود را امتحان نکرده.

بازدیدکنندهٔ واردشده می‌تواند گذرواژه‌اش را عوض کند، در صفحه‌ای پشت راه ورود: گذرواژهٔ فعلی، گذرواژهٔ تازه دو بار، و

changePassword(getState("current"), getState("password"));

اول دو گذرواژهٔ تازه را در کنترل‌کننده مقایسه کنید. در صورت موفقیت، بازدیدکننده از همه‌جا خارج می‌شود و درگاه او را با پیامی که می‌گوید گذرواژه ثبت شد به صفحهٔ ورود شما می‌برد.

بازدیدکنندهٔ واردشده می‌تواند نام و عکسش را هم عوض کند. در صفحهٔ حسابش:

changeName(getState("name"), "renamed");   // "renamed" پس از ذخیره true می‌شود
changePhoto();                             // انتخاب‌گر تصویر دستگاه را باز می‌کند
removePhoto();

changePhoto() انتخاب‌گر تصویرِ خود بازدیدکننده را باز می‌کند، تصویر را در مرورگر کوچک و ذخیره می‌کند؛ اگر انصراف دهد، اتفاقی نمی‌افتد. پس از آن user.name و user.photo در همهٔ صفحه‌ها تازه‌ها را نشان می‌دهند. جایی که user.photo خالی است، به‌جای تصویر خالی یک جانشین بکشید.

۷. یا به‌جای کشیدن، کیت ورود را بگذارید

راه‌حل نمونهٔ portal-sign-in-kit همهٔ صفحه‌های بالا را از پیش، به‌صورت مؤلفه، کشیده است: کارت ورود، کارت ساخت حساب، کارت حساب با نام و عکس، و ورود دومرحله‌ای. برنامه‌اش مؤلفه‌هایش را به اشتراک می‌گذارد، پس پس از وارد کردنش، هر برنامه‌ای در آن محیط — در هر راه‌حلی — آن‌ها را زیر مؤلفه‌ها ← از برنامه‌های دیگر پیدا می‌کند.

نمونه‌ای که این کارت‌ها را گذاشته، به وارد کردن کیت نیازی ندارد. هر کارت را خودش یک نسخه دارد و برای همین از پیش در طراح آن هست. کیت را وقتی وارد کنید که می‌خواهید کارت‌ها را در برنامهٔ خودتان بگذارید یا آن‌ها را در یک جا تغییر دهید.

کارتی را روی صفحه بگذارید و ویژگی‌هایش را به وضعیت صفحه‌تان وصل کنید — email به state.email، sent به state.sent. کارت آنچه تایپ می‌شود و پاسخ‌هایش را در همان فیلدها می‌نویسد. صفحه‌هایتان را همان‌طور نام‌گذاری کنید که کارت‌ها انتظار دارند (Sign in، Create account، Forgot password، Resend confirmation، New password، Address confirmed، Account، Change password، Sign-in security) تا پیوندهای میانشان کار کنند.

وقتی کیت تغییر کرد، برنامه‌تان را در طراح باز کنید: می‌گوید رونوشت‌هایش به‌روز شدند. ذخیره کنید تا درگاهتان تغییر را داشته باشد.

نمونه‌های portal-landing-page، portal-service-desk و portal-sign-in-and-accounts همه کیت را همین‌طور گذاشته‌اند.

چه کاری نمی‌کند

• عوض نمی‌کند چه کسی می‌تواند وارد شود. همان حساب، همان قواعد گذرواژه و همان ورود دومرحله‌ای صفحهٔ پلتفرم است.
• روی درگاهی که همه می‌توانند بازش کنند کار نمی‌کند. کسی برای ورود نیست، پس درگاه آن‌جا صفحهٔ ورود را نمی‌پذیرد.

امتحانش کنید

راه‌حل نمونهٔ portal-sign-in-kit و سپس portal-landing-page را وارد کنید. صفحهٔ فرود کل راه ورود و صفحهٔ حسابی پشت آن را، گذاشته از کیت، دارد و صفحهٔ How this sample works که قدم‌به‌قدم توضیحش می‌دهد.

مرتبط

• از بازدیدکنندگان بخواهید وارد شوند
• بگذارید بازدیدکنندگان ورود دومرحله‌ای را روشن کنند
• یک برنامه را به‌عنوان درگاه منتشر کنید