chenx221/yii2-netdisk
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

个人信息页面测试用的webauthn相关

Browse Source
This commit is contained in:
Chenx221 2024-03-14 20:27:13 +08:00
parent 7dde52ba42
commit 97b69e73e1
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
2 changed files with 361 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
views/user/info.php
View File

@ -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
@ -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>
@ -397,5 +416,5 @@ Modal::begin([
<?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]);
?>

117
web/js/user-info.js
View File

@ -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;
}
});