SocialLogin-component — sgcHTML

In het kort

TsgcHTMLComponent_SocialLogin

Een knoppenpaneel-component dat per provider één gebrandde Bootstrap-knop uitstuurt, elk gekoppeld aan het OAuth 2.0-autorisatie-eindpunt van die provider. Voeg providers toe, kies een lay-out en lees daarna de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_SocialLogin

Rendert

Bootstrap 5 OAuth-knoppenpaneel

Familie

Authenticatie

Talen

Delphi, C++ Builder, .NET

Snelstart

Voeg providers toe, render het paneel

Roep AddProvider aan voor elke provider met zijn client-ID en redirect-URI, stel de Layout en divider in en lees daarna HTML. Elke knop linkt naar de autorisatie-URL van de 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();

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Providers

AddProvider(aProvider, aClientID, aRedirectURI, aScope) voegt een knop toe; Providers is de TsgcHTMLSocialProviderItems-collectie die je ook handmatig kunt bewerken.

Providersoorten

De TsgcHTMLSocialProvider-enum dekt spGoogle, spFacebook, spApple, spGitHub, spMicrosoft, spTwitter, spLinkedIn en spCustom.

Item per provider

Elk item biedt Provider, ClientID, RedirectURI, Scope, AuthURL, State, ButtonText, IconURL en CustomColor; GetAuthorizationURL geeft de volledige URL terug.

Kop en divider

Title en Subtitle vormen de kop van het paneel; ShowDivider en DividerText tekenen de "or continue with"-lijn.

Lay-out en stijl

Layout kiest slVertical of slHorizontal; MaxWidth, ShowIcons, ButtonPadding en ButtonBorderRadius stemmen de knoppen af.

Uitvoer

HTML geeft het knoppenpaneel terug; een geïnjecteerde stylesheet voegt het hover-effect toe. Serveer het, of wijs het toe aan de BodyContent van een paginasjabloon.

Resources

Blijf ontdekken

	Alle sgcHTML-componentenVerken de volledige functiematrix met meer dan 60 componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

SocialLogin