Σύνδεση στη δική σας σελίδα

Οι περισσότερες εφαρμογές στέλνουν τους χρήστες στο Lobby του περιβάλλοντός τους για να συνδεθούν. Αν προτιμάτε να τους κρατήσετε στη δική σας σελίδα, το <SignIn /> από το @usher/react τους συνδέει εκεί ακριβώς και ολοκληρώνει με 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 είναι ο εκδότης του περιβάλλοντός σας.

Τι συμβαίνει

Πρώτα το email, έπειτα ένα συνθηματικό ή ένας κωδικός μέσω email, και έπειτα το δεύτερο βήμα αν ο χρήστης έχει. Η σύνδεση μέσω κοινωνικών δικτύων και το Συνέχεια με Usher πηγαίνουν στον πάροχο και επιστρέφουν στην εφαρμογή σας.
Έπειτα OpenID Connect. Μόλις ο χρήστης συνδεθεί στο περιβάλλον σας, το στοιχείο στέλνει το πρόγραμμα περιήγησης στο /auth/sign-in της εφαρμογής σας, που περνά κατευθείαν από το Usher και επιστρέφει με έναν κωδικό. Την πρώτη φορά, το Usher ζητά από τον χρήστη να επιτρέψει την εφαρμογή σας.
Η προστασία από bot λειτουργεί όπως στο Lobby: όταν το Usher ζητά απόδειξη εργασίας, το στοιχείο την παρέχει.
Οτιδήποτε άλλο (κλειδιά πρόσβασης, εταιρική σύνδεση, δημιουργία λογαριασμού) είναι σύνδεσμος προς το Lobby σας.

Χρησιμοποιήστε τον δικό σας τομέα στην παραγωγή

Το στοιχείο κρατά την περίοδο σύνδεσης του Usher στα cookie του περιβάλλοντός σας. Στην παραγωγή αυτά πρέπει να είναι πρώτου μέρους: δώστε στο περιβάλλον τον δικό σας τομέα, στον ίδιο ιστότοπο με την εφαρμογή σας (login.example.com για το app.example.com). Στην ανάπτυξη, ένα περιβάλλον που επιτρέπει την ενσωμάτωση στέλνει τα cookie του μεταξύ ιστοτόπων, κάτι που δέχεται το Chrome. Όπου ένα πρόγραμμα περιήγησης δεν τα κρατά, το στοιχείο παραδίδει αντ’ αυτού στο Lobby σας.