WebAuthnLogin コンポーネント — sgcHTML

概要

TsgcHTMLComponent_WebAuthnLogin

登録ボタンとサインインボタン、およびブラウザー側のスクリプトをレンダリングするパスキーウィジェットです。SimpleWebAuthnBrowser を介して、お使いの /options と /verify エンドポイントと通信します。モードと URL を設定してから、HTML を読み取ります — または、静的な Build ヘルパーを使用します。

コンポーネントクラス

TsgcHTMLComponent_WebAuthnLogin

レンダリング内容

Bootstrap 5 マークアップ + WebAuthn JS

ファミリー

認証

言語

Delphi, C++ Builder, .NET

クイックスタート

一行で、または完全な制御で

静的な Build ヘルパーは、ウィジェットを 1 回の呼び出しでレンダリングします。カスタムのタイトル、ユーザー名セレクター、独自のスクリプトが必要な場合は、完全なコンポーネントを使用します。

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

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Static builder

Build(aMode, aRegisterURL, aAuthenticateURL) は、モードとエンドポイントに対する妥当な既定値を備え、ウィジェット全体を 1 回の呼び出しでレンダリングします。

Mode

Mode は wamRegister、wamAuthenticate、または wamBoth を選択し、表示するボタンを決定します。

Endpoints

RegisterURL と AuthenticateURL は、サーバーのベース URL です（スクリプトが /options と /verify を追加します）。CallbackURL は、サインイン成功後の遷移先です。

Buttons & text

RegisterButtonText、AuthenticateButtonText、RegisterButtonStyle、AuthenticateButtonStyle、Title、Description、ShowPasskeyIcon が UI を形作ります。

Script & username

UsernameSelector は、登録前にフィールドからユーザー名を読み取ります。CustomScript は、組み込みの SimpleWebAuthn JavaScript を完全に置き換えます。

Output

HTML は、SimpleWebAuthnBrowser を使うインライン <script> とともにマークアップを返します。アラートは SuccessAlertStyle / ErrorAlertStyle を使用します。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

WebAuthnLogin