集成小部件

轻松将Passly集成到您的网站

快速开始

只需三行即可在您的网站上显示生成器。

加载脚本

一个标签，可放在页面任何位置。无任何依赖。

放置容器

在需要显示生成器的位置放一个 class 为 passly-widget 的 div。

完成

小组件会自动初始化，包括之后动态添加的元素。

<!-- Passly Widget -->
<script src="https://passly.fr/widget.js" ></script>

<div class="passly-widget"
     data-length="16"
     data-format="random"
     data-lang="zh"></div>
实时预览

使用示例

基础小组件

使用默认选项的简单小组件

<div class="passly-widget"></div>
实时预览

强密码

生成包含所有字符类型的 24 位密码

<div class="passly-widget"
     data-length="24"
     data-special="true"
     data-exclude-similar="true"></div>
实时预览

与表单集成

自动填充表单字段

<input type="text" id="my-password-field">

<div class="passly-widget"
     data-target="#my-password-field"
     data-length="20"></div>
实时预览

易记的密码短语

生成便于记忆的密码短语

<div class="passly-widget"
     data-format="passphrase"></div>
实时预览

小部件选项

行为

属性类型默认值说明
data-formatstringrandomrandom、pronounceable 或 passphrase
data-lengthinteger16密码长度（4–128）
data-wordsinteger4密码短语：单词数量（3–10）
data-separatorstring-密码短语：单词之间的分隔符
data-auto-generatebooleantrue页面加载后立即生成密码

密码构成

属性类型默认值说明
data-lowercasebooleantrue小写字母 (a-z)
data-uppercasebooleantrue大写字母 (A-Z)
data-digitsbooleantrue数字 (0-9)
data-specialbooleanfalse特殊字符 (!@#$...)
data-exclude-similarbooleanfalse排除相似字符 (il1Lo0O)

外观与集成

属性类型默认值说明
data-targetstring—需自动填充字段的 CSS 选择器
data-langstringfr小组件语言（fr, en, es, de, it, pt, nl, ru, ja, zh）
data-classstring—附加的 CSS 类（主题、变体）
data-apistring脚本来源覆盖 API 地址 — 请设置在 <script> 标签上

开箱即用的主题

选择一个主题即可查看预览并获取其样式表。

.passly-widget-wrapper.blue-theme {
    --passly-primary: #2563EB;
    --passly-primary-hover: #1D4ED8;
    --passly-primary-light: #3B82F6;
    --passly-bg: #111827;
    --passly-bg-card: #1F2937;
    --passly-text: #F3F4F6;
    --passly-text-light: #9CA3AF;
    --passly-border: #374151;

    background: linear-gradient(135deg, var(--passly-bg), var(--passly-bg-card)) !important;
    border: 1px solid var(--passly-primary) !important;
}

.passly-widget-wrapper.blue-theme .passly-generate-btn {
    background: linear-gradient(135deg, var(--passly-primary), var(--passly-primary-hover)) !important;
}

CSS 自定义

使用可用的 CSS 变量和类，完全自定义小组件的外观：

「技术支持 Passly」标识无法被隐藏：它会自动恢复。不过您可以自由设置它的样式。

交互式主题生成器

实时创建您自己的自定义主题：

颜色

尺寸与排版

预设主题

.passly-widget-wrapper.custom-theme {
    --passly-primary: #DC2626;
    --passly-primary-hover: #c81212;
    --passly-primary-light: #f03a3a;
    --passly-bg: #1A1A1A;
    --passly-text: #E8E8E8;
    --passly-border: #2A2A2A;
    --passly-radius: 10px;
    --passly-font-size: 15px;
}

高级集成

// Le widget s'initialise seul ; il suffit d'écouter ses événements.
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.passly-widget').forEach((widget) => {
        widget.addEventListener('passly:generated', (event) => {
            console.log('Mot de passe généré :', event.detail.password);
            console.log('Entropie :', event.detail.entropyBits, 'bits');
        });
    });
});

// Création dynamique
function createWidget(container) {
    const widget = document.createElement('div');
    widget.className = 'passly-widget';
    widget.dataset.length = '20';
    widget.dataset.special = 'true';
    container.appendChild(widget);

    // Facultatif : l'observateur interne détecte déjà les nouveaux nœuds.
    window.PasslyWidget?.init(container);
}