@page
@using Passwordless.Net
@using Microsoft.Extensions.Options
@using Passwordless.AspNetCore
@model RegisterModel
@inject IOptions<PasswordlessAspNetCoreOptions> PasswordlessOptions;
@{
ViewData["Title"] = "Register";
}
<h1>@ViewData["Title"]</h1>
@{
var canAddPasskeys = ViewData["CanAddPasskeys"] is true;
}
<div class="row">
<div class="col-12">
<form class="needs-validation" action="" method="POST">
<div class="mb-3">
<label asp-for="Form.Username" class="form-label">Username</label>
<input
placeholder="Jane Doe"
type="text"
asp-for="Form.Username"
class="form-control"
id="username"/>
<span class="text-danger" asp-validation-for="Form.Username"></span>
</div>
<div class="mb-3">
<label asp-for="Form.Email" class="form-label">Email</label>
<input
placeholder="[email protected]"
type="text"
asp-for="Form.Email"
class="form-control"
id="email"/>
<span class="text-danger" asp-validation-for="Form.Email"></span>
</div>
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<div>
<button type="submit" class="btn-primary">Register</button>
</div>
</form>
</div>
</div>
@if (canAddPasskeys)
{
<script src="https://cdn.passwordless.dev/dist/1.1.0/umd/passwordless.umd.js"></script>
<script>
async function register() {
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const registrationRequest = {
email: email,
username: username,
displayName: username,
aliases: [email]
};
const registrationResponse = await fetch('/passwordless-register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(registrationRequest)
});
// 如果没有错误,则进行反序列化,然后使用返回的令牌创建我们的通行密钥
if (registrationResponse.ok) {
const registrationResponseJson = await registrationResponse.json();
const token = registrationResponseJson.token;
// 我们需要使用从 https://cdn.passwordless.dev/dist/1.1.0/umd/passwordless.umd.js 导入的客户端。
const p = new Passwordless.Client({
apiKey: '@PasswordlessOptions.Value.ApiKey',
apiUrl: '@PasswordlessOptions.Value.ApiUrl'
});
const registeredPasskeyResponse = await p.register(token, email);
}
}
register();
</script>
}