diff --git a/views/user/info.php b/views/user/info.php
index 13d489d..29dfb57 100644
--- a/views/user/info.php
+++ b/views/user/info.php
@@ -14,6 +14,7 @@
 /* @var $is_otp_enabled bool */
 
 use app\assets\FontAwesomeAsset;
+use app\assets\SimpleWebAuthnBrowser;
 use app\models\User;
 use app\utils\FileSizeHelper;
 use app\utils\IPLocation;
@@ -33,6 +34,7 @@ use yii\web\View;
 $this->title = '个人设置';
 FontAwesomeAsset::register($this);
 JqueryAsset::register($this);
+SimpleWebAuthnBrowser::register($this);
 $this->registerCssFile('@web/css/user-info.css');
 $details = IPLocation::getDetails($model->last_login_ip); // IP LOCATION
 
@@ -67,63 +69,63 @@ $user = new User();
 $darkMode = Yii::$app->user->identity->dark_mode;
 ?>
 
-    <div class="user-info">
+<div class="user-info">
 
-        <h1><?= Html::encode($this->title) ?></h1>
+    <h1><?= Html::encode($this->title) ?></h1>
 
-        <div class="user-profile">
-            <div class="avatar-container">
-                <?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'class' => 'avatar']) ?>
-                <div class="avatar-overlay">
-                    <i class="fa-solid fa-pen-to-square"></i>
-                </div>
+    <div class="user-profile">
+        <div class="avatar-container">
+            <?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'class' => 'avatar']) ?>
+            <div class="avatar-overlay">
+                <i class="fa-solid fa-pen-to-square"></i>
             </div>
-            <div class="user-details">
-                <div class="user-info">
-                    <p id="p-username" class="editable-username" title="用户昵称(用户名)">
-                        <?= Html::encode($model->name . '(' . $model->username. ')') ?>
-                        <i class="fa-solid fa-pen-to-square edit-icon"></i>
-                    </p>
-                    <p><?= Html::encode($model->email) ?></p>
-                    <p>
-                        <?php
-                        if ($model->role == 'user') {
-                            echo '普通用户';
-                        } elseif ($model->role == 'admin') {
-                            echo '管理员';
-                        } else {
-                            echo Html::encode($model->role);
-                        }
-                        ?>
-                    </p>
-                </div>
-                <div class="user-login-info">
-                    <div class="user-last-login">
-                        <i class="fa-solid fa-clipboard-user"></i>
-                        <div class="login-info-dv">
-                            <p class="user-login-info-title">上次登录时间</p>
-                            <p class="user-login-info-content"><?= Html::encode($model->last_login . ' (CST)') ?></p>
-                        </div>
+        </div>
+        <div class="user-details">
+            <div class="user-info">
+                <p id="p-username" class="editable-username" title="用户昵称(用户名)">
+                    <?= Html::encode($model->name . '(' . $model->username . ')') ?>
+                    <i class="fa-solid fa-pen-to-square edit-icon"></i>
+                </p>
+                <p><?= Html::encode($model->email) ?></p>
+                <p>
+                    <?php
+                    if ($model->role == 'user') {
+                        echo '普通用户';
+                    } elseif ($model->role == 'admin') {
+                        echo '管理员';
+                    } else {
+                        echo Html::encode($model->role);
+                    }
+                    ?>
+                </p>
+            </div>
+            <div class="user-login-info">
+                <div class="user-last-login">
+                    <i class="fa-solid fa-clipboard-user"></i>
+                    <div class="login-info-dv">
+                        <p class="user-login-info-title">上次登录时间</p>
+                        <p class="user-login-info-content"><?= Html::encode($model->last_login . ' (CST)') ?></p>
                     </div>
-                    <div class="user-last-login-ip">
-                        <i class="fa-solid fa-location-dot"></i>
-                        <div class="login-info-dv">
-                            <p class="user-login-info-title">上次登录IP</p>
-                            <p class="user-login-info-content">
-                                <?= Html::encode($model->last_login_ip) ?>
-                                <?= Html::encode(($details === null) ? '' : '(' . ($details->bogon ? ('Bogon IP') : ($details->city . ', ' . $details->country)) . ')') ?>
-                            </p>
-                        </div>
+                </div>
+                <div class="user-last-login-ip">
+                    <i class="fa-solid fa-location-dot"></i>
+                    <div class="login-info-dv">
+                        <p class="user-login-info-title">上次登录IP</p>
+                        <p class="user-login-info-content">
+                            <?= Html::encode($model->last_login_ip) ?>
+                            <?= Html::encode(($details === null) ? '' : '(' . ($details->bogon ? ('Bogon IP') : ($details->city . ', ' . $details->country)) . ')') ?>
+                        </p>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="accordion userAccordion" id="userAccordion">
-            <div class="accordion-item">
-                <h2 class="accordion-header" id="headingStorage">
-                    <button class="accordion-button <?= ($focus === 'storage') ? '' : 'collapsed' ?>"
-                            type="button" data-bs-toggle="collapse"
-                            data-bs-target="#collapseStorage" <?= ($focus === 'storage') ? 'aria-expanded="true"' : '' ?>>
+    </div>
+    <div class="accordion userAccordion" id="userAccordion">
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="headingStorage">
+                <button class="accordion-button <?= ($focus === 'storage') ? '' : 'collapsed' ?>"
+                        type="button" data-bs-toggle="collapse"
+                        data-bs-target="#collapseStorage" <?= ($focus === 'storage') ? 'aria-expanded="true"' : '' ?>>
                     <span class="accordion-storage-content">
                         <span>
                             <i class="fa-solid fa-hard-drive"></i>
@@ -133,47 +135,46 @@ $darkMode = Yii::$app->user->identity->dark_mode;
                             <?= $totalUsed_F . ' / ' . $storageLimit_F ?>
                         </span>
                     </span>
-                    </button>
-                </h2>
-                <div id="collapseStorage"
-                     class="accordion-collapse collapse  <?= ($focus === 'storage') ? 'show' : '' ?>">
-                    <div class="accordion-body">
-                        <div class="storage-info">
-                            <div class="storage-columns">
-                                <div class="storage-usage" style="width: 27%">
-                                    <p>当前已使用容量</p>
-                                    <span id="current"><?= $totalUsed_F ?>
+                </button>
+            </h2>
+            <div id="collapseStorage"
+                 class="accordion-collapse collapse  <?= ($focus === 'storage') ? 'show' : '' ?>">
+                <div class="accordion-body">
+                    <div class="storage-info">
+                        <div class="storage-columns">
+                            <div class="storage-usage" style="width: 27%">
+                                <p>当前已使用容量</p>
+                                <span id="current"><?= $totalUsed_F ?>
                                 </span>
-                                    <span style="font-size: 0.9rem;">/ <?= $storageLimit_F ?></span>
+                                <span style="font-size: 0.9rem;">/ <?= $storageLimit_F ?></span>
+                            </div>
+                            <div style="width: 47%">
+                                <p><?= $totalUsedPercent ?>% 已用</p>
+                                <div class="progress">
+                                    <div class="progress-bar" role="progressbar"
+                                         style="width: <?= $usedPercent ?>%;background-color: rgb(52,131,250)"
+                                         aria-valuenow="<?= $usedPercent ?>"
+                                         aria-valuemin="0" aria-valuemax="100"></div>
+                                    <div class="progress-bar" role="progressbar"
+                                         style="width: <?= $vaultUsedPercent ?>%;background-color: rgb(196,134,0)"
+                                         aria-valuenow="<?= $vaultUsedPercent ?>"
+                                         aria-valuemin="0" aria-valuemax="100"></div>
                                 </div>
-                                <div style="width: 47%">
-                                    <p><?= $totalUsedPercent ?>% 已用</p>
-                                    <div class="progress">
-                                        <div class="progress-bar" role="progressbar"
-                                             style="width: <?= $usedPercent ?>%;background-color: rgb(52,131,250)"
-                                             aria-valuenow="<?= $usedPercent ?>"
-                                             aria-valuemin="0" aria-valuemax="100"></div>
-                                        <div class="progress-bar" role="progressbar"
-                                             style="width: <?= $vaultUsedPercent ?>%;background-color: rgb(196,134,0)"
-                                             aria-valuenow="<?= $vaultUsedPercent ?>"
-                                             aria-valuemin="0" aria-valuemax="100"></div>
-                                    </div>
-                                    <div class="storage-legend" style="color: rgb(140,139,139)">
-                                        <div class="legend-item">
+                                <div class="storage-legend" style="color: rgb(140,139,139)">
+                                    <div class="legend-item">
                                             <span class="legend-color"
                                                   style="background-color: rgb(52,131,250);"></span>
-                                            <span>网盘已用空间</span>
-                                            <span style="margin-left: auto;"><?= $usedSpace_F ?>
-                                                <?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['home/index']) ?>
+                                        <span>网盘已用空间</span>
+                                        <span style="margin-left: auto;"><?= $usedSpace_F ?>
+                                            <?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['home/index']) ?>
                                         </span>
-                                        </div>
-                                        <div class="legend-item">
-                                            <span class="legend-color" style="background-color: rgb(196,134,0);"></span>
-                                            <span>保险箱已用空间</span>
-                                            <span style="margin-left: auto;"><?= $vaultUsedSpace_F ?>
-                                                <?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['vault/index']) ?>
+                                    </div>
+                                    <div class="legend-item">
+                                        <span class="legend-color" style="background-color: rgb(196,134,0);"></span>
+                                        <span>保险箱已用空间</span>
+                                        <span style="margin-left: auto;"><?= $vaultUsedSpace_F ?>
+                                            <?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['vault/index']) ?>
                                         </span>
-                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -181,120 +182,138 @@ $darkMode = Yii::$app->user->identity->dark_mode;
                     </div>
                 </div>
             </div>
-            <div class="accordion-item">
-                <h2 class="accordion-header" id="headingBio">
-                    <button class="accordion-button <?= ($focus === 'bio') ? '' : 'collapsed' ?>" type="button"
-                            data-bs-toggle="collapse"
-                            data-bs-target="#collapseBio" <?= ($focus === 'bio') ? 'aria-expanded="true"' : '' ?>>
-                        <i class="fa-solid fa-address-card"></i>
-                        <span>个人简介</span>
-                    </button>
-                </h2>
-                <div id="collapseBio" class="accordion-collapse collapse  <?= ($focus === 'bio') ? 'show' : '' ?>">
-                    <div class="accordion-body">
-                        <?php $form = yii\widgets\ActiveForm::begin(); ?>
-                        <?= $form->field($model, 'bio')->textarea(['rows' => 6])->label('简介') ?>
-                        <div class="form-group">
-                            <?= yii\helpers\Html::submitButton('保存', ['class' => 'btn btn-success']) ?>
-                        </div>
-                        <?php yii\widgets\ActiveForm::end(); ?>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="headingBio">
+                <button class="accordion-button <?= ($focus === 'bio') ? '' : 'collapsed' ?>" type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseBio" <?= ($focus === 'bio') ? 'aria-expanded="true"' : '' ?>>
+                    <i class="fa-solid fa-address-card"></i>
+                    <span>个人简介</span>
+                </button>
+            </h2>
+            <div id="collapseBio" class="accordion-collapse collapse  <?= ($focus === 'bio') ? 'show' : '' ?>">
+                <div class="accordion-body">
+                    <?php $form = yii\widgets\ActiveForm::begin(); ?>
+                    <?= $form->field($model, 'bio')->textarea(['rows' => 6])->label('简介') ?>
+                    <div class="form-group">
+                        <?= yii\helpers\Html::submitButton('保存', ['class' => 'btn btn-success']) ?>
                     </div>
+                    <?php yii\widgets\ActiveForm::end(); ?>
                 </div>
             </div>
-            <div class="accordion-item">
-                <h2 class="accordion-header" id="headingPassword">
-                    <button class="accordion-button <?= ($focus === 'password') ? '' : 'collapsed' ?>" type="button"
-                            data-bs-toggle="collapse"
-                            data-bs-target="#collapsePassword" <?= ($focus === 'password') ? 'aria-expanded="true"' : '' ?>>
-                        <i class="fa-solid fa-key"></i>
-                        <span>修改密码</span>
-                    </button>
-                </h2>
-                <div id="collapsePassword"
-                     class="accordion-collapse collapse <?= ($focus === 'password') ? 'show' : '' ?>">
-                    <div class="accordion-body">
-                        <?php $form = ActiveForm::begin([
-                            'action' => Url::to(['user/change-password']),
-                            'method' => 'post'
-                        ]); ?>
-                        <?= $form->field($model, 'oldPassword')->passwordInput()->label('原密码') ?>
-                        <?= $form->field($model, 'newPassword')->passwordInput()->label('新密码') ?>
-                        <?= $form->field($model, 'newPasswordRepeat')->passwordInput()->label('重复新密码') ?>
-                        <div class="form-group">
-                            <?= Html::submitButton('修改密码', ['class' => 'btn btn-success']) ?>
-                        </div>
-                        <?php ActiveForm::end(); ?>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="headingPassword">
+                <button class="accordion-button <?= ($focus === 'password') ? '' : 'collapsed' ?>" type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapsePassword" <?= ($focus === 'password') ? 'aria-expanded="true"' : '' ?>>
+                    <i class="fa-solid fa-key"></i>
+                    <span>修改密码</span>
+                </button>
+            </h2>
+            <div id="collapsePassword"
+                 class="accordion-collapse collapse <?= ($focus === 'password') ? 'show' : '' ?>">
+                <div class="accordion-body">
+                    <?php $form = ActiveForm::begin([
+                        'action' => Url::to(['user/change-password']),
+                        'method' => 'post'
+                    ]); ?>
+                    <?= $form->field($model, 'oldPassword')->passwordInput()->label('原密码') ?>
+                    <?= $form->field($model, 'newPassword')->passwordInput()->label('新密码') ?>
+                    <?= $form->field($model, 'newPasswordRepeat')->passwordInput()->label('重复新密码') ?>
+                    <div class="form-group">
+                        <?= Html::submitButton('修改密码', ['class' => 'btn btn-success']) ?>
                     </div>
+                    <?php ActiveForm::end(); ?>
                 </div>
             </div>
-            <div class="accordion-item">
-                <h2 class="accordion-header" id="headingAdvanced">
-                    <button class="accordion-button <?= ($focus === 'advanced') ? '' : 'collapsed' ?>" type="button"
-                            data-bs-toggle="collapse"
-                            data-bs-target="#collapseAdvanced" <?= ($focus === 'advanced') ? 'aria-expanded="true"' : '' ?>>
-                        <i class="fa-solid fa-flask"></i>
-                        <span>高级功能</span>
-                    </button>
-                </h2>
-                <div id="collapseAdvanced"
-                     class="accordion-collapse collapse <?= ($focus === 'advanced') ? 'show' : '' ?>">
-                    <div class="accordion-body">
-                        <h4>二步验证</h4>
-                        <hr>
-                        <p>使用除您密码之外的第二种方法来增强您账号的安全性。</p>
-                        <ul class="list-group list-group-flush">
-                            <li class="list-group-item">
-                                <h5>
-                                    <i class="fa-solid fa-shield-halved"></i>
-                                    TOTP (Authenticator app)
-                                </h5>
-                                <div>
-                                    <div class="form-check form-switch">
-                                        <input class="form-check-input" type="checkbox" role="switch"
-                                               id="totp-enabled" <?= $is_otp_enabled ? 'checked' : '' ?>>
-                                        <label class="form-check-label" for="totp-enabled" data-bs-toggle="modal"
-                                               data-bs-target="#totpSetupModal">启用 TOTP</label>
-                                    </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="headingAdvanced">
+                <button class="accordion-button <?= ($focus === 'advanced') ? '' : 'collapsed' ?>" type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseAdvanced" <?= ($focus === 'advanced') ? 'aria-expanded="true"' : '' ?>>
+                    <i class="fa-solid fa-flask"></i>
+                    <span>高级功能</span>
+                </button>
+            </h2>
+            <div id="collapseAdvanced"
+                 class="accordion-collapse collapse <?= ($focus === 'advanced') ? 'show' : '' ?>">
+                <div class="accordion-body">
+                    <h4>二步验证</h4>
+                    <hr>
+                    <p>使用除您密码之外的第二种方法来增强您账号的安全性。</p>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                            <h5>
+                                <i class="fa-solid fa-shield-halved"></i>
+                                TOTP (Authenticator app)
+                            </h5>
+                            <div>
+                                <div class="form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" role="switch"
+                                           id="totp-enabled" <?= $is_otp_enabled ? 'checked' : '' ?>>
+                                    <label class="form-check-label" for="totp-enabled" data-bs-toggle="modal"
+                                           data-bs-target="#totpSetupModal">启用 TOTP</label>
                                 </div>
-                            </li>
-                            <li class="list-group-item">
-                                <h5>
-                                    <i class="fa-solid fa-user-lock"></i>
-                                    备用码
-                                </h5>
-                                <div>
-                                    <?= Html::a('获取恢复代码(请妥善保存)', Url::to(['user/download-recovery-codes']), ['class' => 'btn btn-outline-primary btn-sm', 'id' => 'generate-backup-codes']) ?>
-                                </div>
-                            </li>
-                        </ul>
-                        <br>
+                            </div>
+                        </li>
+                        <li class="list-group-item">
+                            <h5>
+                                <i class="fa-solid fa-user-lock"></i>
+                                备用码
+                            </h5>
+                            <div>
+                                <?= Html::a('获取恢复代码(请妥善保存)', Url::to(['user/download-recovery-codes']), ['class' => 'btn btn-outline-primary btn-sm', 'id' => 'generate-backup-codes']) ?>
+                            </div>
+                        </li>
+                        <li class="list-group-item">
+                            <h5>
+                                <i class="fa-solid fa-key"></i>
+                                Passwordless验证 (Webauthn) (BETA)
+                            </h5>
+                            <div>
+                                <?= Html::button('Add', ['id' => "webauthn_add", 'type' => 'button', 'class' => 'btn btn-primary btn-sm']) ?>
+                                <?= Html::button('Verify', ['id' => "webauthn_verify", 'type' => 'button', 'class' => 'btn btn-primary btn-sm']) ?>
+                                <?= Html::button('Detail', ['id' => "webauthn_detail", 'type' => 'button', 'class' => 'btn btn-primary btn-sm']) ?>
+                            </div>
+                            <div class="alert alert-success" role="alert" hidden>
+                                <span id="webauthn_success"></span>
+                            </div>
+                            <div class="alert alert-danger" role="alert" hidden>
+                                <span id="webauthn_error"></span>
+                            </div>
+                        </li>
+                    </ul>
+                    <br>
 
-                        <h4>主题</h4>
-                        <hr>
-                        <div class="form-check form-switch">
-                            <input class="form-check-input" type="checkbox" role="switch"
-                                   id="useDarkTheme" <?= $darkMode === 0 ? '' : ($darkMode === 1 ? 'checked' : 'disabled') ?>>
-                            <label class="form-check-label" for="useDarkTheme">启用夜间模式</label>
-                        </div>
-                        <div class="form-check form-switch">
-                            <input class="form-check-input" type="checkbox" role="switch"
-                                   id="followSystemTheme" <?= $darkMode === 2 ? 'checked' : '' ?>>
-                            <label class="form-check-label" for="followSystemTheme">跟随设备主题</label>
-                        </div>
-                        <br>
-
-                        <h4>删除账户</h4>
-                        <hr>
-                        <p>这个操作不支持撤回，请谨慎操作。</p>
-                        <button type="button" class="btn btn-danger" data-bs-toggle="modal"
-                                data-bs-target="#deleteAccountModal">
-                            删除账户
-                        </button>
+                    <h4>主题</h4>
+                    <hr>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch"
+                               id="useDarkTheme" <?= $darkMode === 0 ? '' : ($darkMode === 1 ? 'checked' : 'disabled') ?>>
+                        <label class="form-check-label" for="useDarkTheme">启用夜间模式</label>
                     </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch"
+                               id="followSystemTheme" <?= $darkMode === 2 ? 'checked' : '' ?>>
+                        <label class="form-check-label" for="followSystemTheme">跟随设备主题</label>
+                    </div>
+                    <br>
+
+                    <h4>删除账户</h4>
+                    <hr>
+                    <p>这个操作不支持撤回，请谨慎操作。</p>
+                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
+                            data-bs-target="#deleteAccountModal">
+                        删除账户
+                    </button>
                 </div>
             </div>
         </div>
     </div>
+</div>
 <?php
 // 修改用户头像的Modal
 Modal::begin([
@@ -355,47 +374,47 @@ Modal::begin([
     'size' => 'model-xl',
 ]);
 ?>
-    <div class="row">
-        <div class="col-md-6 text-center center">
-            <img src="<?= is_null($totp_secret) ? '' : $result->getDataUri() ?>" alt="QR Code" class="img-fluid">
-        </div>
-        <div class="col-md-6">
-            <p>使用兼容TOTP的应用程序扫描左侧二维码以添加二步验证</p>
-            <p>推荐以下二步验证器：:</p>
-            <ul>
-                <li>
-                    <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US">Google
-                        Authenticator</a></li>
-                <li><a href="https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=en_US">Microsoft
-                        Authenticator</a></li>
-                <li><a href="https://play.google.com/store/apps/details?id=com.authy.authy&hl=en">Authy</a></li>
-                <!--这是广告吗-->
-                <li><a href="https://git.chenx221.cyou/chenx221/OTP/releases">自制TOTP验证器(Windows)</a></li>
-                <!-- Add more applications as needed -->
-            </ul>
-            <div class="input-group mb-3">
-                <label for="totp_secret">无法扫描?使用下面的密钥来添加</label>
-                <input type="text" class="form-control" value="<?= $totp_secret ?>" id="totp_secret" readonly>
-                <button class="btn btn-outline-secondary" type="button"
-                        onclick="navigator.clipboard.writeText('<?= $totp_secret ?>')">Copy
-                </button>
-            </div>
-            <?php
-            if (!$is_otp_enabled) {
-                $form = ActiveForm::begin([
-                    'action' => ['user/setup-two-factor'],
-                    'method' => 'post'
-                ]);
-                echo Html::activeHiddenInput($user, 'otp_secret', ['value' => $totp_secret]);
-                echo $form->field($user, 'totp_input')->textInput()->label('最后一步! 输入TOTP应用程序上显示的密码以启用二步验证');
-                echo Html::submitButton('启用二步验证', ['class' => 'btn btn-primary']);
-                ActiveForm::end();
-            }
-            ?>
-        </div>
+<div class="row">
+    <div class="col-md-6 text-center center">
+        <img src="<?= is_null($totp_secret) ? '' : $result->getDataUri() ?>" alt="QR Code" class="img-fluid">
     </div>
+    <div class="col-md-6">
+        <p>使用兼容TOTP的应用程序扫描左侧二维码以添加二步验证</p>
+        <p>推荐以下二步验证器：:</p>
+        <ul>
+            <li>
+                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US">Google
+                    Authenticator</a></li>
+            <li><a href="https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=en_US">Microsoft
+                    Authenticator</a></li>
+            <li><a href="https://play.google.com/store/apps/details?id=com.authy.authy&hl=en">Authy</a></li>
+            <!--这是广告吗-->
+            <li><a href="https://git.chenx221.cyou/chenx221/OTP/releases">自制TOTP验证器(Windows)</a></li>
+            <!-- Add more applications as needed -->
+        </ul>
+        <div class="input-group mb-3">
+            <label for="totp_secret">无法扫描?使用下面的密钥来添加</label>
+            <input type="text" class="form-control" value="<?= $totp_secret ?>" id="totp_secret" readonly>
+            <button class="btn btn-outline-secondary" type="button"
+                    onclick="navigator.clipboard.writeText('<?= $totp_secret ?>')">Copy
+            </button>
+        </div>
+        <?php
+        if (!$is_otp_enabled) {
+            $form = ActiveForm::begin([
+                'action' => ['user/setup-two-factor'],
+                'method' => 'post'
+            ]);
+            echo Html::activeHiddenInput($user, 'otp_secret', ['value' => $totp_secret]);
+            echo $form->field($user, 'totp_input')->textInput()->label('最后一步! 输入TOTP应用程序上显示的密码以启用二步验证');
+            echo Html::submitButton('启用二步验证', ['class' => 'btn btn-primary']);
+            ActiveForm::end();
+        }
+        ?>
+    </div>
+</div>
 <?php
 
 Modal::end();
-$this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
-?>
\ No newline at end of file
+$this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class, SimpleWebAuthnBrowser::class], 'position' => View::POS_END]);
+?>
diff --git a/web/js/user-info.js b/web/js/user-info.js
index d4dca7e..cc6250b 100644
--- a/web/js/user-info.js
+++ b/web/js/user-info.js
@@ -41,4 +41,121 @@ document.querySelector('.avatar-container').addEventListener('click', function (
 document.querySelector('.editable-username').addEventListener('click', function () {
     // 在这里添加你的代码来显示一个模态框或其他你想要的东西
     $('#changeAccountName').modal('show');
+});
+
+// WebAuthn registration #BEGIN
+const { startRegistration } = SimpleWebAuthnBrowser;
+
+// <button>
+const elemBegin = document.getElementById('webauthn_add');
+// <span>/<p>/etc...
+const elemSuccess = document.getElementById('webauthn_success');
+// <span>/<p>/etc...
+const elemError = document.getElementById('webauthn_error');
+
+// Start registration when the user clicks a button
+elemBegin.addEventListener('click', async () => {
+    // Reset success/error messages
+    elemSuccess.innerHTML = '';
+    elemError.innerHTML = '';
+    elemSuccess.parentElement.hidden = true;
+    elemError.parentElement.hidden = true;
+
+    // GET registration options from the endpoint that calls
+    const resp = await fetch('index.php?r=user%2Fcreate-credential-options');
+
+    let attResp;
+    try {
+        // Pass the options to the authenticator and wait for a response
+        attResp = await startRegistration(await resp.json());
+    } catch (error) {
+        // Some basic error handling
+        if (error.name === 'InvalidStateError') {
+            elemError.innerText = 'Error: Authenticator was probably already registered by user';
+        } else {
+            elemError.innerText = error;
+        }
+        elemError.parentElement.hidden = false;
+        throw error;
+    }
+    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+    // POST the response to the endpoint that calls
+    const verificationResp = await fetch('index.php?r=user%2Fcreate-credential', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrfToken
+        },
+        body: JSON.stringify(attResp),
+    });
+
+    // Wait for the results of verification
+    const verificationJSON = await verificationResp.json();
+
+    // Show UI appropriate for the `verified` status
+    if (verificationJSON && verificationJSON.verified) {
+        elemSuccess.innerHTML = 'Success!';
+        elemSuccess.parentElement.hidden = false;
+    } else {
+        elemError.innerHTML = `Oh no, something went wrong! Response: <pre>${JSON.stringify(
+            verificationJSON,
+        )}</pre>`;
+        elemError.parentElement.hidden = false;
+    }
+});
+
+const { startAuthentication } = SimpleWebAuthnBrowser;
+
+// <button>
+const elemBegin_v = document.getElementById('webauthn_verify');
+
+// Start authentication when the user clicks a button
+elemBegin_v.addEventListener('click', async () => {
+    // Reset success/error messages
+    elemSuccess.innerHTML = '';
+    elemError.innerHTML = '';
+    elemSuccess.parentElement.hidden = true;
+    elemError.parentElement.hidden = true;
+
+    // GET authentication options from the endpoint that calls
+    // @simplewebauthn/server -> generateAuthenticationOptions()
+    const resp = await fetch('index.php?r=user%2Frequest-assertion-options');
+
+    let asseResp;
+    try {
+        // Pass the options to the authenticator and wait for a response
+        asseResp = await startAuthentication(await resp.json());
+    } catch (error) {
+        // Some basic error handling
+        elemError.innerText = error;
+        elemError.parentElement.hidden = false;
+        throw error;
+    }
+    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+    // POST the response to the endpoint that calls
+    // @simplewebauthn/server -> verifyAuthenticationResponse()
+    const verificationResp = await fetch('index.php?r=user%2Fverify-assertion', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrfToken
+        },
+        body: JSON.stringify(asseResp),
+    });
+
+    // Wait for the results of verification
+    const verificationJSON = await verificationResp.json();
+
+    // Show UI appropriate for the `verified` status
+    if (verificationJSON && verificationJSON.verified) {
+        elemSuccess.innerHTML = 'Success!';
+        elemSuccess.parentElement.hidden = false;
+
+    } else {
+        elemError.innerHTML = `Oh no, something went wrong! Response: <pre>${JSON.stringify(
+            verificationJSON,
+        )}</pre>`;
+        elemError.parentElement.hidden = false;
+    }
 });
\ No newline at end of file