การลงทะเบียนพาสคีย์ของ Amedia เพิ่มขึ้น 100% โดยใช้ WebOTP

Henning Haaland Kulander

Yu Tsuno

Published: June 30, 2026

Amedia เป็นผู้เผยแพร่สื่อสิ่งพิมพ์ท้องถิ่นรายใหญ่ที่สุดของนอร์เวย์ โดยจัดการหนังสือพิมพ์กว่า 100 ฉบับและมีผู้อ่านกว่า 2 ล้านคนต่อวัน Amedia ใช้ aID ซึ่งเป็นโซลูชันข้อมูลประจำตัวดิจิทัลภายในองค์กรเพื่อมอบประสบการณ์ที่สอดคล้องกัน และราบรื่น ระบบบัญชีแบบรวมศูนย์ตามมาตรฐานนี้ไม่เพียงแต่ให้สิทธิ์เข้าถึงเครือข่ายทั้งหมดของ Amedia แก่ผู้ใช้เท่านั้น แต่ยังได้รับการนำไปใช้ในหนังสือพิมพ์อื่นๆ ของนอร์เวย์และเดนมาร์กด้วย

ความท้าทาย: การแนะนำพาสคีย์ให้แก่ฐานผู้ใช้ที่หลากหลาย

สำหรับ Amedia แล้ว กระบวนการลงชื่อเข้าใช้เป็นประตูสู่เนื้อหา ความยุ่งยากทุกวินาทีส่งผลกระทบต่อจำนวนผู้อ่านโดยตรง แม้ว่ารหัสผ่านปกติและการตรวจสอบสิทธิ์แบบ 2 ปัจจัย (2FA) ผ่าน SMS จะยุ่งยากสำหรับผู้ใช้ที่ต้องเดินทาง แต่การข้ามไปใช้พาสคีย์โดยตรงก็ทำให้เกิดอุปสรรคที่ไม่คาดคิดขึ้น นั่นคือ ความไม่คุ้นเคยโดยสิ้นเชิง

เนื่องจาก aID มักจะเป็นครั้งแรกที่ผู้ใช้ได้พบกับพาสคีย์ การบังคับให้เปลี่ยนไปใช้ข้อความแจ้งไบโอเมตริกที่ไม่คุ้นเคยอย่างกะทันหันจึงทำให้ผู้ใช้บางรายลังเล Amedia ตระหนักว่าไม่สามารถเพียงแค่ติดตั้งใช้งานเทคโนโลยีเท่านั้น แต่ต้องช่วยให้ผู้ใช้เข้าใจวิธีใช้พาสคีย์ด้วย

โซลูชัน: การผสานรวมโฟลว์ WebOTP และพาสคีย์

แทนที่จะบังคับให้ผู้ใช้เลือกระหว่างความเคยชินเก่า (SMS) กับแนวคิดใหม่โดยสิ้นเชิง (พาสคีย์) Amedia ได้ผสานรวมทั้ง 2 อย่างเข้าด้วยกันเพื่อสร้างประสบการณ์การเริ่มต้นใช้งานที่ราบรื่น โดยใช้ WebOTP API เพื่อปรับปรุงกระบวนการยืนยันผ่าน SMS ที่คุ้นเคย พร้อมกับตั้งค่าโครงสร้างพื้นฐานสำหรับการลงชื่อเข้าใช้แบบไม่ต้องใช้รหัสผ่านในแบ็กเอนด์อย่างเงียบๆ

1. การลงชื่อสมัครใช้ที่ราบรื่นในทุกแพลตฟอร์ม

เมื่อผู้ใช้ลงชื่อสมัครใช้ aID ผู้ใช้จะป้อนชื่อ หมายเลขโทรศัพท์ และอีเมล จากนั้น Amedia จะส่งรหัสผ่านที่สามารถใช้งานได้เพียงครั้งเดียว (OTP) ผ่าน SMS Amedia อาศัย OTP ผ่าน SMS เป็นหลักแทนที่จะใช้อีเมล เนื่องจากผู้คนในสแกนดิเนเวียส่วนใหญ่มีหมายเลขโทรศัพท์เพียงหมายเลขเดียว และการย้ายหมายเลขเมื่อเปลี่ยนผู้ให้บริการโทรศัพท์มือถือก็ทำได้อย่างราบรื่น ความเสถียรนี้ทำให้หมายเลขโทรศัพท์เป็นตัวระบุหลักที่เชื่อถือได้สำหรับการลงชื่อเข้าใช้และเป็นจุดข้อมูลที่สอดคล้องกันสำหรับการสร้างโปรไฟล์ผู้ใช้แบบขยาย Amedia ใช้ WebOTP API แทนที่จะบังคับให้ผู้ใช้ออกจากเบราว์เซอร์ เปิดแอปข้อความ จดจำ รหัส และพิมพ์รหัส ในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ที่รองรับ การดำเนินการนี้จะแสดงข้อความแจ้งที่ Bottom Sheet ซึ่งให้ผู้ใช้แตะยืนยัน ได้เลย เบราว์เซอร์จะดึง OTP จาก SMS และส่งแบบฟอร์มโดยอัตโนมัติ

นอกจากนี้ Amedia ยังอัปเดตการส่ง SMS ให้ใช้รูปแบบข้อความที่ผูกกับต้นทางที่ได้มาตรฐาน (เช่น @www.aid.no #123456) ซึ่งช่วยให้การลงชื่อเข้าใช้ราบรื่นในระบบนิเวศที่กว้างขึ้น มาตรฐานนี้ไม่เพียงแต่ ขับเคลื่อน WebOTP API ในเบราว์เซอร์อย่าง Chrome, Opera และ Vivaldi บน Android และ เดสก์ท็อปเท่านั้น แต่ยังเปิดใช้งานฟีเจอร์ของ Safari ได้อย่างราบรื่นด้วย autocomplete="one-time-code" ด้วยเหตุนี้ ผู้ใช้ในแพลตฟอร์มอุปกรณ์เคลื่อนที่และเดสก์ท็อปจึงได้รับประสบการณ์การใช้งานโฟลว์ OTP ที่ปลอดภัยและอัตโนมัติโดยไม่จำเป็นต้องใช้ตรรกะแบ็กเอนด์เฉพาะแพลตฟอร์ม ดูข้อมูลเพิ่มเติมได้ที่แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์ม OTP ผ่าน 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. การลงทะเบียนพาสคีย์ทันที

ก่อนหน้านี้ หลังจากที่ผู้ใช้ทำการยืนยัน WebOTP เสร็จสมบูรณ์แล้ว Amedia จะให้ผู้ใช้เลือกระหว่างสร้างรหัสผ่านปกติหรือตั้งค่าพาสคีย์ และเป็นไปตามคาด เมื่อต้องเผชิญกับคำศัพท์ทางเทคนิคที่ไม่คุ้นเคย ผู้ใช้ส่วนใหญ่เลือกเส้นทางที่ง่ายที่สุด นั่นคือข้ามขั้นตอนนี้ไปเลยหรือกลับไปใช้รหัสผ่านมาตรฐาน

ในช่วงกลางเดือนกุมภาพันธ์ ทีม Amedia ได้เปลี่ยนแนวทาง โดยผสานรวมข้อความแจ้งการลงทะเบียนพาสคีย์เข้ากับโฟลว์หลังการยืนยันทันที ก่อนที่จะแสดงตัวเลือกให้ผู้ใช้ด้วยซ้ำ Amedia ได้ผสานรวมการโต้ตอบอย่างราบรื่นเพื่อให้เป็นไปตามข้อกำหนดที่เข้มงวดเกี่ยวกับท่าทางผู้ใช้ในเบราว์เซอร์อย่าง Chrome และ Safari เนื่องจากผู้ใช้ยืนยัน OTP ก่อน การแตะครั้งแรกนี้จึงทำหน้าที่เป็นท่าทางผู้ใช้ที่จำเป็นเพื่อเรียกใช้ข้อความแจ้ง navigator.credentials.create() โดยตรง การทำให้พาสคีย์เป็นประสบการณ์เริ่มต้นแทนที่จะเป็นการตั้งค่าที่ไม่บังคับช่วยให้ Amedia เพิ่มอัตราการลงทะเบียนสำเร็จเป็น 2 เท่าในทันที

แม้ว่าข้อความแจ้งทันทีนี้จะมีประสิทธิภาพสูง แต่ทีมก็พยายามปรับปรุงประสบการณ์ให้ดียิ่งขึ้นโดยใช้ "การสร้างแบบมีเงื่อนไข" ซึ่งเป็นกลไกที่สร้างพาสคีย์ในเบื้องหลังทั้งหมดโดยไม่จำเป็นต้องให้ผู้ใช้ดำเนินการโดยตรง อย่างไรก็ตาม ทีมพบอุปสรรคทางเทคนิค นั่นคือการสร้างแบบมีเงื่อนไขต้องมีการลงชื่อเข้าใช้ก่อนหน้านี้โดยใช้รหัสผ่านที่ถูกต้องซึ่งบันทึกไว้ในเครื่องมือจัดการรหัสผ่าน เนื่องจากโฟลว์ WebOTP ของ Amedia ไม่ต้องใช้รหัสผ่านเลย จึงไม่เป็นไปตามเกณฑ์ด้านความปลอดภัยนี้ Amedia จึงสงวนการสร้างแบบมีเงื่อนไขไว้สำหรับโฟลว์การลงชื่อเข้าใช้แบบ 2 ปัจจัยปกติ (รหัสผ่านและรหัส OTP) เท่านั้น ขณะที่ใช้การโต้ตอบของผู้ใช้แบบผสานรวมสำหรับการเริ่มต้นใช้งานแบบไม่ต้องใช้รหัสผ่าน

ระบบใช้โฟลว์การลงทะเบียนมาตรฐานเพื่อให้ได้รับประสบการณ์ที่เชื่อถือได้ ซึ่งจะเรียกใช้กล่องโต้ตอบ UI ของเบราว์เซอร์ที่ระบบแจ้งให้ UI การลงทะเบียนพาสคีย์ของเบราว์เซอร์แสดงขึ้นอย่างปลอดภัย ผู้ใช้สร้างพาสคีย์โดยใช้การล็อกหน้าจอของอุปกรณ์ (ไบโอเมตริกหรือ PIN) การผสานรวมการดำเนินการนี้ไว้หลัง WebOTP จะช่วยให้ผู้ใช้ตั้งค่าได้เสร็จสมบูรณ์โดยไม่ต้องคิดรหัสผ่าน

// 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. การลงชื่อเข้าใช้ครั้งต่อๆ ไปอย่างรวดเร็ว

เมื่อผู้ใช้เข้าชมสิ่งพิมพ์ของ Amedia ในอุปกรณ์เครื่องเดิมในครั้งถัดไป aID จะเรียกใช้การลงชื่อเข้าใช้ด้วยพาสคีย์โดยอัตโนมัติ หากผู้ใช้โต้ตอบกับหน้าเว็บ ก่อนที่ข้อความแจ้งอัตโนมัติจะปรากฏขึ้น หรือหากผู้ใช้ปิดข้อความแจ้งอัตโนมัติ ระบบจะใช้การป้อนข้อความอัตโนมัติในแบบฟอร์มพาสคีย์ อย่างราบรื่น

การดำเนินการนี้ทำให้กระบวนการลงชื่อเข้าใช้รวดเร็ว เนื่องจากผู้ใช้เพียงแค่โต้ตอบกับข้อความแจ้งของเบราว์เซอร์/ระบบปฏิบัติการหรือคำแนะนำการป้อนข้อความอัตโนมัติของแป้นพิมพ์เพื่อเลือกพาสคีย์ โดยไม่ต้องป้อนข้อมูลในแบบฟอร์มด้วยตนเอง

// 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);
  }
}

ผลลัพธ์: การผสานรวมเพื่อการใช้งานที่ราบรื่น

การปรับปรุงโฟลว์การเริ่มต้นใช้งานช่วยให้ Amedia ลดความยุ่งยากสำหรับผู้อ่านใหม่และผู้อ่านที่กลับมาได้อย่างมาก การผสานรวม WebOTP และพาสคีย์ทำให้เกิดการปรับปรุงการดำเนินงานและประสบการณ์การใช้งานที่ชัดเจน ดังนี้

• การลงชื่อสมัครใช้เร็วขึ้นอย่างมาก: เวลาโดยรวมที่ต้องใช้ในการสร้างบัญชี aID ใหม่ลดลงอย่างมากเนื่องจากการป้อนข้อมูล WebOTP อัตโนมัติและการ นำการสร้างรหัสผ่านด้วยตนเองออกไปโดยสิ้นเชิง
• ผู้ใช้ใหม่ 48% สร้างพาสคีย์: การแจ้งให้สร้างพาสคีย์ ทันทีหลังจากยืนยัน WebOTP ช่วยให้ Amedia มีอัตรา Conversion ที่สูงมาก สำหรับการลงทะเบียนพาสคีย์ ซึ่งแสดงถึง การเพิ่มขึ้น 100% เมื่อเทียบกับโฟลว์การเริ่มต้นใช้งานแบบมีตัวเลือกก่อนหน้านี้
• การลงชื่อเข้าใช้เร็วขึ้น 82%: ผู้ใช้ที่กลับมาจะตรวจสอบสิทธิ์ได้เร็วขึ้นกว่า 5 เท่า เมื่อใช้พาสคีย์เทียบกับวิธีการอื่นๆ เช่น รหัสผ่านหรือ การป้อน OTP ด้วยตนเอง

โดยรวมแล้ว แม้ว่าระบบนิเวศดิจิทัลที่กว้างขึ้นจะยังคงเผชิญกับความท้าทายเกี่ยวกับคำศัพท์ของพาสคีย์และการให้ความรู้แก่ผู้ใช้ แต่แนวทางเชิงรุกของ Amedia ก็เป็นพิมพ์เขียวที่ประสบความสำเร็จ การผสานรวมพาสคีย์เข้ากับบริการที่มีการใช้งานบ่อยครั้งซึ่งผู้คนนับล้านใช้ทุกวันเป็นการกำหนดมาตรฐานใหม่สำหรับการเข้าถึงที่ราบรื่นในอุตสาหกรรมสื่อ โดยมอบการอัปเกรดด้านความปลอดภัยอย่างถาวรโดยไม่สูญเสียการคงผู้ใช้ไว้