SocialLogin

TsgcHTMLComponent_SocialLogin — un panel de botones de inicio de sesión social OAuth (Google, Facebook, Apple, GitHub, Microsoft, Twitter, LinkedIn o personalizado) que construye la URL de autorización de cada proveedor, en Delphi, C++ Builder y .NET.

Un vistazo

TsgcHTMLComponent_SocialLogin

Un componente de panel de botones que emite un botón de Bootstrap con la marca de cada proveedor, cada uno enlazando al endpoint de autorización OAuth 2.0 de ese proveedor. Añade proveedores, elige una disposición y luego lee la propiedad HTML.

Clase de componente

TsgcHTMLComponent_SocialLogin

Renderiza

Panel de botones OAuth de Bootstrap 5

Familia

Autenticación

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade proveedores, renderiza el panel

Llama a AddProvider por cada proveedor con su ID de cliente y URI de redirección, define el Layout y el divisor, y luego lee HTML. Cada botón enlaza con la URL de autorización del proveedor.

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

Referencia

Propiedades y métodos clave

Los miembros que más vas a usar.

Proveedores

AddProvider(aProvider, aClientID, aRedirectURI, aScope) añade un botón; Providers es la colección TsgcHTMLSocialProviderItems que también puedes editar a mano.

Tipos de proveedor

El enum TsgcHTMLSocialProvider cubre spGoogle, spFacebook, spApple, spGitHub, spMicrosoft, spTwitter, spLinkedIn y spCustom.

Elemento por proveedor

Cada elemento expone Provider, ClientID, RedirectURI, Scope, AuthURL, State, ButtonText, IconURL y CustomColor; GetAuthorizationURL devuelve la URL completa.

Cabecera y divisor

Title y Subtitle encabezan el panel; ShowDivider y DividerText dibujan la regla "or continue with".

Disposición y estilo

Layout elige slVertical o slHorizontal; MaxWidth, ShowIcons, ButtonPadding y ButtonBorderRadius ajustan los botones.

Salida

HTML devuelve el panel de botones; una hoja de estilos inyectada añade el efecto al pasar el ratón. Sírvelo, o asígnalo al BodyContent de una plantilla de página.

Recursos

Sigue explorando

	Todos los componentes sgcHTMLExplora la matriz completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos demo 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir