WebAuthnLogin 组件 — sgcHTML

概览

TsgcHTMLComponent_WebAuthnLogin

一个通行密钥控件，渲染注册和登录按钮以及浏览器端脚本。它通过 SimpleWebAuthnBrowser 与您的 /options 和 /verify 端点通信。设置模式和 URL，然后读取 HTML — 或使用静态 Build 辅助方法。

组件类

TsgcHTMLComponent_WebAuthnLogin

渲染为

Bootstrap 5 标记 + WebAuthn JS

家族

身份验证

语言

Delphi, C++ Builder, .NET

快速入门

一行代码，或完全控制

静态 Build 辅助方法通过单个调用渲染该控件。当您需要自定义标题、用户名选择器或您自己的脚本时，请使用完整组件。

uses
  sgcHTML_Enums, sgcHTML_Component_WebAuthnLogin;

// One-liner (register + authenticate, default endpoints):
WebModule.Response := TsgcHTMLComponent_WebAuthnLogin.Build(
  wamBoth, '/webauthn/register', '/webauthn/authenticate');

// Full control:
var
  oWA: TsgcHTMLComponent_WebAuthnLogin;
begin
  oWA := TsgcHTMLComponent_WebAuthnLogin.Create(nil);
  try
    oWA.Mode := wamBoth;
    oWA.RegisterURL := '/webauthn/register';
    oWA.AuthenticateURL := '/webauthn/authenticate';
    oWA.CallbackURL := '/dashboard';
    oWA.Title := 'Passwordless sign-in';
    oWA.ShowPasskeyIcon := True;
    oWA.UsernameSelector := '#username';

    WebModule.Response := oWA.HTML;   // buttons + SimpleWebAuthn JS
  finally
    oWA.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_WebAuthnLogin.hpp

// One-liner (register + authenticate, default endpoints):
String html = TsgcHTMLComponent_WebAuthnLogin::Build(
  wamBoth, "/webauthn/register", "/webauthn/authenticate");

// Full control:
TsgcHTMLComponent_WebAuthnLogin *oWA = new TsgcHTMLComponent_WebAuthnLogin(NULL);
try
{
  oWA->Mode = wamBoth;
  oWA->RegisterURL = "/webauthn/register";
  oWA->AuthenticateURL = "/webauthn/authenticate";
  oWA->CallbackURL = "/dashboard";
  oWA->Title = "Passwordless sign-in";
  oWA->ShowPasskeyIcon = true;
  oWA->UsernameSelector = "#username";

  String full = oWA->HTML;   // buttons + SimpleWebAuthn JS
}
__finally
{
  delete oWA;
}

using esegece.sgcWebSockets;

// One-liner (register + authenticate, default endpoints):
string html = TsgcHTMLComponent_WebAuthnLogin.Build(
    TsgcHTMLWebAuthnMode.wamBoth, "/webauthn/register", "/webauthn/authenticate");

// Full control:
var wa = new TsgcHTMLComponent_WebAuthnLogin();
wa.Mode = TsgcHTMLWebAuthnMode.wamBoth;
wa.RegisterURL = "/webauthn/register";
wa.AuthenticateURL = "/webauthn/authenticate";
wa.CallbackURL = "/dashboard";
wa.Title = "Passwordless sign-in";
wa.ShowPasskeyIcon = true;
wa.UsernameSelector = "#username";

string full = wa.HTML;   // buttons + SimpleWebAuthn JS

参考

关键属性与方法

您最常使用的成员。

静态构建器

Build(aMode, aRegisterURL, aAuthenticateURL) 通过单个调用渲染整个控件，为模式和端点提供合理的默认值。

模式

Mode 选择 wamRegister、wamAuthenticate 或 wamBoth，决定显示哪些按钮。

端点

RegisterURL 和 AuthenticateURL 是您服务器的基础地址（脚本会追加 /options 和 /verify）；CallbackURL 是登录成功后的落地页。

按钮与文本

RegisterButtonText、AuthenticateButtonText、RegisterButtonStyle、AuthenticateButtonStyle、Title、Description 和 ShowPasskeyIcon 塑造 UI。

脚本与用户名

UsernameSelector 在注册前从字段读取用户名；CustomScript 完全替换内置的 SimpleWebAuthn JavaScript。

输出

HTML 返回标记以及使用 SimpleWebAuthnBrowser 的内联 <script>；提示使用 SuccessAlertStyle / ErrorAlertStyle。

资源

继续探索

	所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。	打开
	下载免费试用版30 天试用版附带 60.HTML 演示项目。	打开
	价格Single、Team 和 Site 授权，均含完整源代码。	打开

WebAuthnLogin