SocialLogin

TsgcHTMLComponent_SocialLogin — Delphi, C++ Builder 및 .NET에서 각 제공자의 인증 URL을 구성하는 OAuth 소셜 로그인 버튼 패널(Google, Facebook, Apple, GitHub, Microsoft, Twitter, LinkedIn 또는 사용자 지정)입니다.

한눈에 보기

TsgcHTMLComponent_SocialLogin

제공자마다 브랜드 적용된 Bootstrap 버튼 하나를 내보내는 버튼 패널 컴포넌트로, 각 버튼은 해당 제공자의 OAuth 2.0 인증 엔드포인트로 연결됩니다. 제공자를 추가하고, 레이아웃을 선택한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_SocialLogin

렌더링

Bootstrap 5 OAuth 버튼 패널

패밀리

인증

언어

Delphi, C++ Builder, .NET

QuickStart

제공자를 추가하고, 패널을 렌더링하기

각 제공자에 대해 클라이언트 ID와 리디렉션 URI와 함께 AddProvider를 호출하고, Layout과 구분선을 설정한 다음, HTML을 읽습니다. 각 버튼은 제공자의 인증 URL로 연결됩니다.

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

레퍼런스

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

제공자

AddProvider(aProvider, aClientID, aRedirectURI, aScope)는 버튼을 추가합니다. Providers는 직접 편집할 수도 있는 TsgcHTMLSocialProviderItems 컬렉션입니다.

제공자 종류

TsgcHTMLSocialProvider 열거형은 spGoogle, spFacebook, spApple, spGitHub, spMicrosoft, spTwitter, spLinkedIn 및 spCustom을 다룹니다.

제공자별 항목

각 항목은 Provider, ClientID, RedirectURI, Scope, AuthURL, State, ButtonText, IconURL 및 CustomColor를 제공합니다. GetAuthorizationURL은 전체 URL을 반환합니다.

헤더 및 구분선

Title과 Subtitle이 패널의 제목입니다. ShowDivider와 DividerText는 "or continue with" 구분선을 그립니다.

레이아웃 및 스타일

Layout은 slVertical 또는 slHorizontal을 선택합니다. MaxWidth, ShowIcons, ButtonPadding 및 ButtonBorderRadius가 버튼을 조정합니다.

출력

HTML은 버튼 패널을 반환합니다. 주입된 스타일시트가 호버 효과를 추가합니다. 제공하거나, 페이지 템플릿의 BodyContent에 할당하십시오.

리소스

계속 살펴보기

	모든 sgcHTML 컴포넌트60개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.	열기
	무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.	열기
	가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.	열기