Để người dùng đăng nhập, hãy truy xuất thông tin xác thực từ mật khẩu của trình duyệt người dùng và sử dụng chúng để tự động đăng nhập người dùng. Nếu người dùng có nhiều tài khoản, cho phép họ chọn tài khoản chỉ bằng một lần nhấn bằng trình chọn tài khoản.
Tự động đăng nhập
Bạn có thể tự động đăng nhập ở bất cứ đâu trên trang web của mình; không chỉ ở trang trên cùng mà còn các trang chi tiết khác. Điều này rất hữu ích khi người dùng truy cập các trang khác nhau trên trang web của bạn, thông qua công cụ tìm kiếm.
Cách bật tính năng tự động đăng nhập:
- Lấy thông tin chứng chỉ.
- Xác thực người dùng.
- Cập nhật giao diện người dùng hoặc tiếp tục truy cập vào trang được cá nhân hoá.
Lấy thông tin chứng chỉ
Để nhận thông tin xác thực, hãy gọi
navigator.credentials.get().
Chỉ định loại thông tin đăng nhập để yêu cầu
bằng cách cấp cho nó một password hoặc federated.
Luôn sử dụng mediation: 'silent' để tự động đăng nhập,
để bạn có thể dễ dàng đóng quy trình này nếu người dùng:
- Chưa lưu thông tin xác thực.
- Có lưu trữ nhiều thông tin xác thực.
- Đã đăng xuất.
Trước khi có được thông tin xác thực, đừng quên kiểm tra xem người dùng đã đăng nhập hay chưa:
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
});
// ...
}
}
Lời hứa do navigator.credentials.get() trả về sẽ giải quyết
với đối tượng thông tin xác thực hoặc null.
Để xác định đó là PasswordCredential hay FederatedCredential,
chỉ cần xem thuộc tính .type của đối tượng,
password hoặc federated.
Nếu .type là federated,
thuộc tính .provider là một chuỗi đại diện cho nhà cung cấp danh tính.
Xác thực người dùng
Sau khi bạn có thông tin xác thực,
hãy chạy quy trình xác thực tuỳ thuộc vào loại thông tin đăng nhập,
password hoặc federated:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Khi lời hứa thực hiện được, hãy kiểm tra xem bạn có nhận được đối tượng thông tin xác thực hay không. Nếu không thì điều đó có nghĩa là không thể tự động đăng nhập. Đóng quy trình tự động đăng nhập mà không thông báo.
Cập nhật giao diện người dùng
Nếu xác thực thành công, cập nhật giao diện người dùng hoặc chuyển tiếp người dùng đến trang được cá nhân hoá:
}).then(profile => {
if (profile) {
updateUI(profile);
}
Đừng quên hiển thị thông báo lỗi xác thực
Để tránh gây nhầm lẫn cho người dùng, người dùng sẽ thấy thông báo ngắn màu xanh dương cho biết "Đăng nhập" tại thời điểm nhận đối tượng thông tin xác thực:
Một mẹo quan trọng: nếu bạn thành công trong việc có được đối tượng thông tin xác thực nhưng không xác thực được người dùng, bạn sẽ thấy thông báo lỗi:
}).catch(error => {
showError('Sign-in Failed');
});
}
}
Ví dụ về đoạn mã đầy đủ
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
showError('Sign-in Failed');
});
}
}
Đăng nhập thông qua trình chọn tài khoản
Nếu người dùng yêu cầu dàn xếp hoặc có nhiều tài khoản, sử dụng trình chọn tài khoản để cho phép người dùng đăng nhập, bỏ qua biểu mẫu đăng nhập thông thường, ví dụ:
Các bước đăng nhập qua trình chọn tài khoản cũng giống như trong tự động đăng nhập, với một cuộc gọi bổ sung để hiển thị trình chọn tài khoản là một phần của quá trình nhận thông tin đăng nhập:
- Lấy thông tin đăng nhập và hiển thị trình chọn tài khoản.
- Xác thực người dùng.
- Cập nhật giao diện người dùng hoặc chuyển đến một trang được cá nhân hoá.
Nhận thông tin đăng nhập và hiển thị trình chọn tài khoản
Hiển thị trình chọn tài khoản để phản hồi hành động đã xác định của người dùng,
ví dụ: khi người dùng nhấn vào nút "Đăng nhập" . Gọi điện
navigator.credentials.get()!
và thêm mediation: 'optional' hoặc mediation: 'required' để hiển thị trình chọn tài khoản.
Khi mediation là required, người dùng sẽ luôn thấy trình chọn tài khoản để đăng nhập.
Lựa chọn này cho phép người dùng có nhiều tài khoản dễ dàng chuyển đổi giữa các tài khoản đó.
Khi mediation là optional,
người dùng được hiển thị rõ ràng trình chọn tài khoản để đăng nhập sau
navigator.credentials.preventSilentAccess()
.
Điều này thường nhằm đảm bảo việc tự động đăng nhập không xảy ra
sau khi người dùng chọn đăng xuất hoặc huỷ đăng ký.
Ví dụ minh hoạ mediation: 'optional':
var signin = document.querySelector('#signin');
signin.addEventListener('click', e => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials.get({
password: true,
federated: {
providers: [
'https://accounts.google.com'
]
},
mediation: 'optional'
}).then(c => {
Sau khi người dùng chọn một tài khoản,
lời hứa được thực hiện với thông tin đăng nhập.
Nếu người dùng huỷ trình chọn tài khoản,
hoặc không có thông tin xác thực nào được lưu trữ,
lời hứa sẽ được thực hiện bằng null.
Trong trường hợp đó, hãy quay lại trải nghiệm đăng nhập vào biểu mẫu.
Đừng quên quay lại biểu mẫu đăng nhập
Bạn nên quay lại biểu mẫu đăng nhập vì bất kỳ lý do nào sau đây:
- Không có thông tin xác thực nào được lưu trữ.
- Người dùng đã loại bỏ trình chọn tài khoản mà không chọn tài khoản.
- API không có sẵn.
}).then(profile => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
}).catch(error => {
location.href = '/signin';
});
Ví dụ về đoạn mã đầy đủ
var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'optional',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
})
.catch((error) => {
location.href = '/signin';
});
}
});
Đăng nhập Liên kết
Tính năng đăng nhập liên kết cho phép người dùng đăng nhập chỉ bằng một lần nhấn và mà không cần phải nhớ chi tiết đăng nhập bổ sung cho trang web của bạn.
Cách triển khai quy trình đăng nhập liên kết:
- Xác thực người dùng bằng thông tin nhận dạng của bên thứ ba.
- Lưu trữ thông tin nhận dạng.
- Cập nhật giao diện người dùng hoặc tiếp tục truy cập vào một trang được cá nhân hoá (tương tự như trong tính năng tự động đăng nhập).
Xác thực người dùng bằng thông tin nhận dạng của bên thứ ba
Khi người dùng nhấn vào nút đăng nhập được liên kết,
bạn có thể chạy quy trình xác thực nhà cung cấp danh tính cụ thể với
FederatedCredential.
Ví dụ: nếu nhà cung cấp là Google, hãy sử dụng Thư viện JavaScript Đăng nhập bằng Google:
navigator.credentials
.get({
password: true,
mediation: 'optional',
federated: {
providers: ['https://account.google.com'],
},
})
.then(function (cred) {
if (cred) {
// Instantiate an auth object
var auth2 = gapi.auth2.getAuthInstance();
// Is this user already signed in?
if (auth2.isSignedIn.get()) {
var googleUser = auth2.currentUser.get();
// Same user as in the credential object?
if (googleUser.getBasicProfile().getEmail() === cred.id) {
// Continue with the signed-in user.
return Promise.resolve(googleUser);
}
}
// Otherwise, run a new authentication flow.
return auth2.signIn({
login_hint: id || '',
});
}
});
Thông tin Đăng nhập bằng Google sẽ cung cấp một mã thông báo nhận dạng làm bằng chứng xác thực.
Nói chung, đăng nhập liên kết được xây dựng trên các giao thức tiêu chuẩn như OpenID Connect hoặc OAuth. Để tìm hiểu cách xác thực với tài khoản liên kết, tham chiếu đến các nhà cung cấp danh tính được liên kết tương ứng tài liệu. Các ví dụ phổ biến bao gồm:
Lưu trữ thông tin nhận dạng
Sau khi xác thực xong, bạn có thể lưu trữ thông tin nhận dạng.
Thông tin bạn sẽ lưu trữ ở đây là id của nhà cung cấp danh tính
và chuỗi nhà cung cấp đại diện cho nhà cung cấp danh tính
(name và iconURL là không bắt buộc).
Tìm hiểu thêm về thông tin này trong
Quy cách Quản lý thông tin xác thực.
Để lưu trữ chi tiết tài khoản được liên kết, hãy tạo thực thể mới
FederatedCredential
có giá trị nhận dạng của người dùng và giá trị nhận dạng của nhà cung cấp.
Sau đó gọi
navigator.credentials.store()
để lưu trữ thông tin nhận dạng.
Sau khi liên kết thành công,
tạo thực thể FederatedCredential một cách đồng bộ hoặc không đồng bộ:
Ví dụ về phương pháp đồng bộ:
// Create credential object synchronously.
var cred = new FederatedCredential({
id: id, // id in IdP
provider: 'https://account.google.com', // A string representing IdP
name: name, // name in IdP
iconURL: iconUrl, // Profile image url
});
Ví dụ về phương pháp không đồng bộ:
// Create credential object asynchronously.
var cred = await navigator.credentials.create({
federated: {
id: id,
provider: 'https://accounts.google.com',
name: name,
iconURL: iconUrl,
},
});
Sau đó, lưu trữ đối tượng thông tin xác thực:
// Store it
navigator.credentials.store(cred).then(function () {
// continuation
});
Đăng xuất
Đăng xuất người dùng khi nhấn vào nút đăng xuất. Trước tiên, hãy chấm dứt phiên truy cập, rồi tắt tính năng tự động đăng nhập cho các lượt truy cập sau này. (Bạn có toàn quyền quyết định cách chấm dứt phiên của mình).
Tắt tính năng tự động đăng nhập cho các lần truy cập sau này
Gọi điện
navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Điều này giúp đảm bảo tính năng tự động đăng nhập sẽ không xuất hiện cho đến lần tiếp theo người dùng bật tính năng tự động đăng nhập. Để tiếp tục tự động đăng nhập, người dùng có thể chọn chủ động đăng nhập bằng cách chọn tài khoản họ muốn đăng nhập từ trình chọn tài khoản. Sau đó, người dùng sẽ luôn đăng nhập lại cho đến khi họ thể hiện rõ việc đăng xuất.