การปรับปรุงขั้นตอนการลงชื่อเข้าใช้โดยใช้ API การจัดการข้อมูลเข้าสู่ระบบ

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

Chrome เวอร์ชันล่าสุด (51) รองรับ API การจัดการข้อมูลเข้าสู่ระบบ โดยเป็นข้อเสนอแบบมาตรฐานที่ W3C ช่วยให้นักพัฒนาแอปเข้าถึงเครื่องมือจัดการข้อมูลเข้าสู่ระบบของเบราว์เซอร์แบบเป็นโปรแกรมและช่วยให้ผู้ใช้ลงชื่อเข้าใช้ได้ง่ายขึ้น

API การจัดการข้อมูลเข้าสู่ระบบคืออะไร

Credential Management API ช่วยให้นักพัฒนาซอฟต์แวร์จัดเก็บและเรียกข้อมูลเข้าสู่ระบบสำหรับรหัสผ่านและข้อมูลเข้าสู่ระบบแบบสมาพันธ์ได้ รวมถึงมีฟังก์ชัน 3 อย่างดังนี้

  • navigator.credentials.get()
  • navigator.credentials.store()
  • navigator.credentials.requireUserMediation()

การใช้ API แบบง่ายเหล่านี้ช่วยให้นักพัฒนาแอปสามารถทำสิ่งต่างๆ ที่มีประสิทธิภาพ เช่น

  • อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ด้วยการแตะเพียงครั้งเดียว
  • จดจำบัญชีแบบรวมศูนย์ที่ผู้ใช้ใช้ลงชื่อเข้าใช้
  • ให้ผู้ใช้กลับมาลงชื่อเข้าใช้อีกครั้งเมื่อเซสชันหมดอายุ

ในการใช้งานของ Chrome ระบบจะจัดเก็บข้อมูลเข้าสู่ระบบไว้ในเครื่องมือจัดการรหัสผ่านของ Chrome หากผู้ใช้ลงชื่อเข้าใช้ Chrome ก็จะซิงค์รหัสผ่านของผู้ใช้ในอุปกรณ์ต่างๆ ได้ รหัสผ่านที่ซิงค์ไว้เหล่านั้นยังสามารถแชร์กับแอป Android ที่ผสานรวม Smart Lock for Passwords API สำหรับ Android เพื่อประสบการณ์การใช้งานข้ามแพลตฟอร์มที่ราบรื่น

การผสานรวม Credential Management API กับเว็บไซต์ของคุณ

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

การจะครอบคลุมกรณีเช่นนี้ทั้งหมดแทบจะเป็นไปไม่ได้เลย แต่เรามาลองดูแอปหน้าเว็บเดียวแบบปกติกันดีกว่า

  • โดยหน้าแรกคือแบบฟอร์มการลงทะเบียน
  • เมื่อแตะปุ่ม "ลงชื่อเข้าใช้" ผู้ใช้จะไปยังแบบฟอร์มลงชื่อเข้าใช้
  • ทั้งแบบฟอร์มการลงทะเบียนและการลงชื่อเข้าใช้จะมีตัวเลือกโดยทั่วไปของข้อมูลประจำตัวที่เป็น ID/รหัสผ่านและการรวมศูนย์ เช่น การใช้ Google Sign-In และ Facebook Sign-In

เมื่อใช้ API การจัดการข้อมูลเข้าสู่ระบบ คุณจะเพิ่มฟีเจอร์ต่อไปนี้ลงในเว็บไซต์ได้ เช่น

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

คุณใช้งานฟีเจอร์เหล่านี้ได้ในเว็บไซต์เดโมด้วยโค้ดตัวอย่าง

แสดงตัวเลือกบัญชีผู้ใช้เมื่อลงชื่อเข้าใช้

ระหว่างผู้ใช้แตะปุ่ม "ลงชื่อเข้าใช้" กับการนำทางไปยังแบบฟอร์มลงชื่อเข้าใช้ คุณจะใช้ navigator.credentials.get() เพื่อรับข้อมูลเข้าสู่ระบบได้ Chrome จะแสดง UI ตัวเลือกบัญชีผู้ใช้ ซึ่งผู้ใช้สามารถเลือกบัญชีได้

UI ตัวเลือกบัญชีปรากฏขึ้นเพื่อให้ผู้ใช้เลือกบัญชีที่จะลงชื่อเข้าใช้
UI ตัวเลือกบัญชีปรากฏขึ้นเพื่อให้ผู้ใช้เลือกบัญชีที่จะลงชื่อเข้าใช้

การรับออบเจ็กต์ข้อมูลเข้าสู่ระบบของรหัสผ่าน

หากต้องการแสดงข้อมูลเข้าสู่ระบบของรหัสผ่านเป็นตัวเลือกของบัญชี ให้ใช้ password: true

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
}).then(function(cred) {
    // continuation
    ...

การใช้ข้อมูลเข้าสู่ระบบของรหัสผ่านเพื่อลงชื่อเข้าใช้

เมื่อผู้ใช้เลือกบัญชีแล้ว ฟังก์ชันการแก้ไขจะได้รับข้อมูลเข้าสู่ระบบที่เป็นรหัสผ่าน คุณสามารถส่ง URL ไปยังเซิร์ฟเวอร์โดยใช้ fetch():

    // continued from previous example
}).then(function(cred) {
    if (cred) {
    if (cred.type == 'password') {
        // Construct FormData object
        var form = new FormData();

        // Append CSRF Token
        var csrf_token = document.querySelector('csrf_token').value;
        form.append('csrf_token', csrf_token);

        // You can append additional credential data to `.additionalData`
        cred.additionalData = form;

        // `POST` the credential object as `credentials`.
        // id, password and the additional data will be encoded and
        // sent to the url as the HTTP body.
        fetch(url, {           // Make sure the URL is HTTPS
        method: 'POST',      // Use POST
        credentials: cred    // Add the password credential object
        }).then(function() {
        // continuation
        });
    } else if (cred.type == 'federated') {
        // continuation

การใช้ข้อมูลเข้าสู่ระบบแบบรวมศูนย์เพื่อลงชื่อเข้าใช้

หากต้องการแสดงบัญชีแบบรวมศูนย์ต่อผู้ใช้ ให้เพิ่ม federated ซึ่งจะนำอาร์เรย์ของผู้ให้บริการข้อมูลประจำตัวไปยังตัวเลือก get()

เมื่อมีการจัดเก็บหลายบัญชีในเครื่องมือจัดการรหัสผ่าน
เมื่อมีการจัดเก็บหลายบัญชีในเครื่องมือจัดการรหัสผ่าน
navigator.credentials.get({
    password: true, // `true` to obtain password credentials
    federated: {
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    }
}).then(function(cred) {
    // continuation
    ...

คุณสามารถตรวจสอบพร็อพเพอร์ตี้ type ของออบเจ็กต์ข้อมูลเข้าสู่ระบบได้เพื่อดูว่าเป็น PasswordCredential (type == 'password') หรือ FederatedCredential (type == 'federated') หากข้อมูลเข้าสู่ระบบเป็น FederatedCredential คุณจะเรียกใช้ API ที่เหมาะสมโดยใช้ข้อมูลที่มีอยู่ได้

    });
} else if (cred.type == 'federated') {
    // `provider` contains the identity provider string
    switch (cred.provider) {
    case 'https://accounts.google.com':
        // Federated login using Google Sign-In
        var auth2 = gapi.auth2.getAuthInstance();

        // In Google Sign-In library, you can specify an account.
        // Attempt to sign in with by using `login_hint`.
        return auth2.signIn({
        login_hint: cred.id || ''
        }).then(function(profile) {
        // continuation
        });
        break;

    case 'https://www.facebook.com':
        // Federated login using Facebook Login
        // continuation
        break;

    default:
        // show form
        break;
    }
}
// if the credential is `undefined`
} else {
// show form
โฟลว์ชาร์ตการจัดการข้อมูลเข้าสู่ระบบ

ข้อมูลเข้าสู่ระบบ Store

เมื่อผู้ใช้ลงชื่อเข้าใช้เว็บไซต์ด้วยแบบฟอร์ม คุณจะใช้ navigator.credentials.store() เพื่อจัดเก็บข้อมูลเข้าสู่ระบบได้ ระบบจะแจ้งให้ผู้ใช้จัดเก็บหรือไม่ ใช้ new PasswordCredential() หรือ new FederatedCredential() เพื่อสร้างออบเจ็กต์ข้อมูลเข้าสู่ระบบที่ต้องการจัดเก็บ ทั้งนี้ขึ้นอยู่กับประเภทของข้อมูลเข้าสู่ระบบ

Chrome จะถามผู้ใช้ว่าต้องการจัดเก็บข้อมูลเข้าสู่ระบบหรือไม่ (หรือผู้ให้บริการการรวมศูนย์)
Chrome จะถามผู้ใช้ว่าต้องการจัดเก็บข้อมูลเข้าสู่ระบบ (หรือผู้ให้บริการการรวมศูนย์) หรือไม่

การสร้างและจัดเก็บข้อมูลเข้าสู่ระบบรหัสผ่านจากองค์ประกอบแบบฟอร์ม

โค้ดต่อไปนี้ใช้แอตทริบิวต์ autocomplete เพื่อแมปองค์ประกอบของแบบฟอร์มกับพารามิเตอร์ออบเจ็กต์ PasswordCredential โดยอัตโนมัติ

HTML html <form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="******" /> </form>

JavaScript

var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});

การสร้างและจัดเก็บข้อมูลเข้าสู่ระบบแบบรวมศูนย์

// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
    id: id,                                  // The id for the user
    name: name,                              // Optional user name
    provider: 'https://accounts.google.com',  // A string that represents the identity provider
    iconURL: iconUrl                         // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});
แผนภาพขั้นตอนการลงชื่อเข้าใช้

อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้อีกครั้งโดยอัตโนมัติ

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

เมื่อผู้ใช้ลงชื่อเข้าใช้โดยอัตโนมัติ การแจ้งเตือนจะปรากฏขึ้น
เมื่อผู้ใช้ลงชื่อเข้าใช้โดยอัตโนมัติ การแจ้งเตือนจะปรากฏขึ้น

การรับออบเจ็กต์ข้อมูลเข้าสู่ระบบ

navigator.credentials.get({
    password: true, // Obtain password credentials or not
    federated: {    // Obtain federation credentials or not
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    },
    unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
    if (cred) {
    // auto sign-in possible
    ...
    } else {
    // auto sign-in not possible
    ...
    }
});

โค้ดควรมีลักษณะคล้ายกับโค้ดที่คุณเห็นในส่วน "แสดงตัวเลือกบัญชีผู้ใช้เมื่อลงชื่อเข้าใช้" ความแตกต่างเพียงอย่างเดียวคือคุณจะตั้งค่า unmediated: true

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

  • ผู้ใช้ตอบรับฟีเจอร์ลงชื่อเข้าใช้อัตโนมัติด้วยการต้อนรับที่อบอุ่น
  • ผู้ใช้ได้ลงชื่อเข้าใช้เว็บไซต์โดยใช้ Credential Management API แล้วก่อนหน้านี้
  • ผู้ใช้มีข้อมูลเข้าสู่ระบบที่เก็บไว้สําหรับต้นทางเพียง 1 รายการเท่านั้น
  • ผู้ใช้ไม่ได้ออกจากระบบอย่างชัดแจ้งในเซสชันก่อนหน้า

หากไม่เป็นไปตามเงื่อนไขเหล่านี้ ระบบจะปฏิเสธฟังก์ชันนี้

แผนภาพโฟลว์ออบเจ็กต์ข้อมูลเข้าสู่ระบบ

ใช้สื่อกลางการลงชื่อเข้าใช้อัตโนมัติ

เมื่อผู้ใช้ออกจากระบบเว็บไซต์ ถือเป็นหน้าที่ของคุณในการตรวจสอบว่าผู้ใช้จะไม่ได้ลงชื่อกลับเข้าใช้โดยอัตโนมัติ API การจัดการข้อมูลเข้าสู่ระบบมีกลไกที่เรียกว่าสื่อกลางเพื่อให้มั่นใจถึงการดำเนินการนี้ คุณเปิดใช้โหมดสื่อกลางได้โดยเรียกใช้ navigator.credentials.requireUserMediation() ตราบใดที่สถานะสื่อกลางของผู้ใช้สำหรับต้นทางเปิดอยู่ โดยใช้ unmediated: true กับ navigator.credentials.get() ฟังก์ชันนั้นจะใช้ค่า undefined

สื่อกลางการลงชื่อเข้าใช้อัตโนมัติ

navigator.credentials.requireUserMediation();
โฟลว์ชาร์ตการลงชื่อเข้าใช้อัตโนมัติ

คำถามที่พบบ่อย

JavaScript ในเว็บไซต์จะเรียกข้อมูลรหัสผ่านดิบได้ไหม ไม่ได้ คุณจะรับรหัสผ่านได้เฉพาะใน PasswordCredential เท่านั้น และจะเปิดเผยรหัสผ่านไม่ได้ไม่ว่าจะใช้วิธีใดก็ตาม

ฉันจัดเก็บชุดหลัก 3 หลักสำหรับรหัสโดยใช้ Credential Management API ได้ไหม ข้ามไปก่อน ขอขอบคุณความคิดเห็นเกี่ยวกับข้อกำหนด

ฉันจะใช้ Credential Management API ภายใน iframe ได้ไหม API จำกัดไว้เฉพาะสำหรับบริบทระดับบนสุด การเรียกใช้ไปยัง .get() หรือ .store() ใน iframe จะได้รับการแก้ไขทันทีโดยไม่มีผลกระทบ

ฉันจะผสานรวมส่วนขยายการจัดการรหัสผ่านของ Chrome กับ Credential Management API ได้ไหม คุณอาจลบล้าง navigator.credentials และเชื่อมโยงส่วนขยาย Chrome เข้ากับข้อมูลเข้าสู่ระบบ get() หรือ store()

แหล่งข้อมูล

ดูข้อมูลเพิ่มเติมเกี่ยวกับ API การจัดการข้อมูลเข้าสู่ระบบได้ที่คู่มือการผสานรวม