Amedia a doublé le nombre d'inscriptions avec des clés d'accès grâce à WebOTP

Henning Haaland Kulander
Henning Haaland Kulander
Yu Tsuno
Yu Tsuno

Publié le 30 juin 2026

Logo Amedia

Amedia est le plus grand éditeur de médias éditoriaux locaux en Norvège. Il gère plus de 100 titres de journaux et touche plus de deux millions de lecteurs par jour. Pour offrir une expérience unifiée et fluide, Amedia utilise aID, sa solution d'identité numérique interne. Ce système de compte fédéré basé sur des normes permet non seulement aux utilisateurs d'accéder à l'ensemble du réseau d'Amedia, mais il a également été adopté par d'autres journaux norvégiens et danois.

Le défi : introduire les clés d'accès auprès d'une base d'utilisateurs diversifiée

Pour Amedia, le processus de connexion est la porte d'entrée de son contenu. Chaque seconde de friction affecte directement le nombre de lecteurs. Alors que les mots de passe classiques et l'authentification à deux facteurs (2FA) par SMS sont notoirement maladroits pour les utilisateurs en déplacement, le passage direct aux clés d’accès a introduit un obstacle inattendu : le manque de familiarité.

Comme aID est souvent la toute première expérience d'un utilisateur avec une clé d'accès, le fait de forcer un changement abrupt vers une invite biométrique inconnue a provoqué une certaine hésitation. Amedia s'est rendu compte qu'il ne pouvait pas se contenter de déployer la technologie : il devait aider les utilisateurs à comprendre comment utiliser les clés d'accès.

La solution : un flux combiné WebOTP et clé d'accès

Au lieu de forcer les utilisateurs à choisir entre une ancienne habitude (SMS) et un concept complètement étranger (clés d'accès), Amedia les a combinés en une seule expérience d'intégration fluide. L'entreprise a utilisé l'API WebOTP pour simplifier le processus de validation par SMS, tout en configurant discrètement l'infrastructure pour les connexions sans mot de passe en backend.

1. Inscription sans friction sur toutes les plates-formes

Lorsqu'un utilisateur s'inscrit à aID, il saisit son nom, son numéro de téléphone et son adresse e-mail. Amedia envoie ensuite un mot de passe à usage unique (OTP) par SMS. Amedia s'appuie spécifiquement sur l'OTP par SMS plutôt que par e-mail, car il est rare d'avoir plus d'un numéro de téléphone en Scandinavie, et les numéros sont transférés de manière transparente lors du changement de fournisseur de services mobiles. Cette stabilité fait des numéros de téléphone un identifiant principal fiable pour les connexions et un point de données cohérent pour la création de profils utilisateur étendus. Au lieu de forcer l'utilisateur à quitter le navigateur, à ouvrir son application de messagerie, à mémoriser le code et à le saisir, Amedia utilise l'API WebOTP. Sur les navigateurs mobiles compatibles, cela déclenche une invite de bottom sheet qui permet à l'utilisateur d'appuyer simplement sur Valider. Le navigateur récupère automatiquement l'OTP à partir du SMS et envoie le formulaire.

Flux de validation WebOTP

De plus, Amedia a mis à jour la diffusion de ses SMS pour utiliser le format de message standardisé lié à l'origine (par exemple, @www.aid.no #123456) , ce qui permet des connexions sans friction dans l'écosystème plus large. Cette norme alimente non seulement l'API WebOTP sur les navigateurs tels que Chrome, Opera et Vivaldi sur Android et ordinateur, mais elle active également de manière transparente la fonctionnalité autocomplete="one-time-code" de Safari. Par conséquent, les utilisateurs sur les plates-formes mobiles et de bureau bénéficient d'un flux OTP sécurisé et automatisé sans nécessiter de logique de backend spécifique à la plate-forme. Pour en savoir plus, consultez les bonnes pratiques concernant les formulaires OTP par SMS par SMS.

// Detect feature support using OTPCredential availability
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;

    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', (e) => {
         ac.abort();
      });
    }

    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: ac.signal
    }).then(otp => {
      // Automatically fill the input and submit the form
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error('WebOTP error:', err);
    });
  });
}

2. Enregistrement immédiat des clés d'accès

Auparavant, une fois la validation WebOTP terminée, Amedia proposait à l'utilisateur de créer un mot de passe classique ou de configurer une clé d'accès. Comme prévu, face à un terme technique inconnu, la plupart des utilisateurs ont opté pour la solution la plus simple : soit ils ont ignoré l'étape, soit ils ont utilisé un mot de passe standard.

À la mi-février, l'équipe Amedia a changé d'approche. Elle a intégré l'invite d'enregistrement de la clé d'accès immédiatement dans le flux post-validation, avant même de présenter des choix. Pour se conformer aux exigences strictes concernant les gestes de l'utilisateur sur les navigateurs tels que Chrome et Safari, Amedia a enchaîné l'interaction de manière transparente. Comme l'utilisateur confirme d'abord l'OTP, ce premier appui sert de geste de l'utilisateur requis pour appeler directement l'invite navigator.credentials.create(). En faisant des clés d'accès l'expérience par défaut plutôt qu'un paramètre facultatif, Amedia a immédiatement doublé son taux d'enregistrement réussi.

Bien que cette invite immédiate se soit avérée très efficace, l'équipe a tenté de simplifier encore davantage l'expérience à l'aide de la "création conditionnelle", un mécanisme qui génère une clé d'accès entièrement en arrière-plan sans nécessiter d'action directe de l'utilisateur. Cependant, elle a rencontré un obstacle technique : la création conditionnelle nécessite une connexion préalable à l'aide d'un mot de passe valide enregistré dans un gestionnaire de mots de passe. Comme le flux WebOTP d'Amedia est entièrement sans mot de passe, il ne répond pas à ce critère de sécurité. Pour contourner cette contrainte, Amedia réserve désormais la création conditionnelle uniquement aux flux de connexion à deux facteurs classiques (mot de passe et code OTP), tout en utilisant le geste de l'utilisateur enchaîné pour le processus d'intégration sans mot de passe.

Invite d'enregistrement de clé d'accès

Pour garantir une expérience fiable, le système utilise un flux d'enregistrement standard. Cela déclenche une boîte de dialogue de l'interface utilisateur du navigateur dans laquelle le système invite de manière sécurisée l'interface utilisateur d'enregistrement des clés d'accès du navigateur. L'utilisateur crée une clé d'accès à l'aide du verrouillage de l'écran de son appareil (biométrie ou code). En enchaînant cette opération juste après WebOTP, l'utilisateur termine la configuration sans jamais avoir à trouver de mot de passe.

// Triggered immediately after successful WebOTP verification
async function registerPasskey(creationOptionsFromServer) {
  try {
    const credential = await navigator.credentials.create({
      publicKey: {
        ...creationOptionsFromServer,
        authenticatorSelection: {
          residentKey: "required",
          userVerification: "required"
        }
      }
    });

    // Send the new credential to the server for registration
    await sendCredentialToServer(credential);
  } catch (error) {
    console.error("Passkey registration failed", error);
  }
}

3. Connexions ultérieures rapides

Lors de la prochaine visite de l'utilisateur sur une publication Amedia sur le même appareil, aID déclenche automatiquement une connexion par clé d'accès. Si l'utilisateur interagit avec la page avant l'affichage de l'invite automatique ou si l'invite automatique est ignorée, le système utilise de manière élégante le remplissage automatique du formulaire de clé d'accès.

Le processus de connexion est ainsi rapide, car l'utilisateur n'a besoin d'interagir qu'avec l'invite du navigateur/OS ou les suggestions de remplissage automatique de son clavier pour sélectionner sa clé d'accès, en contournant complètement la saisie manuelle du formulaire.

// Triggering conditional UI for autofill suggestions
async function authenticateWithPasskey(requestOptionsFromServer) {
  try {
    const credential = await navigator.credentials.get({
      publicKey: requestOptionsFromServer,
      mediation: "conditional" // Enables autofill integration
    });

    // Authenticate the user on the server
    await verifyAssertionWithServer(credential);
  } catch (error) {
    console.error("Passkey authentication failed", error);
  }
}

L'impact : enchaînement pour une adoption sans friction

En innovant dans le flux d'intégration, Amedia a considérablement réduit les frictions pour les nouveaux lecteurs et ceux qui reviennent. La combinaison de WebOTP et de clés d'accès a permis d'améliorer clairement les opérations et l'expérience :

  • Inscriptions beaucoup plus rapides : le temps global nécessaire à la création d'un nouveau compte aID a considérablement diminué grâce à la saisie automatisée de WebOTP et à la suppression complète de la création manuelle de mots de passe.
  • 48% des nouveaux utilisateurs créent des clés d'accès : en invitant à créer une clé d'accès immédiatement après la validation WebOTP, Amedia a atteint un taux de conversion exceptionnellement élevé pour l'enregistrement des clés d'accès, ce qui représente une augmentation de 100% par rapport à son flux d'intégration précédent basé sur le choix.
  • Connexion 82% plus rapide : les utilisateurs qui reviennent s'authentifient plus de cinq fois plus rapidement à l'aide de clés d'accès que par d'autres méthodes telles que les mots de passe ou la saisie manuelle d'OTP.
Métrique Valeur
Taux de création de clés d'accès pour les nouveaux utilisateurs 48%
Connexion plus rapide pour les utilisateurs qui reviennent 82%
Augmentation de l'adoption des clés d'accès 100%

En fin de compte, alors que l'écosystème numérique plus large continue de faire face à des défis liés à la terminologie des clés d'accès et à la formation des utilisateurs, l'approche proactive d'Amedia constitue un modèle réussi. L'intégration de clés d'accès dans un service à haute fréquence utilisé par des millions de personnes chaque jour établit une nouvelle norme pour un accès fluide dans le secteur des médias, offrant une mise à niveau de sécurité permanente sans sacrifier la fidélisation des utilisateurs.