اپنے صفحے پر سائن ان

زیادہ تر ایپس سائن ان کے لیے لوگوں کو ان کے انوائرنمنٹ کی لابی میں بھیجتی ہیں۔ اگر آپ انہیں اپنے ہی صفحے پر رکھنا چاہیں، تو @usher/react کا <SignIn /> انہیں وہیں سائن ان کراتا ہے، پھر بالکل پہلے کی طرح OpenID Connect سے مکمل کرتا ہے: آپ کے سرور کو ٹوکن اب بھی Usher سے ملتے ہیں، اور کوئی پاس ورڈ یا ٹوکن آپ کے صفحے سے نہیں گزرتا۔

اپنی ایپ کے اوریجن کی اجازت دیں

Usher Console میں انوائرنمنٹ کھولیں، پھر سائن ان ← ایمبیڈڈ سائن ان، اور اپنی ایپ کا اوریجن شامل کریں، جیسے 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 فرد سے آپ کی ایپ کو اجازت دینے کو کہتا ہے۔
بوٹس سے تحفظ لابی کی طرح کام کرتا ہے: جب Usher پروف آف ورک مانگتا ہے، تو کمپوننٹ اسے پورا کر دیتا ہے۔
باقی سب کچھ (پاس کیز، انٹرپرائز سائن ان، اکاؤنٹ بنانا) آپ کی لابی کا ایک لنک ہے۔

پروڈکشن میں اپنا ڈومین استعمال کریں

کمپوننٹ Usher کا سیشن آپ کے انوائرنمنٹ کی کوکیز میں رکھتا ہے۔ پروڈکشن میں یہ فرسٹ پارٹی ہونی چاہئیں: انوائرنمنٹ کو اپنا ڈومین دیں، اپنی ایپ والی سائٹ پر ہی (app.example.com کے لیے login.example.com)۔ ڈیولپمنٹ میں، جو انوائرنمنٹ ایمبیڈ کرنے کی اجازت دیتا ہے وہ اپنی کوکیز سائٹس کے پار بھیجتا ہے، جسے Chrome قبول کرتا ہے۔ جہاں کوئی براؤزر انہیں نہ رکھے، وہاں کمپوننٹ اس کے بجائے آپ کی لابی کے حوالے کر دیتا ہے۔