ଆପଣଙ୍କ ନିଜ ପୃଷ୍ଠାରେ ସାଇନ-ଇନ

ଅଧିକାଂଶ ଆପ ସାଇନ ଇନ ପାଇଁ ଲୋକଙ୍କୁ ସେମାନଙ୍କ ଏନଭାଇରନମେଣ୍ଟର ଲବିକୁ ପଠାନ୍ତି। ଯଦି ଆପଣ ସେମାନଙ୍କୁ ନିଜ ପୃଷ୍ଠାରେ ରଖିବାକୁ ଚାହାଁନ୍ତି, @usher/reactର <SignIn /> ସେମାନଙ୍କୁ ସେଠାରେ ହିଁ ସାଇନ ଇନ କରାଏ, ତାପରେ ଠିକ୍ ପୂର୍ବ ଭଳି OpenID Connect ଦ୍ୱାରା ଶେଷ କରେ: ଆପଣଙ୍କ ସର୍ଭର ଏବେ ବି Usherରୁ ଟୋକେନ ପାଏ, ଏବଂ କୌଣସି ପାସୱାର୍ଡ କିମ୍ବା ଟୋକେନ ଆପଣଙ୍କ ପୃଷ୍ଠା ଦେଇ ଯାଏ ନାହିଁ।

ଆପଣଙ୍କ ଆପର origin ଅନୁମତି ଦିଅନ୍ତୁ

Usher Consoleରେ ଏନଭାଇରନମେଣ୍ଟ ଖୋଲନ୍ତୁ, ତାପରେ ସାଇନ-ଇନ → ଏମ୍ବେଡେଡ ସାଇନ-ଇନ, ଏବଂ ଆପଣଙ୍କ ଆପର origin ଯୋଡ଼ନ୍ତୁ, ଯେପରି https://app.example.com। କେବଳ ତାଲିକାରେ ଥିବା origin ଏନଭାଇରନମେଣ୍ଟର Frontend API ବ୍ୟବହାର କରିପାରେ, ଏବଂ କେବଳ ସାଇନ ଇନ ପାଇଁ।

କମ୍ପୋନେଣ୍ଟ ଯୋଡ଼ନ୍ତୁ

TSX

import { SignIn } from '@usher/react'

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

ଏହା @usher/nextjs ପୂର୍ବରୁ ବ୍ୟବହାର କରୁଥିବା UsherProvider ଭିତରେ ରହେ। frontendApi ହେଉଛି ଆପଣଙ୍କ ଏନଭାଇରନମେଣ୍ଟର ଇସୁଅର।

କ’ଣ ହୁଏ

ପ୍ରଥମେ ଇମେଲ, ତାପରେ ପାସୱାର୍ଡ କିମ୍ବା ଇମେଲରେ ପଠାଯାଇଥିବା କୋଡ, ତାପରେ ବ୍ୟକ୍ତିଙ୍କର ଦ୍ୱିତୀୟ ପଦକ୍ଷେପ ଥିଲେ ତାହା। ସୋସିଆଲ ସାଇନ-ଇନ ଓ Continue with Usher ପ୍ରୋଭାଇଡରକୁ ଯାଇ ଆପଣଙ୍କ ଆପକୁ ଫେରିଆସେ।
ତାପରେ OpenID Connect। ଆପଣଙ୍କ ଏନଭାଇରନମେଣ୍ଟରେ ସାଇନ ଇନ ହେବା ପରେ, କମ୍ପୋନେଣ୍ଟଟି ବ୍ରାଉଜରକୁ ଆପଣଙ୍କ ଆପର /auth/sign-inକୁ ପଠାଏ, ଯାହା ସିଧା Usher ଦେଇ ଏକ କୋଡ ସହ ଫେରିଆସେ। ପ୍ରଥମ ଥର, Usher ବ୍ୟକ୍ତିଙ୍କୁ ଆପଣଙ୍କ ଆପକୁ ଅନୁମତି ଦେବାକୁ ପଚାରେ।
ବଟ ସୁରକ୍ଷା ଲବି ଭଳି କାମ କରେ: Usher ପ୍ରୁଫ ଅଫ ୱର୍କ ମାଗିଲେ, କମ୍ପୋନେଣ୍ଟଟି ତାହା କରେ।
ଅନ୍ୟ ସବୁକିଛି (ପାସକୀ, ଏଣ୍ଟରପ୍ରାଇଜ ସାଇନ-ଇନ, ଆକାଉଣ୍ଟ ତିଆରି) ଆପଣଙ୍କ ଲବିକୁ ଏକ ଲିଙ୍କ।

ପ୍ରୋଡକ୍ସନରେ ନିଜ ଡୋମେନ ବ୍ୟବହାର କରନ୍ତୁ

କମ୍ପୋନେଣ୍ଟଟି Usherର ସେସନ ଆପଣଙ୍କ ଏନଭାଇରନମେଣ୍ଟର କୁକିରେ ରଖେ। ପ୍ରୋଡକ୍ସନରେ ସେଗୁଡ଼ିକ first-party ହେବା ଦରକାର: ଏନଭାଇରନମେଣ୍ଟକୁ ଆପଣଙ୍କ ନିଜ ଡୋମେନ ଦିଅନ୍ତୁ, ଆପଣଙ୍କ ଆପ ସହ ସମାନ ସାଇଟରେ (app.example.com ପାଇଁ login.example.com)। ଡେଭେଲପମେଣ୍ଟରେ, ଏମ୍ବେଡିଂ ଅନୁମତି ଦେଉଥିବା ଏନଭାଇରନମେଣ୍ଟ ତା’ର କୁକି ସାଇଟ ପାର କରି ପଠାଏ, ଯାହା Chrome ଗ୍ରହଣ କରେ। ଯେଉଁଠି ବ୍ରାଉଜର ସେଗୁଡ଼ିକ ରଖେ ନାହିଁ, ସେଠାରେ କମ୍ପୋନେଣ୍ଟଟି ଏହା ବଦଳରେ ଆପଣଙ୍କ ଲବିକୁ ଦାୟିତ୍ୱ ଦେଇଦିଏ।