ਸਮੱਗਰੀ ’ਤੇ ਜਾਓ
ਦਸਤਾਵੇਜ਼ · ਤੁਹਾਡੇ ਆਪਣੇ ਪੰਨੇ ’ਤੇ ਸਾਈਨ-ਇਨ

ਆਪਣੇ ਪੰਨੇ ’ਤੇ ਸਾਈਨ-ਇਨ

ਜ਼ਿਆਦਾਤਰ ਐਪ ਲੋਕਾਂ ਨੂੰ ਸਾਈਨ ਇਨ ਕਰਨ ਲਈ ਉਹਨਾਂ ਦੇ ਐਨਵਾਇਰਨਮੈਂਟ ਦੀ ਲਾਬੀ ’ਤੇ ਭੇਜਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਹੀ ਪੰਨੇ ’ਤੇ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ @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" />
}

ਇਹ ਉਸ UsherProvider ਦੇ ਅੰਦਰ ਰਹਿੰਦਾ ਹੈ ਜੋ @usher/nextjs ਪਹਿਲਾਂ ਹੀ ਵਰਤਦਾ ਹੈ। frontendApi ਤੁਹਾਡੇ ਐਨਵਾਇਰਨਮੈਂਟ ਦਾ ਇਸ਼ੂਅਰ ਹੈ।

ਕੀ ਹੁੰਦਾ ਹੈ

  • ਪਹਿਲਾਂ ਈਮੇਲ, ਫਿਰ ਪਾਸਵਰਡ ਜਾਂ ਈਮੇਲ ਰਾਹੀਂ ਭੇਜਿਆ ਕੋਡ, ਫਿਰ ਦੂਜਾ ਕਦਮ ਜੇ ਵਿਅਕਤੀ ਨੇ ਲਗਾਇਆ ਹੋਵੇ। ਸੋਸ਼ਲ ਸਾਈਨ-ਇਨ ਅਤੇ Usher ਨਾਲ ਜਾਰੀ ਰੱਖੋ ਪ੍ਰਦਾਤਾ ਕੋਲ ਜਾਂਦੇ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਐਪ ’ਤੇ ਵਾਪਸ ਆਉਂਦੇ ਹਨ।
  • ਫਿਰ OpenID Connect। ਤੁਹਾਡੇ ਐਨਵਾਇਰਨਮੈਂਟ ਵਿੱਚ ਸਾਈਨ ਇਨ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਕੰਪੋਨੈਂਟ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਐਪ ਦੇ /auth/sign-in ’ਤੇ ਭੇਜਦਾ ਹੈ, ਜੋ ਸਿੱਧਾ Usher ਵਿੱਚੋਂ ਲੰਘ ਕੇ ਇੱਕ ਕੋਡ ਨਾਲ ਵਾਪਸ ਆਉਂਦਾ ਹੈ। ਪਹਿਲੀ ਵਾਰ, Usher ਵਿਅਕਤੀ ਨੂੰ ਤੁਹਾਡੇ ਐਪ ਨੂੰ ਇਜਾਜ਼ਤ ਦੇਣ ਲਈ ਕਹਿੰਦਾ ਹੈ।
  • ਬੌਟ ਤੋਂ ਸੁਰੱਖਿਆ ਲਾਬੀ ਵਾਂਗ ਹੀ ਕੰਮ ਕਰਦੀ ਹੈ: ਜਦੋਂ Usher ਕੰਮ ਦਾ ਸਬੂਤ (proof of work) ਮੰਗਦਾ ਹੈ, ਕੰਪੋਨੈਂਟ ਉਹ ਕਰ ਦਿੰਦਾ ਹੈ।
  • ਬਾਕੀ ਸਭ ਕੁਝ (ਪਾਸਕੀਆਂ, ਐਂਟਰਪ੍ਰਾਈਜ਼ ਸਾਈਨ-ਇਨ, ਖਾਤਾ ਬਣਾਉਣਾ) ਤੁਹਾਡੀ ਲਾਬੀ ਦਾ ਇੱਕ ਲਿੰਕ ਹੈ।

ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਆਪਣਾ ਡੋਮੇਨ ਵਰਤੋ

ਕੰਪੋਨੈਂਟ Usher ਦਾ ਸੈਸ਼ਨ ਤੁਹਾਡੇ ਐਨਵਾਇਰਨਮੈਂਟ ਦੀਆਂ ਕੁਕੀਜ਼ ਵਿੱਚ ਰੱਖਦਾ ਹੈ। ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਉਹ first-party ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ: ਐਨਵਾਇਰਨਮੈਂਟ ਨੂੰ ਆਪਣਾ ਡੋਮੇਨ ਦਿਓ, ਜੋ ਤੁਹਾਡੇ ਐਪ ਵਾਲੀ ਹੀ ਸਾਈਟ ’ਤੇ ਹੋਵੇ (app.example.com ਲਈ login.example.com)। ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ, ਜਿਸ ਐਨਵਾਇਰਨਮੈਂਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਹੈ, ਉਹ ਆਪਣੀਆਂ ਕੁਕੀਜ਼ ਸਾਈਟਾਂ ਦੇ ਪਾਰ ਭੇਜਦਾ ਹੈ, ਜਿਨ੍ਹਾਂ ਨੂੰ Chrome ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ। ਜਿੱਥੇ ਕੋਈ ਬ੍ਰਾਊਜ਼ਰ ਉਹਨਾਂ ਨੂੰ ਨਹੀਂ ਰੱਖਦਾ, ਉੱਥੇ ਕੰਪੋਨੈਂਟ ਇਸਦੀ ਬਜਾਏ ਤੁਹਾਡੀ ਲਾਬੀ ਨੂੰ ਕੰਮ ਸੌਂਪ ਦਿੰਦਾ ਹੈ।