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

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
 
@@ -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]);
 ?>

web/js/user-info.js

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