Web Authn(2.5/3)

实现用户信息前端的对webauthn的验证设备管理
*使用pjax动态刷新内容

views/user/_creIndex.php

@@ -0,0 +1,38 @@
+<?php
+/** @var ActiveDataProvider $dataProvider */
+
+use yii\bootstrap5\Html;
+use yii\data\ActiveDataProvider;
+use yii\grid\ActionColumn;
+use yii\grid\GridView;
+echo '<div id="pjax-container">';
+echo GridView::widget([
+    'dataProvider' => $dataProvider,
+    'layout' => "{items}",
+    'columns' => [
+        [
+            'attribute' => 'name',
+            'label' => '设备名',
+        ],
+        [
+            'attribute' => 'public_key_credential_id',
+            'label' => '公钥凭证ID',
+        ],
+        [
+            'class' => ActionColumn::class,
+            'template' => '{delete}',
+            'buttons' => [
+                'delete' => function ($url, $model, $key) {
+                    return Html::a('<i class="fa-solid fa-trash"></i>', ['credential-delete', 'id' => $model->id], [
+                        'data' => [
+                            'confirm' => '你确定要删除这个项目吗?',
+                            'method' => 'post',
+                            'pjax' => 1,
+                        ],
+                    ]);
+                },
+            ],
+        ],
+    ],
+]);
+echo '</div>';

views/user/info.php

@@ -15,6 +15,7 @@
 
 use app\assets\FontAwesomeAsset;
 use app\assets\SimpleWebAuthnBrowser;
+use app\models\PublicKeyCredentialSourceRepository;
 use app\models\User;
 use app\utils\FileSizeHelper;
 use app\utils\IPLocation;
@@ -27,9 +28,13 @@ use Endroid\QrCode\Writer\PngWriter;
 use yii\bootstrap5\ActiveForm;
 use yii\bootstrap5\Html;
 use yii\bootstrap5\Modal;
+use yii\data\ActiveDataProvider;
+use yii\grid\ActionColumn;
+use yii\grid\GridView;
 use yii\helpers\Url;
 use yii\web\JqueryAsset;
 use yii\web\View;
+use yii\widgets\Pjax;
 
 $this->title = '个人设置';
 FontAwesomeAsset::register($this);
@@ -274,9 +279,9 @@ $darkMode = Yii::$app->user->identity->dark_mode;
                                 Passwordless验证 (Webauthn) (BETA)
                             </h5>
                             <div>
-                                <?= Html::button('Add', ['id' => "webauthn_add", 'type' => 'button', 'class' => 'btn btn-primary btn-sm']) ?>
+                                <?= Html::button('添加', ['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('测试', ['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']) ?>
+                                <?= Html::button('查看详情', ['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>
@@ -414,7 +419,22 @@ Modal::begin([
     </div>
 </div>
 <?php
+Modal::end();
 
+Modal::begin([
+    'title' => '<h4>管理已添加的Webauthn设备</h4>',
+    'id' => 'credentialModal',
+    'size' => 'modal-lg',
+]);
+
+echo Html::tag('div', '你可以在下方查看和删除已经添加的Webauthn设备', ['class' => 'modal-body']);
+$dataProvider = new ActiveDataProvider([
+    'query' => PublicKeyCredentialSourceRepository::find()->where(['user_id' => Yii::$app->user->id]),
+]);
+// 使用 GridView 小部件显示数据
+Pjax::begin();
+echo Html::tag('div', '', ['id' => 'pjax-container']);
+Pjax::end();
 Modal::end();
 $this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class, SimpleWebAuthnBrowser::class], 'position' => View::POS_END]);
 ?>

web/js/user-info.js

@@ -1,3 +1,4 @@
+$.pjax.defaults.scrollTo = false;
 $(document).ready(function () {
     $('#deleteConfirm').change(function () {
         if (this.checked) {
@@ -43,6 +44,20 @@ document.querySelector('.editable-username').addEventListener('click', function
     $('#changeAccountName').modal('show');
 });
 
+document.querySelector('#webauthn_detail').addEventListener('click', function () {
+    // $('#credentialModal').modal('show');
+    $.ajax({
+        url: 'index.php?r=user%2Fcredential-list', // 替换为你的 API 路径
+        method: 'GET',
+        success: function(data) {
+            $('#pjax-container').html(data);
+        },
+        complete: function() {
+            $('#credentialModal').modal('show');
+        }
+    });
+});
+
 // WebAuthn registration #BEGIN
 const { startRegistration } = SimpleWebAuthnBrowser;