Credential Management演示 - 自动登录与存储
使用PasswordCredential和FederatedCredential存储用户登录信息,并实现一键自动登录。
UD5工具箱
安全地从设备联系人中选择并获取姓名、电话、邮箱、地址等信息
点击标签选择需要获取的联系人信息字段(至少选一项)
一次选择多个联系人
配置属性后点击"选择联系人"按钮
选择结果将在此展示
用户必须明确选择联系人,网站无法静默读取通讯录。每次选择都需要用户手动确认,确保隐私不被侵犯。
目前主要在Chrome for Android上可用(v80+),需要HTTPS安全上下文。桌面端和iOS暂不支持。
API调用必须由用户手势触发(如点击按钮),防止自动弹出选择器干扰用户体验。
开发者只能获取明确请求的属性字段(name, email, tel, address, icon),最小化数据访问原则。
Contact Picker API 是一个现代的Web API,允许Web应用请求用户从设备通讯录中选择联系人,并获取用户明确授权的联系人信息(如姓名、电话号码、邮箱、地址等)。与传统的全量通讯录访问不同,该API采用"用户选择即授权"的模式,每次都需要用户主动选择具体联系人,极大地保护了用户隐私。
Contact Picker API 支持获取以下五种属性:name(姓名,含名、姓、显示名等)、email(邮箱地址列表)、tel(电话号码列表)、address(邮寄地址,含国家、城市、街道等详细字段)、icon(联系人头像图片的Blob对象)。开发者需要在调用时明确指定需要哪些属性。
目前Contact Picker API主要在Chrome for Android 80+版本上得到支持。桌面端Chrome、Firefox、Safari和Edge等浏览器尚未实现该API。此外,该API要求页面在HTTPS安全上下文中运行。您可以使用本工具顶部的状态检测来确认当前浏览器是否支持。
非常安全。Contact Picker API的设计核心就是隐私优先:1) 每次调用必须由用户手势触发(如点击按钮);2) 用户明确选择要共享的联系人,网站无法静默读取通讯录;3) 只能获取开发者预先声明的属性字段;4) 不需要任何预先权限授予,选择即授权;5) 仅在HTTPS安全上下文中可用,防止中间人攻击。
使用方式很简单:const contacts = await navigator.contacts.select(['name', 'email', 'tel'], { multiple: true });
第一个参数是需要的属性数组,第二个参数可设置是否多选。返回的contacts是一个ContactInfo对象数组,每个对象包含所请求的属性。注意必须在HTTPS环境下,且由用户手势触发调用。
可能的原因包括:1) 浏览器不支持该API(目前仅Chrome for Android 80+支持);2) 页面未使用HTTPS(非安全上下文);3) 用户拒绝了联系人选择;4) 设备上没有联系人数据。您可以在Chrome for Android上访问此页面来体验完整功能。
使用PasswordCredential和FederatedCredential存储用户登录信息,并实现一键自动登录。
将网页内容添加到浏览器的离线内容索引中,便于用户在下载页面查看。
输入服务地址与方法,构造 gRPC-Web 请求,查看二进制帧与反序列化后的响应消息。
粘贴package.json内容,与npm registry版本对比,列出过期的包和建议升级版本。
通过表单设置方法、头、体等参数,自动生成对应的 cURL 命令,方便复制执行。
拖动导出Postman集合JSON文件,浏览器中展示请求分层与细节,方便快速查阅。
演示Service Worker或简单代理拦截fetch请求并返回自定义JSON数据。
利用浏览器内置SubtleCrypto生成RSA-OAEP或RSASSA-PKCS1密钥对,并导出为JWK或PEM格式(前端安全)。
选择国家,生成符合当地格式的随机假地址,包括街道、城市、邮编和电话号码。
可视化定制弹窗样式、按钮文案和动画,生成替换原生alert的HTML/CSS/JS代码。
录制一段语音,生成带有音频波形和自定义文本的分享卡片图片。
为图片生成同时支持WebP和传统格式的<picture>标签代码,确保全浏览器兼容。
调用摄像头,通过Shape Detection API实时识别图像中的条形码或人脸位置。
在浏览器生成PGP公私钥对,用于邮件加密与签名验证演示。
输入Accept-Language标头值,按权重排序并匹配你的支持语言列表,辅助多语言应用开发。
展示国际通用哨声信号:三短三长三短求救等,可播放音频示例。
输入JSON Schema,自动渲染出一个美观可用的表单界面(演示)。
粘贴Base64编码的SAML Response,解码并格式化显示其中的属性、断言与签名信息,便于调试。
生成ECDSA或RSA密钥对,对文本签名并使用公钥验证,演示Web Crypto API的签名能力。
标准急救包推荐清单,勾选已有并标记过期日期,提醒更换,居家安全必备。
将复杂嵌套JSON数组转为CSV,支持选择性展平列和排除字段,适配数据导出需求。
快速创建FAQ样式的手风琴列表,填入问题与答案,生成HTML/CSS/JS交互代码。
输入meta标签属性,模拟显示Twitter分享卡片的大图或小图样式,检验标记是否正确。
输入名字,生成带有首字母的彩色圆形头像,适合无头像用户使用。
创建左右布局的对话气泡样式,配置尾巴方向和颜色,生成聊天组件。
生成与原生HTML5音频播放器配套的音频频谱可视化组件代码。
随机生成包含日期、天气、遭遇和发现的虚构探险日志段落,激发创意写作。
录入自己的衣物,随机组合生成一套穿搭建议,解决明天穿啥问题。
通过下拉选择宽度、高度、分辨率等,逻辑组合并生成完整的@media规则。
上传SVG,自动生成多种尺寸的透明PNG表情包,适合聊天分享。