SocialLogin

TsgcHTMLComponent_SocialLogin — 一个 OAuth 社交登录按钮面板（Google、Facebook、Apple、GitHub、Microsoft、Twitter、LinkedIn 或自定义），它为每个提供商构建授权 URL，适用于 Delphi、C++ Builder 和 .NET。

概览

TsgcHTMLComponent_SocialLogin

一个按钮面板组件，为每个提供商发出一个品牌化的 Bootstrap 按钮，每个按钮都链接到该提供商的 OAuth 2.0 授权端点。添加提供商，选择布局，然后读取 HTML 属性。

组件类

TsgcHTMLComponent_SocialLogin

渲染为

Bootstrap 5 OAuth 按钮面板

家族

身份验证

语言

Delphi, C++ Builder, .NET

快速入门

添加提供商，渲染面板

为每个提供商调用 AddProvider，提供其客户端 ID 和重定向 URI，设置 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();

参考

关键属性与方法

您最常使用的成员。

提供商

AddProvider(aProvider, aClientID, aRedirectURI, aScope) 追加一个按钮；Providers 是 TsgcHTMLSocialProviderItems 集合，您也可以手动编辑它。

提供商种类

TsgcHTMLSocialProvider 枚举涵盖 spGoogle、spFacebook、spApple、spGitHub、spMicrosoft、spTwitter、spLinkedIn 和 spCustom。

按提供商的项目

每个项目都公开 Provider、ClientID、RedirectURI、Scope、AuthURL、State、ButtonText、IconURL 和 CustomColor；GetAuthorizationURL 返回完整的 URL。

页眉与分隔符

Title 和 Subtitle 作为面板标题；ShowDivider 和 DividerText 绘制 "or continue with" 分隔线。

布局与样式

Layout 选择 slVertical 或 slHorizontal；MaxWidth、ShowIcons、ButtonPadding 和 ButtonBorderRadius 调整按钮。

输出

HTML 返回按钮面板；一个注入的样式表添加悬停效果。直接提供服务，或将其赋给页面模板的 BodyContent。

资源

继续探索

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