SocialLogin

TsgcHTMLComponent_SocialLogin — panel przycisków logowania społecznościowego OAuth (Google, Facebook, Apple, GitHub, Microsoft, Twitter, LinkedIn lub niestandardowy), który buduje adres URL autoryzacji każdego dostawcy, w Delphi, C++ Builder i .NET.

W skrócie

TsgcHTMLComponent_SocialLogin

Komponent panelu przycisków, który generuje jeden markowy przycisk Bootstrap na każdego dostawcę, gdzie każdy prowadzi do punktu końcowego autoryzacji OAuth 2.0 danego dostawcy. Dodaj dostawców, wybierz układ, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_SocialLogin

Renderuje

Panel przycisków OAuth Bootstrap 5

Rodzina

Uwierzytelnianie

Języki

Delphi, C++ Builder, .NET

Szybki start

Dodaj dostawców, wyrenderuj panel

Wywołaj AddProvider dla każdego dostawcy z jego identyfikatorem klienta i identyfikatorem URI przekierowania, ustaw Layout i separator, a następnie odczytaj HTML. Każdy przycisk prowadzi do adresu URL autoryzacji dostawcy.

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();

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Dostawcy

AddProvider(aProvider, aClientID, aRedirectURI, aScope) dołącza przycisk; Providers to kolekcja TsgcHTMLSocialProviderItems, którą możesz też edytować ręcznie.

Rodzaje dostawców

Wyliczenie TsgcHTMLSocialProvider obejmuje spGoogle, spFacebook, spApple, spGitHub, spMicrosoft, spTwitter, spLinkedIn i spCustom.

Pozycja na dostawcę

Każda pozycja udostępnia Provider, ClientID, RedirectURI, Scope, AuthURL, State, ButtonText, IconURL i CustomColor; GetAuthorizationURL zwraca pełny adres URL.

Nagłówek i separator

Title i Subtitle stanowią nagłówek panelu; ShowDivider i DividerText rysują linię "lub kontynuuj za pomocą".

Układ i styl

Layout wybiera slVertical lub slHorizontal; MaxWidth, ShowIcons, ButtonPadding i ButtonBorderRadius dostrajają przyciski.

Wynik

HTML zwraca panel przycisków; wstrzyknięty arkusz stylów dodaje efekt najechania. Udostępnij go lub przypisz do właściwości BodyContent szablonu strony.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz