আপনার নিজের পৃষ্ঠায় সাইন-ইন

বেশিরভাগ অ্যাপ সাইন ইন করার জন্য মানুষকে তাঁদের এনভায়রনমেন্টের লবিতে পাঠায়। আপনি যদি তাঁদের নিজের পৃষ্ঠাতেই রাখতে চান, @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 গ্রহণ করে। কোনো ব্রাউজার সেগুলি না রাখলে, কম্পোনেন্টটি এর বদলে আপনার লবিতে পাঠিয়ে দেয়।