Passer au contenu principal
Example
import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();

Constructeurs

LoginId
Constructor
Crée une instance de la classe LoginIdManager.

Propriétés

branding
client
organization
prompt
screen
tenant
transaction
untrustedData
user
screenIdentifier
string

Méthodes

federatedLogin
Promise<void>
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

// Vérifiez si alternateConnections est disponible et contient au moins un élément
if (!loginIdManager.transaction.alternateConnections) {
  console.error('No alternate connections available.');
}

// Sélectionnez la première connexion disponible (les utilisateurs peuvent sélectionner n'importe quelle connexion disponible)
const selectedConnection = alternateConnections[0];

// Consignez la connexion choisie à des fins de débogage ou d'information
console.log(`Selected connection: ${selectedConnection.name}`);

// Procédez à la connexion fédérée en utilisant la connexion sélectionnée
loginIdManager.federatedLogin({
  connection: selectedConnection.name,
});
getErrors
Renvoie le tableau des erreurs de transaction à partir du contexte, ou un tableau vide s’il n’en existe aucune.
getLoginIdentifiers
Fonction utilitaireRenvoie les types d’identifiants actifs pour l’écran de connexion.
Example
import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();
login
Promise<void>
Example
import LoginId from "@auth0/auth0-acul-js/login-id";

const loginIdManager = new LoginId();

loginIdManager.login({
  username: <usernameFieldValue>
});
passkeyLogin
Promise<void>
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

// Cette méthode associe en interne la configuration de passkey disponible pour les utilisateurs, telle que fournie par le serveur Auth0
loginIdManager.passkeyLogin();
pickCountryCode
Promise<void>
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

loginIdManager.pickCountryCode();

Passkeys

registerPasskeyAutofill
Promise<void>
Utility FeatureEnregistre l’interface utilisateur conditionnelle du navigateur pour les passkeys (expérience de saisie semi-automatique).Cette méthode initialise une requête passive d’identifiants WebAuthn à l’aide de navigator.credentials.get() avec mediation: "conditional". Lorsque cette fonctionnalité est prise en charge, elle permet au navigateur d’afficher les passkeys enregistrés directement dans la liste de saisie semi-automatique du champ de nom d’utilisateur.Appelez cette méthode une seule fois lorsque l’écran de connexion est initialisé (par exemple, au chargement de la page). Après l’enregistrement, le fait de placer le curseur dans le champ de nom d’utilisateur affichera automatiquement les passkeys correspondants comme suggestions. La sélection d’un passkey finalise l’authentification sans nécessiter d’interaction supplémentaire de la part de l’utilisateur.

Configuration de l’élément input

Si un inputId est fourni, la Trousse de développement logiciel (SDK) va :
  • Valider que l’élément existe et qu’il s’agit d’un <input>.
  • Remplacer son attribut autocomplete par "webauthn username".
Cela garantit une compatibilité complète avec l’API Conditional Mediation. Si vous ne fournissez pas de inputId, vous êtes responsable de configurer l’élément d’entrée manuellement avec les attributs appropriés :
<input id="username" autocomplete="webauthn username" />

Pièges à éviter

  • L’attribut autocomplete doit contenir exactement "webauthn username". L’ajout de jetons non liés comme "email" ou "text" empêchera les navigateurs d’afficher la liste déroulante de passkeys.
  • Le fait d’écraser l’attribut est intentionnel et nécessaire pour assurer un comportement cohérent d’un navigateur à l’autre. Ne comptez pas sur la fusion ou l’extension des valeurs autocomplete existantes.
  • Si la médiation conditionnelle n’est pas prise en charge par le navigateur, le SDK se contentera de ne rien faire (no-op) en toute sécurité.

Paramètres

inputId?
string
stringID facultatif de l’élément <input> pour le nom d’utilisateur (sans #). Exemple : "username". S’il est omis, le développeur doit veiller manuellement à ce que les attributs autocomplete soient corrects.
Example
import LoginId from '@auth0/auth0-acul-js/login-id';

// Exemple : initialisation de la saisie automatique de clé d'accès dans un bloc de configuration asynchrone.
async function initializeLogin() {
  const loginId = new LoginId();
  // Assurez-vous que l'élément input HTML associé existe :
  // <input id="username" autocomplete="webauthn username" />
  // Enregistrement conditionnel de l'IU.
  await loginId.registerPasskeyAutofill('username');
}

initializeLogin().catch(console.error);

Remarques

Cette méthode délègue à l’utilitaire interne registerPasskeyAutofill(), qui renvoie en arrière-plan un AbortController pour gérer la durée de vie de la requête. Elle ne doit être appelée qu’une seule fois par cycle de vie de la page.