Người dùng đăng nhập

Meggin Kearney
Meggin Kearney

Để người dùng đăng nhập, hãy truy xuất thông tin xác thực từ trình quản lý mật khẩu của trình duyệt và sử dụng thông tin đó để tự động đăng nhập người dùng. Đối với người dùng có nhiều tài khoản, hãy để họ chọn tài khoản chỉ bằng một lần nhấn bằng cách sử dụng trình chọn tài khoản.

Tự động đăng nhập

Quá trình tự động đăng nhập có thể diễn ra ở bất cứ đâu trên trang web của bạn; 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 vào các trang khác nhau trong trang web của bạn qua công cụ tìm kiếm.

Cách bật tính năng tự động đăng nhập:

  1. Nhận thông tin xác thực.
  2. Xác thực người dùng.
  3. Cập nhật giao diện người dùng hoặc chuyển đến trang được cá nhân hoá.

Lấy thông tin xác thực

Hỗ trợ trình duyệt

  • 51
  • 18
  • 60
  • 13

Nguồn

Để lấy thông tin xác thực, hãy gọi navigator.credentials.get(). Chỉ định loại thông tin xác thực để yêu cầu bằng cách cung cấp password hoặc federated.

Luôn sử dụng mediation: 'silent' cho tính năng tự động đăng nhập để bạn có thể dễ dàng đóng quá trình này nếu người dùng:

  • Chưa lưu thông tin xác thực nào.
  • Có nhiều thông tin đăng nhập được lưu trữ.
  • Đã đăng xuất.

Trước khi lấy thông tin xác thực, hãy nhớ 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ẽ phân giải bằng đối tượng thông tin xác thực hoặc null. Để xác định xem đó là PasswordCredential hay FederatedCredential, chỉ cần xem thuộc tính .type của đối tượng, đây sẽ là password hoặc federated.

Nếu .typefederated thì thuộc tính .provider là một chuỗi đại diện cho trì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 một quy trình xác thực tuỳ thuộc vào loại thông tin đăng nhập, password hay 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 được giải quyết, 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, điều đó có nghĩa là quy trình tự động đăng nhập không thể hoạt động. Ngầm đóng quy trình tự động đăng nhập.

Cập nhật giao diện người dùng

Nếu xác thực thành công, hãy 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ô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 một thông báo ngắn màu xanh dương có nội dung "Đăng nhập" tại thời điểm nhận đối tượng thông tin xác thực:

Thông báo ngắn màu xanh dương cho biết người dùng đang đăng nhập.

Một mẹo quan trọng: nếu thành công trong việc lấy đố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 nên hiện thông báo lỗi:

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

Ví dụ về 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 qua trình chọn tài khoản

Nếu người dùng yêu cầu tính năng dàn xếp hoặc có nhiều tài khoản, hãy 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ụ:

Trình chọn Tài khoản Google hiển thị nhiều tài khoản.

Các bước đăng nhập qua trình chọn tài khoản cũng giống như trong quá trình đăng nhập tự động, với một lệnh gọi bổ sung để hiển thị trình chọn tài khoản trong quá trình lấy thông tin xác thực:

  1. Lấy thông tin xác thực và hiển thị trình chọn tài khoản.
  2. Xác thực người dùng.
  3. Cập nhật giao diện người dùng hoặc chuyển đến trang được cá nhân hoá.

Lấy thông tin thông tin xác thực 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 một 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 navigator.credentials.get() và thêm mediation: 'optional' hoặc mediation: 'required' để hiển thị trình chọn tài khoản.

Khi mediationrequired, 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 mediationoptional, người dùng sẽ thấy một trình chọn tài khoản rõ ràng để đăng nhập sau lệnh gọi navigator.credentials.preventSilentAccess(). Việc này thường để đảm bảo quá trình 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ụ về 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 sẽ được phân giải bằng thông tin xác thực. 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 được lưu trữ, thì lời hứa sẽ được phân giải bằng null. Trong trường hợp đó, hãy quay lại sử dụng biểu mẫu đăng nhập.

Đừng quên quay lại sử dụng biểu mẫu đăng nhập

Bạn nên quay lại sử dụng 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 này không hoạt động.
    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

Ví dụ về 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à không phải nhớ thông tin đăng nhập bổ sung cho trang web của bạn.

Để triển khai đăng nhập liên kết:

  1. Xác thực người dùng bằng danh tính của bên thứ ba.
  2. Lưu trữ thông tin nhận dạng.
  3. Cập nhật giao diện người dùng hoặc chuyển đến một trang được cá nhân hoá (tương tự như trong chế độ tự động đăng nhập).

Xác thực người dùng bằng danh tính của bên thứ ba

Khi người dùng nhấn vào một nút đăng nhập được liên kết, hãy chạy quy trình xác thực nhà cung cấp danh tính cụ thể bằng FederatedCredential.

Hỗ trợ trình duyệt

  • 51
  • 79
  • x
  • x

Nguồn

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 || '',
      });
    }
  });

Tính năng Đăng nhập bằng Google sẽ cung cấp một mã thông báo làm bằng chứng xác thực.

Nhìn chung, tính năng đăng nhập liên kết được xây dựng dựa 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 bằng các tài khoản được liên kết, hãy tham khảo tài liệu của nhà cung cấp danh tính được liên kết tương ứng. Sau đây là một số ví dụ phổ biến:

Lưu trữ thông tin danh tính

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 từ trình cung cấp danh tính và một chuỗi nhà cung cấp đại diện cho nhà cung cấp danh tính (nameiconURL là không bắt buộc). Tìm hiểu thêm về thông tin này trong quy cách về tính năng Quản lý thông tin xác thực.

Để lưu trữ thông tin chi tiết về tài khoản được liên kết, hãy tạo thực thể cho một đối tượng FederatedCredential mới với 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 đó, hãy 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, hãy 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 bạn nhấn vào nút đăng xuất. Trước tiên, hãy chấm dứt phiên, sau đó tắt tính năng tự động đăng nhập cho các lần truy cập sau này. (Bạn có toàn quyền quyết định cách chấm dứt phiên hoạt động của mình.)

Tắt tính năng tự động đăng nhập cho các lượt truy cập sau này

Gọi navigator.credentials.preventSilentAccess():

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

Điều này sẽ đảm bảo rằng quá trình tự động đăng nhập sẽ không diễn ra cho đến khi người dùng bật tính năng tự động đăng nhập vào lần tiếp theo. Để tiếp tục tự động đăng nhập, người dùng có thể chủ động đăng nhập bằng cách chọn tài khoản họ muốn đăng nhập trong trình chọn tài khoản. Sau đó, người dùng luôn được đăng nhập lại cho đến khi họ đăng xuất một cách rõ ràng.

Ý kiến phản hồi