个人信息页面测试用的webauthn相关
This commit is contained in:
parent
7dde52ba42
commit
97b69e73e1
GPG Key ID:
D7A9EC07024C3021
@ -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,7 +69,7 @@ $user = new User();
|
||||
$darkMode = Yii::$app->user->identity->dark_mode;
|
||||
?>
|
||||
|
||||
<div class="user-info">
|
||||
<div class="user-info">
|
||||
|
||||
<h1><?= Html::encode($this->title) ?></h1>
|
||||
|
||||
@ -81,7 +83,7 @@ $darkMode = Yii::$app->user->identity->dark_mode;
|
||||
<div class="user-details">
|
||||
<div class="user-info">
|
||||
<p id="p-username" class="editable-username" title="用户昵称(用户名)">
|
||||
<?= Html::encode($model->name . '(' . $model->username. ')') ?>
|
||||
<?= Html::encode($model->name . '(' . $model->username . ')') ?>
|
||||
<i class="fa-solid fa-pen-to-square edit-icon"></i>
|
||||
</p>
|
||||
<p><?= Html::encode($model->email) ?></p>
|
||||
@ -266,6 +268,23 @@ $darkMode = Yii::$app->user->identity->dark_mode;
|
||||
<?= 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>
|
||||
|
||||
@ -294,7 +313,7 @@ $darkMode = Yii::$app->user->identity->dark_mode;
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
// 修改用户头像的Modal
|
||||
Modal::begin([
|
||||
@ -355,7 +374,7 @@ Modal::begin([
|
||||
'size' => 'model-xl',
|
||||
]);
|
||||
?>
|
||||
<div class="row">
|
||||
<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>
|
||||
@ -393,9 +412,9 @@ Modal::begin([
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
Modal::end();
|
||||
$this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
|
||||
$this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class, SimpleWebAuthnBrowser::class], 'position' => View::POS_END]);
|
||||
?>
|
||||
@ -42,3 +42,120 @@ 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;
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user