跳至主要內容

深入了解 Chrome 的 PasswordCredential

h7mlWeb 开发安全性密码管理Chrome APIPasswordCredentialWeb Credential Management API用户密码自动填充用户体验大约 4 分钟约 1146 字

深入了解 Chrome 的 PasswordCredential

在现代网络生态系统中,用户帐户和密码是用户身份验证的关键元素。为了提供更好的用户体验和安全性,浏览器提供了许多 API 以便开发者更好地管理用户凭据。其中,Chrome 提供了 PasswordCredential 对象,为用户的密码管理和自动填充提供了便利。

PasswordCredential
<template>
  <div class="box">
    <!-- Integrated Form -->
    <form @submit.prevent="storeCredential">
      <input type="text" name="username" v-model="username" placeholder="Username" />
      <input type="password" name="password" v-model="password" placeholder="Password" />
      <button type="submit" :disabled="!isWebCredentialSupported">Submit</button>
    </form>

    <p class="message">PasswordCredential is {{ message }}</p>
    <button @click="storeCredential">Store default Credential</button>
    <br />
    <button @click="retrieveCredential">Retrieve Credential</button>
    <br />
    <button @click="updateCredential">Update Credential</button>
    <br />
    <button @click="deleteCredential">Delete Credential</button>
    <br />
    <code>{{ message }}</code>
  </div>
</template>

<script>
  export default {
    data: () => ({ message: '', isWebCredentialSupported: false, username: '', password: '' }),
    methods: {
      storeCredential() {
        const passwordCredential = new PasswordCredential({
          id: this.username || 'h7ml',
          password: this.password || 'zfy666',
          name: this.username || '子非鱼',
          iconURL: 'https://www.h7ml.cn/logo.png',
        });

        navigator.credentials
          .store(passwordCredential)
          .then(() => {
            this.message = 'Password credential stored successfully';
          })
          .catch((error) => {
            console.error('Error storing password credential:', error);
            this.message = 'Error storing password credential';
          });
      },

      retrieveCredential() {
        navigator.credentials
          .get({ password: true })
          .then((credential) => {
            if (credential) {
              this.message = 'Retrieved username credential: ' + credential.id;
              // 使用凭据进行登录等操作
              this.username = credential.id;
              this.password = credential.password;
            } else {
              this.message = 'No saved password credential found';
              // 提示用户进行登录
            }
          })
          .catch((error) => {
            console.error('Error retrieving password credential:', error);
            this.message = 'Error retrieving password credential';
          });
      },

      updateCredential() {
        // 更新密码凭据的操作
        this.message = 'Update credential functionality is not implemented in this example';
      },

      deleteCredential() {
        navigator.credentials
          .preventSilentAccess()
          .then(() => {
            this.message = 'Prevented silent access to password credentials';
          })
          .catch((error) => {
            console.error('Error preventing silent access:', error);
          });
      },
    },
    mounted() {
      this.isWebCredentialSupported = 'credentials' in navigator;
      this.message = this.isWebCredentialSupported
        ? 'Web Credential Management API is supported'
        : 'Web Credential Management API is not supported';
    },
  };
</script>

<style scoped>
  .box {
    text-align: center;
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
  }
  .message {
    color: #f00;
  }
</style>

1. PasswordCredential 是什么?

PasswordCredential 是一个 Web Credential Management API 的一部分,它允许开发者在不牺牲安全性的前提下管理用户的密码。这个 API 可以通过以下方式创建:

const passwordCredential = new PasswordCredential({
  id: 'h7ml@qq.com',
  password: 'zfy666',
  name: 'h7ml',
  iconURL: 'https://www.h7ml.cn/logo.png',
});

在这个例子中,我们创建了一个包含用户名、密码、姓名和头像 URL 的 PasswordCredential 对象。

2. 保存密码凭据

通过使用 navigator.credentials.store() 方法,我们可以将用户的密码凭据保存到浏览器中。这使得用户在下一次访问网站时能够自动填充他们的凭据信息。

navigator.credentials
  .store(passwordCredential)
  .then(() => {
    console.log('Password credential stored successfully');
  })
  .catch((error) => {
    console.error('Error storing password credential:', error);
  });

3. 获取已保存的密码凭据

通过 navigator.credentials.get() 方法,我们可以检索已保存在浏览器中的密码凭据。这允许我们自动填充登录表单,提供更好的用户体验。

navigator.credentials
  .get({ password: true })
  .then((credential) => {
    if (credential) {
      console.log('Retrieved password credential:', credential);
      // 使用凭据进行登录等操作
    } else {
      console.log('No saved password credential found');
      // 提示用户进行登录
    }
  })
  .catch((error) => {
    console.error('Error retrieving password credential:', error);
  });

4. 删除密码凭据

如果用户选择登出或希望删除已保存的密码凭据,可以使用 navigator.credentials.preventSilentAccess() 方法。

navigator.credentials
  .preventSilentAccess()
  .then(() => {
    console.log('Prevented silent access to password credentials');
  })
  .catch((error) => {
    console.error('Error preventing silent access:', error);
  });

5. new PasswordCredential() 的参数

PasswordCredential 构造函数接受一个包含以下属性的对象:

属性类型描述
idString用户的唯一标识符,通常是用户的电子邮件地址。
passwordString用户的密码。
nameString用户的姓名。
iconURLString用户的头像 URL。

ChromePasswordCredential 提供了一种方便且安全的方式来处理用户的密码凭据。通过有效使用这一功能,开发者可以提供更加流畅和安全的用户体验,同时避免了明文存储和传输密码的潜在风险。在开发中,务必结合最佳实践来使用这一功能,以确保用户数据的隐私和安全性。