PasswordSaveSDK

一个轻量级的JavaScript SDK，用于在网页输入密码时弹出保存密码的提示框，提供类似于浏览器内置密码保存功能的用户体验。

功能特点

• 自动检测表单中的用户名和密码字段
• 表单提交后弹出密码保存提示框
• 支持输入密码时显示已保存的密码建议
• 允许通过点击选择填充账户和密码
• 支持自定义提示框位置、样式和文本
• 提供"不再提示"选项
• 使用localStorage安全存储密码
• 提供完整的API接口用于管理保存的密码

安装方法

直接引入

将password-save-sdk.js文件下载到您的项目中，然后在HTML文件中引入：

<script src="path/to/password-save-sdk.js"></script>

npm安装（未来支持）

# 暂未发布到npm
# npm install password-save-sdk --save

基本使用

// 初始化SDK（默认配置）
const passwordSDK = new PasswordSaveSDK();
passwordSDK.init();

高级配置

// 自定义配置
const passwordSDK = new PasswordSaveSDK({
  position: 'bottom', // 提示框位置：'top', 'bottom', 'left', 'right', 'center'
  className: 'password-save-prompt', // 自定义样式类名
  message: '是否保存此密码？', // 自定义提示消息
  saveButtonText: '保存', // 保存按钮文本
  cancelButtonText: '取消', // 取消按钮文本
  neverButtonText: '不再提示', // 不再提示按钮文本
  autoHide: 0, // 自动消失时间(毫秒)，0表示不自动消失
  passwordSuggestions: {
    enabled: true, // 是否启用密码建议功能
    maxSuggestions: 5, // 最多显示的密码建议数量
    showUsernames: true // 是否显示用户名
  },
  onSave: function(passwordData) {
    console.log('密码已保存:', passwordData);
  },
  onCancel: function() {
    console.log('用户取消保存密码');
  },
  onNever: function() {
    console.log('用户选择不再提示');
  },
  onFillCredentials: function(credentials) {
    console.log('用户选择填充凭据:', credentials);
  }
});

passwordSDK.init();

配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | position | String | 'bottom' | 提示框位置，可选值：'top', 'bottom', 'left', 'right', 'center' | | className | String | 'password-save-prompt' | 自定义样式类名，可用于覆盖默认样式 | | message | String | '是否保存此密码？' | 提示消息文本 | | saveButtonText | String | '保存' | 保存按钮文本 | | cancelButtonText | String | '取消' | 取消按钮文本 | | neverButtonText | String/Boolean | '不再提示' | 不再提示按钮文本，设为false可隐藏此按钮 | | autoHide | Number | 0 | 自动消失时间(毫秒)，0表示不自动消失 | | passwordSuggestions | Object | {enabled: true, maxSuggestions: 5, showUsernames: true} | 密码建议功能配置 | | passwordSuggestions.enabled | Boolean | true | 是否启用密码建议功能 | | passwordSuggestions.maxSuggestions | Number | 5 | 最多显示的密码建议数量 | | passwordSuggestions.showUsernames | Boolean | true | 是否显示用户名 | | onSave | Function | null | 密码保存成功后的回调函数 | | onCancel | Function | null | 取消保存后的回调函数 | | onNever | Function | null | 选择不再提示后的回调函数 | | onFillCredentials | Function | null | 用户选择填充凭据后的回调函数 |

API接口

init()

初始化SDK，添加事件监听

passwordSDK.init();

getSavedPasswords()

获取所有已保存的密码

const passwords = passwordSDK.getSavedPasswords();
console.log(passwords);
// 输出示例: [{username: 'user1', password: '***', domain: 'example.com', savedAt: '2023-05-01T12:00:00.000Z'}]

clearSavedPasswords()

清除所有已保存的密码

passwordSDK.clearSavedPasswords();

resetNeverPrompt()

重置"不再提示"设置

passwordSDK.resetNeverPrompt();

destroy()

销毁SDK实例，移除事件监听和提示框

passwordSDK.destroy();

fillCredentials(credentials)

手动填充用户名和密码到表单

passwordSDK.fillCredentials({
  username: '[email protected]',
  password: 'securepassword'
});

showPasswordSuggestions()

手动显示密码建议

passwordSDK.showPasswordSuggestions();

安全性说明

• 密码使用localStorage存储，仅在用户当前设备上可见
• 出于安全考虑，建议在实际生产环境中对密码进行加密存储
• 本SDK仅提供基本的密码保存功能，如需更高级的安全特性，请自行扩展或使用专业的密码管理解决方案

浏览器兼容性

• Chrome (推荐最新版)
• Firefox (推荐最新版)
• Safari (推荐最新版)
• Edge (推荐最新版)
• IE11 (部分功能可能受限)

开发说明

目录结构

passwordsdk/
  ├── password-save-sdk.js  # 主SDK文件
  ├── example.html          # 使用示例
  └── README.md             # 说明文档

自定义样式

您可以通过覆盖CSS类来自定义提示框样式：

/* 覆盖默认样式示例 */
.password-save-prompt {
  background-color: #f5f5f5;
  border: 2px solid #333;
  /* 更多自定义样式... */
}

示例演示

打开example.html文件可以查看完整的使用演示，包括：

• 登录表单示例
• 密码保存提示功能
• API操作演示（查看、清除已保存密码等）
• 详细的使用文档

注意事项

• 本SDK主要用于演示和学习目的，在实际生产环境中请考虑更多的安全因素
• 由于浏览器安全策略的限制，某些功能可能在不同浏览器中表现不一致
• 建议在使用前进行充分测试，特别是在目标用户群体常用的浏览器上

License

MIT

更新日志

v1.1.0 (2023-05-10)

• 添加密码建议功能
• 支持输入密码时显示已保存的密码
• 允许通过点击选择填充账户和密码
• 增加新的配置选项和API接口

v1.0.0 (2023-05-01)

• 初始版本发布
• 支持密码保存提示功能
• 提供完整的API接口
• 支持自定义配置