Streamlining the Sign-In Flow Using Credential Management API
การปรับปรุงขั้นตอนการลงชื่อเข้าใช้โดยใช้ API การจัดการข้อมูลเข้าสู่ระบบ  |  Blog  |  Chrome for Developers


  
    
    





        
          
      

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

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





API การจัดการข้อมูลประจำตัวคืออะไร

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


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


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


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




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

การผสานรวม API การจัดการข้อมูลเข้าสู่ระบบกับเว็บไซต์ของคุณ

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

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


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


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


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


สัมผัสประสบการณ์การใช้ฟีเจอร์เหล่านี้ในเว็บไซต์สาธิตด้วยโค้ดตัวอย่าง



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

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


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


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

หากต้องการแสดงข้อมูลเข้าสู่ระบบของรหัสผ่านเป็นตัวเลือกบัญชี ให้ใช้ password: true
navigator.credentials.get({
    password: true, // `true` to obtain password credentials
}).then(function(cred) {
    // continuation
    ...

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

เมื่อผู้ใช้เลือกบัญชีแล้ว ฟังก์ชันแปลงค่าจะได้รับ
ข้อมูลเข้าสู่ระบบรหัสผ่าน คุณจะส่งไฟล์ไปยังเซิร์ฟเวอร์โดยใช้ 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





ข้อมูลเข้าสู่ระบบของร้านค้า

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


วันที่ 

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

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


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


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





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

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

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





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

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

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

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

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

แหล่งข้อมูล

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


ข้อกำหนดของ API
การหารือเกี่ยวกับข้อมูลจำเพาะและ ความคิดเห็น
ข้อมูลอ้างอิง MN API
คู่มือการผสานรวม API การจัดการข้อมูลเข้าสู่ระบบ
สาธิต
ซอร์สโค้ดสำหรับการสาธิต
Codelab "การเปิดใช้การลงชื่อเข้าใช้อัตโนมัติด้วย API การจัดการข้อมูลเข้าสู่ระบบ"


  

  

  
