SocialLogin

TsgcHTMLComponent_SocialLogin — un pannello di pulsanti per il login social OAuth (Google, Facebook, Apple, GitHub, Microsoft, Twitter, LinkedIn o personalizzato) che costruisce l’URL di autorizzazione di ogni provider, in Delphi, C++ Builder e .NET.

In sintesi

TsgcHTMLComponent_SocialLogin

Un componente pannello di pulsanti che emette un pulsante Bootstrap brandizzato per ogni provider, ciascuno collegato all’endpoint di autorizzazione OAuth 2.0 di quel provider. Aggiungi i provider, scegli un layout, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_SocialLogin

Renderizza

Bootstrap 5 OAuth button panel

Famiglia

Autenticazione

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Aggiungi i provider, renderizza il pannello

Chiama AddProvider per ogni provider con il suo client ID e redirect URI, imposta il Layout e il divisore, quindi leggi HTML. Ogni pulsante si collega all’URL di autorizzazione del provider.

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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Provider

AddProvider(aProvider, aClientID, aRedirectURI, aScope) aggiunge un pulsante; Providers è la collezione TsgcHTMLSocialProviderItems che puoi anche modificare a mano.

Tipi di provider

L’enum TsgcHTMLSocialProvider copre spGoogle, spFacebook, spApple, spGitHub, spMicrosoft, spTwitter, spLinkedIn e spCustom.

Elemento per provider

Ogni elemento espone Provider, ClientID, RedirectURI, Scope, AuthURL, State, ButtonText, IconURL e CustomColor; GetAuthorizationURL restituisce l’URL completo.

Intestazione e divisore

Title e Subtitle intestano il pannello; ShowDivider e DividerText disegnano la linea "oppure continua con".

Layout e stile

Layout sceglie slVertical o slHorizontal; MaxWidth, ShowIcons, ButtonPadding e ButtonBorderRadius regolano i pulsanti.

Output

HTML restituisce il pannello di pulsanti; un foglio di stile iniettato aggiunge l’effetto hover. Servilo, oppure assegnalo al BodyContent di un template di pagina.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri