Web Authn(2.5/3)

实现用户信息前端的对webauthn的验证设备管理
*使用pjax动态刷新内容
This commit is contained in:
Chenx221 2024-03-16 20:26:21 +08:00
parent b99ff346e7
commit dbecd54ad7
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
3 changed files with 76 additions and 3 deletions

38
views/user/_creIndex.php Normal file
View File

@ -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>';

View File

@ -15,6 +15,7 @@
use app\assets\FontAwesomeAsset; use app\assets\FontAwesomeAsset;
use app\assets\SimpleWebAuthnBrowser; use app\assets\SimpleWebAuthnBrowser;
use app\models\PublicKeyCredentialSourceRepository;
use app\models\User; use app\models\User;
use app\utils\FileSizeHelper; use app\utils\FileSizeHelper;
use app\utils\IPLocation; use app\utils\IPLocation;
@ -27,9 +28,13 @@ use Endroid\QrCode\Writer\PngWriter;
use yii\bootstrap5\ActiveForm; use yii\bootstrap5\ActiveForm;
use yii\bootstrap5\Html; use yii\bootstrap5\Html;
use yii\bootstrap5\Modal; use yii\bootstrap5\Modal;
use yii\data\ActiveDataProvider;
use yii\grid\ActionColumn;
use yii\grid\GridView;
use yii\helpers\Url; use yii\helpers\Url;
use yii\web\JqueryAsset; use yii\web\JqueryAsset;
use yii\web\View; use yii\web\View;
use yii\widgets\Pjax;
$this->title = '个人设置'; $this->title = '个人设置';
FontAwesomeAsset::register($this); FontAwesomeAsset::register($this);
@ -274,9 +279,9 @@ $darkMode = Yii::$app->user->identity->dark_mode;
Passwordless验证 (Webauthn) (BETA) Passwordless验证 (Webauthn) (BETA)
</h5> </h5>
<div> <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>
<div class="alert alert-success" role="alert" hidden> <div class="alert alert-success" role="alert" hidden>
<span id="webauthn_success"></span> <span id="webauthn_success"></span>
@ -414,7 +419,22 @@ Modal::begin([
</div> </div>
</div> </div>
<?php <?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(); Modal::end();
$this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class, SimpleWebAuthnBrowser::class], 'position' => View::POS_END]); $this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class, SimpleWebAuthnBrowser::class], 'position' => View::POS_END]);
?> ?>

View File

@ -1,3 +1,4 @@
$.pjax.defaults.scrollTo = false;
$(document).ready(function () { $(document).ready(function () {
$('#deleteConfirm').change(function () { $('#deleteConfirm').change(function () {
if (this.checked) { if (this.checked) {
@ -43,6 +44,20 @@ document.querySelector('.editable-username').addEventListener('click', function
$('#changeAccountName').modal('show'); $('#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 // WebAuthn registration #BEGIN
const { startRegistration } = SimpleWebAuthnBrowser; const { startRegistration } = SimpleWebAuthnBrowser;