تسجيل الدخول على صفحتك

ترسل معظم التطبيقات الأشخاص إلى Lobby الخاص ببيئتها لتسجيل الدخول. وإذا كنت تفضّل إبقاءهم على صفحتك، فإن <SignIn /> من @usher/react يسجّل دخولهم في مكانهم، ثم يُكمل باستخدام OpenID Connect تمامًا كما في السابق: يظل خادمك يحصل على رموزه المميزة من Usher، ولا تمر أي كلمة سر أو رمز مميز عبر صفحتك.

اسمح بمصدر تطبيقك

في Usher Console، افتح البيئة، ثم تسجيل الدخول ← تسجيل الدخول المضمَّن، وأضف مصدر تطبيقك (origin)، مثل https://app.example.com. لا يمكن إلا للمصادر المدرجة استخدام Frontend API الخاص بالبيئة، ولتسجيل الدخول فقط.

أضف المكوّن

TSX

import { SignIn } from '@usher/react'

export function SignInPage() {
  return <SignIn frontendApi="https://login.example.com" returnTo="/dashboard" />
}

يوضع المكوّن داخل UsherProvider الذي تستخدمه @usher/nextjs بالفعل. أما frontendApi فهو جهة إصدار بيئتك.

ما الذي يحدث

البريد الإلكتروني أولًا، ثم كلمة سر أو رمز عبر البريد الإلكتروني، ثم الخطوة الثانية إن كانت لدى الشخص. أما تسجيل الدخول بالحسابات الاجتماعية و«المتابعة باستخدام Usher» فينتقلان إلى المزوّد ثم يعودان إلى تطبيقك.
ثم OpenID Connect. بعد تسجيل الدخول في بيئتك، يرسل المكوّن المتصفح إلى /auth/sign-in في تطبيقك، الذي يمر مباشرةً عبر Usher ويعود برمز. وفي المرة الأولى، يطلب Usher من الشخص السماح لتطبيقك.
الحماية من الروبوتات تعمل كما في Lobby: عندما يطلب Usher إثبات عمل (proof of work)، ينجزه المكوّن.
أي شيء آخر (مفاتيح المرور، وتسجيل الدخول المؤسسي، وإنشاء حساب) يكون رابطًا إلى Lobby الخاص بك.

استخدم نطاقك الخاص في بيئة الإنتاج

يحتفظ المكوّن بجلسة Usher في ملفات تعريف الارتباط لبيئتك. وفي بيئة الإنتاج يجب أن تكون هذه الملفات من الطرف الأول: امنح البيئة نطاقك الخاص، على الموقع نفسه الذي عليه تطبيقك (login.example.com لـ app.example.com). وفي بيئة التطوير، ترسل البيئة التي تسمح بالتضمين ملفات تعريف الارتباط الخاصة بها عبر المواقع، وهو ما يقبله Chrome. وحيث لا يحتفظ المتصفح بها، يحيل المكوّن الأمر إلى Lobby الخاص بك بدلًا من ذلك.