SocialLogin

TsgcHTMLComponent_SocialLogin — ein OAuth-Social-Login-Schaltflächenpanel (Google, Facebook, Apple, GitHub, Microsoft, Twitter, LinkedIn oder benutzerdefiniert), das die Autorisierungs-URL jedes Providers erstellt, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_SocialLogin

Eine Schaltflächenpanel-Komponente, die pro Provider eine markentypische Bootstrap-Schaltfläche ausgibt, die jeweils zum OAuth-2.0-Autorisierungsendpunkt dieses Providers verlinkt. Fügen Sie Provider hinzu, wählen Sie ein Layout und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_SocialLogin

Rendert

Bootstrap-5-OAuth-Schaltflächenpanel

Familie

Authentifizierung

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Provider hinzufügen, Panel rendern

Rufen Sie AddProvider für jeden Provider mit dessen Client-ID und Redirect-URI auf, setzen Sie das Layout und den Trenner und lesen Sie dann HTML. Jede Schaltfläche verlinkt zur Autorisierungs-URL des Providers.

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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Provider

AddProvider(aProvider, aClientID, aRedirectURI, aScope) hängt eine Schaltfläche an; Providers ist die TsgcHTMLSocialProviderItems-Sammlung, die Sie auch von Hand bearbeiten können.

Provider-Arten

Das TsgcHTMLSocialProvider-Enum umfasst spGoogle, spFacebook, spApple, spGitHub, spMicrosoft, spTwitter, spLinkedIn und spCustom.

Pro-Provider-Element

Jedes Element stellt Provider, ClientID, RedirectURI, Scope, AuthURL, State, ButtonText, IconURL und CustomColor bereit; GetAuthorizationURL gibt die vollständige URL zurück.

Kopfzeile & Trenner

Title und Subtitle bilden den Kopf des Panels; ShowDivider und DividerText zeichnen die "or continue with"-Linie.

Layout & Stil

Layout wählt slVertical oder slHorizontal; MaxWidth, ShowIcons, ButtonPadding und ButtonBorderRadius passen die Schaltflächen an.

Ausgabe

HTML gibt das Schaltflächenpanel zurück; ein eingefügtes Stylesheet ergänzt den Hover-Effekt. Liefern Sie es aus oder weisen Sie es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen