SocialLogin

TsgcHTMLComponent_SocialLogin — Delphi、C++ Builder、.NET で、各プロバイダーの認可 URL を構築する OAuth ソーシャルログインボタンパネル（Google、Facebook、Apple、GitHub、Microsoft、Twitter、LinkedIn、またはカスタム）です。

概要

TsgcHTMLComponent_SocialLogin

プロバイダーごとに 1 つのブランド付き Bootstrap ボタンを出力するボタンパネルコンポーネントで、各ボタンはそのプロバイダーの OAuth 2.0 認可エンドポイントにリンクします。プロバイダーを追加し、レイアウトを選択してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_SocialLogin

レンダリング内容

Bootstrap 5 の OAuth ボタンパネル

ファミリー

認証

言語

Delphi, C++ Builder, .NET

クイックスタート

プロバイダーを追加し、パネルをレンダリングする

各プロバイダーについて、クライアント ID とリダイレクト URI を指定して AddProvider を呼び出し、Layout と区切りを設定してから、HTML を読み取ります。各ボタンはプロバイダーの認可 URL にリンクします。

uses
  sgcHTML_Enums, sgcHTML_Component_SocialLogin;

var
  oSocial: TsgcHTMLComponent_SocialLogin;
begin
  oSocial := TsgcHTMLComponent_SocialLogin.Create(nil);
  try
    oSocial.Title := 'Sign in';
    oSocial.Subtitle := 'Choose your login method';
    oSocial.Layout := slVertical;
    oSocial.ShowDivider := True;
    oSocial.DividerText := 'or continue with';

    oSocial.AddProvider(spGoogle, 'GOOGLE_CLIENT_ID',
      'https://app.acme.com/oauth/google');
    oSocial.AddProvider(spGitHub, 'GITHUB_CLIENT_ID',
      'https://app.acme.com/oauth/github');

    WebModule.Response := oSocial.HTML;   // branded OAuth buttons
  finally
    oSocial.Free;
  end;
end;

// Each item can build its own authorization URL:
vURL := oSocial.Providers.Items[0].GetAuthorizationURL;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_SocialLogin.hpp

TsgcHTMLComponent_SocialLogin *oSocial = new TsgcHTMLComponent_SocialLogin(NULL);
try
{
  oSocial->Title = "Sign in";
  oSocial->Subtitle = "Choose your login method";
  oSocial->Layout = slVertical;
  oSocial->ShowDivider = true;
  oSocial->DividerText = "or continue with";

  oSocial->AddProvider(spGoogle, "GOOGLE_CLIENT_ID",
    "https://app.acme.com/oauth/google", "");
  oSocial->AddProvider(spGitHub, "GITHUB_CLIENT_ID",
    "https://app.acme.com/oauth/github", "");

  String html = oSocial->HTML;   // branded OAuth buttons

  // Each item can build its own authorization URL:
  String url = oSocial->Providers->Items[0]->GetAuthorizationURL();
}
__finally
{
  delete oSocial;
}

using esegece.sgcWebSockets;

var social = new TsgcHTMLComponent_SocialLogin();
social.Title = "Sign in";
social.Subtitle = "Choose your login method";
social.Layout = TsgcHTMLSocialLoginLayout.slVertical;
social.ShowDivider = true;
social.DividerText = "or continue with";

social.AddProvider(TsgcHTMLSocialProvider.spGoogle, "GOOGLE_CLIENT_ID",
    "https://app.acme.com/oauth/google");
social.AddProvider(TsgcHTMLSocialProvider.spGitHub, "GITHUB_CLIENT_ID",
    "https://app.acme.com/oauth/github");

string html = social.HTML;   // branded OAuth buttons

// Each item can build its own authorization URL:
string url = social.Providers.Items[0].GetAuthorizationURL();

リファレンス

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

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

Providers

AddProvider(aProvider, aClientID, aRedirectURI, aScope) はボタンを追加します。Providers は、手作業でも編集できる TsgcHTMLSocialProviderItems コレクションです。

Provider kinds

TsgcHTMLSocialProvider 列挙型は、spGoogle、spFacebook、spApple、spGitHub、spMicrosoft、spTwitter、spLinkedIn、spCustom をカバーします。

Per-provider item

各項目は Provider、ClientID、RedirectURI、Scope、AuthURL、State、ButtonText、IconURL、CustomColor を公開します。GetAuthorizationURL は完全な URL を返します。

Header & divider

Title と Subtitle はパネルの見出しになります。ShowDivider と DividerText は「or continue with」の区切りを描画します。

Layout & style

Layout は slVertical または slHorizontal を選択します。MaxWidth、ShowIcons、ButtonPadding、ButtonBorderRadius はボタンを調整します。

Output

HTML はボタンパネルを返します。注入されたスタイルシートがホバー効果を追加します。そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

リソース

さらに詳しく

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