SocialLogin

TsgcHTMLComponent_SocialLogin — un panneau de boutons de connexion sociale OAuth (Google, Facebook, Apple, GitHub, Microsoft, Twitter, LinkedIn ou personnalisé) qui construit l'URL d'autorisation de chaque fournisseur, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_SocialLogin

Un composant de panneau de boutons qui émet un bouton Bootstrap aux couleurs de chaque fournisseur, chacun renvoyant au point d'accès d'autorisation OAuth 2.0 de ce fournisseur. Ajoutez des fournisseurs, choisissez une mise en page, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_SocialLogin

Produit

Un panneau de boutons OAuth Bootstrap 5

Famille

Authentification

Langages

Delphi, C++ Builder, .NET

QuickStart

Ajoutez des fournisseurs, affichez le panneau

Appelez AddProvider pour chaque fournisseur avec son identifiant client et son URI de redirection, définissez le Layout et le séparateur, puis lisez HTML. Chaque bouton renvoie à l'URL d'autorisation du fournisseur.

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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Fournisseurs

AddProvider(aProvider, aClientID, aRedirectURI, aScope) ajoute un bouton ; Providers est la collection TsgcHTMLSocialProviderItems que vous pouvez aussi modifier à la main.

Types de fournisseurs

L'énumération TsgcHTMLSocialProvider couvre spGoogle, spFacebook, spApple, spGitHub, spMicrosoft, spTwitter, spLinkedIn et spCustom.

Élément par fournisseur

Chaque élément expose Provider, ClientID, RedirectURI, Scope, AuthURL, State, ButtonText, IconURL et CustomColor ; GetAuthorizationURL renvoie l'URL complète.

En-tête & séparateur

Title et Subtitle coiffent le panneau ; ShowDivider et DividerText dessinent la règle « or continue with ».

Mise en page & style

Layout choisit slVertical ou slHorizontal ; MaxWidth, ShowIcons, ButtonPadding et ButtonBorderRadius ajustent les boutons.

Sortie

HTML renvoie le panneau de boutons ; une feuille de style injectée ajoute l'effet de survol. Servez-le, ou affectez-le au BodyContent d'un modèle de page.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir