ನಿಮ್ಮದೇ ಪುಟದಲ್ಲಿ ಸೈನ್-ಇನ್

ಹೆಚ್ಚಿನ ಆ್ಯಪ್‌ಗಳು ಸೈನ್ ಇನ್ ಮಾಡಲು ಜನರನ್ನು ತಮ್ಮ ಎನ್ವಿರಾನ್‌ಮೆಂಟ್‌ನ ಲಾಬಿಗೆ ಕಳುಹಿಸುತ್ತವೆ. ನೀವು ಅವರನ್ನು ನಿಮ್ಮದೇ ಪುಟದಲ್ಲಿ ಇರಿಸಿಕೊಳ್ಳಲು ಬಯಸಿದರೆ, @usher/react ನಿಂದ <SignIn /> ಅವರನ್ನು ಅಲ್ಲೇ ಸೈನ್ ಇನ್ ಮಾಡಿಸುತ್ತದೆ, ನಂತರ ಮೊದಲಿನಂತೆಯೇ OpenID Connect ಮೂಲಕ ಮುಗಿಸುತ್ತದೆ: ನಿಮ್ಮ ಸರ್ವರ್ ಈಗಲೂ ತನ್ನ ಟೋಕನ್‌ಗಳನ್ನು Usher ನಿಂದಲೇ ಪಡೆಯುತ್ತದೆ, ಮತ್ತು ಯಾವ ಪಾಸ್‌ವರ್ಡ್ ಅಥವಾ ಟೋಕನ್ ಕೂಡ ನಿಮ್ಮ ಪುಟದ ಮೂಲಕ ಹಾದುಹೋಗುವುದಿಲ್ಲ.

ನಿಮ್ಮ ಆ್ಯಪ್‌ನ ಮೂಲವನ್ನು (origin) ಅನುಮತಿಸಿ

Usher Console ನಲ್ಲಿ ಎನ್ವಿರಾನ್‌ಮೆಂಟ್ ತೆರೆಯಿರಿ, ನಂತರ ಸೈನ್-ಇನ್ → ಎಂಬೆಡ್ ಮಾಡಿದ ಸೈನ್-ಇನ್, ಮತ್ತು https://app.example.com ನಂತಹ ನಿಮ್ಮ ಆ್ಯಪ್‌ನ ಮೂಲವನ್ನು ಸೇರಿಸಿ. ಪಟ್ಟಿಯಲ್ಲಿರುವ ಮೂಲಗಳು ಮಾತ್ರ ಎನ್ವಿರಾನ್‌ಮೆಂಟ್‌ನ Frontend API ಬಳಸಬಹುದು, ಅದೂ ಸೈನ್ ಇನ್ ಮಾಡಲು ಮಾತ್ರ.

ಕಾಂಪೊನೆಂಟ್ ಸೇರಿಸಿ

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 ಸ್ವೀಕರಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಅವುಗಳನ್ನು ಇಟ್ಟುಕೊಳ್ಳದಿದ್ದಲ್ಲಿ, ಕಾಂಪೊನೆಂಟ್ ಬದಲಿಗೆ ನಿಮ್ಮ ಲಾಬಿಗೆ ಹಸ್ತಾಂತರಿಸುತ್ತದೆ.