Socialid.login.renderConnectWidget

From Social ID Developers
(Difference between revisions)
Jump to: navigation, search
(→Description)
(→Example)
 
(9 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
Renders the Social Connect widget within a DOM element.
 
Renders the Social Connect widget within a DOM element.
  
−
This widget can trigger the following events:
+
See also:
−
* [[socialid.events.onConnectStart]]
+
* [[socialid.login.startConnect]]
−
* [[socialid.events.onConnectSuccess]]
+
* [[socialid.login.disconnect]]
−
* [[socialid.events.onConnectCancel]]
+
−
* [[socialid.events.onConnectError]]
+
−
* [[socialid.events.onLoginSuccess]]
+
−
* [[socialid.events.onDisconnectSuccess]]
+
−
* [[socialid.events.onDisconnectError]]
+
−
 
+
−
This widget allows to add credentials from different social networks to the same Social Login user. For example, an user can log in with its Facebook and add its Twitter credential, so the next time this user can choose to log in with its Facebook or Twitter account and be referenced as the same user by the website integrating with the Social Login platform.
+
−
 
+
−
This widget works as follows:
+
−
* if there is an user already logged in the current session, the new credential is added to the user account and the event [[socialid.events.onConnectSuccess]] is triggered.
+
−
* if there is no user logged in the current session, a new login is created (same behavior as the [[socialid.login.renderLoginWidget|login widget]]) and the event [[socialid.events.onLoginSuccess]] is triggered.
+
−
 
+
−
In summary, it's important to handle these two events. In case of [[socialid.events.onLoginSuccess]] it's important to check the login token via server-side to certificate that the user logged in is the same associated to the current website session.
+
  
 
== Usage ==
 
== Usage ==
Line 28: Line 15:
 
{|
 
{|
 
! align="left" width="200px" | containerId
 
! align="left" width="200px" | containerId
−
| width="200px" | obrigatório
+
| width="200px" | required
−
| id do elemento DOM onde será inserido o widget
+
| Id of the DOM element where the widget will be inserted.
 
|+
 
|+
 
! align="left" width="200px" | options
 
! align="left" width="200px" | options
−
| width="200px" | opcional
+
| width="200px" | optional
−
| um objeto contendo parâmetros adicionais
+
| A Javascript object containing additional parameters.
 
|+
 
|+
 
! align="left" width="200px" style="padding-left: 20px" | theme
 
! align="left" width="200px" style="padding-left: 20px" | theme
−
| width="200px" | opcional
+
| width="200px" | optional
−
| Pode ser "icons", "bricks" ou "labeled_icons". Especifica que tema será usado para montar o widget. Default: "icons".
+
| Determines which theme will be used to build the widget. Can be "icons", "bricks" ou "labeled_icons". Default: "icons".
 
|+
 
|+
 
! align="left" width="200px" style="padding-left: 20px" | providers
 
! align="left" width="200px" style="padding-left: 20px" | providers
−
| width="200px" | opcional
+
| width="200px" | optional
−
| Array contendo um ou mais provedores disponíveis para os usuários fazerem login. Atualmente são suportados: "facebook", "twitter", "linkedin" e "gplus". Default: [] (nenhum provedor).
+
| Array containing one or more providers enabled to the user log in. The following providers are currently supported: "facebook", "twitter", "linkedin", "gplus", "instagram" and "apple". Default: [] (no providers enabled).
 
|+
 
|+
 
! align="left" width="200px" style="padding-left: 20px" | language
 
! align="left" width="200px" style="padding-left: 20px" | language
−
| width="200px" | opcional
+
| width="200px" | optional
−
| Pode ser "pt_br" ou "en". Define que tradução será usada nos widgets. Default: "en".
+
| Defines which translation will be used in the widgets. Can be "pt_br" (Brazilian Portuguese) ou "en" (English). Default: "en".
 
|+
 
|+
 
! align="left" width="200px" style="padding-left: 20px" | showSocialIdLink
 
! align="left" width="200px" style="padding-left: 20px" | showSocialIdLink
−
| width="200px" | opcional
+
| width="200px" | optional
−
| Pode ser true ou false (boolean). Especifica se o link "Powered by Social-ID NOW" será automaticamente mostrado ou não. Default: true.
+
| Determines if the "Powered by Social-ID NOW" link will be displayed in the widget or not. Can be true or false (boolean). Default: true.
 
|+
 
|+
 
! align="left" width="200px" style="padding-left: 20px" | loadCss
 
! align="left" width="200px" style="padding-left: 20px" | loadCss
−
| width="200px" | opcional
+
| width="200px" | optional
−
| Pode ser true ou false (boolean). Especifica se o arquivo CSS de temas será automaticamente inserido no documento como um <link>. Default: true.
+
| Determines if the CSS theme file will be automatically added in the web page as a <link> tag. Can be true or false (boolean). Default: true.
 
|+
 
|+
 
! align="left" width="200px" style="padding-left: 20px" | cssUrl
 
! align="left" width="200px" style="padding-left: 20px" | cssUrl
−
| width="200px" | opcional
+
| width="200px" | optional
−
| Especifica a url do arquivo CSS de temas que será automaticamente inserido no documento como um <link> caso loadCss seja true. Default: "https://app.socialidnow.com/assets/api/themes.css".
+
| Determines the CSS theme file url that will be automatically added in the web page as a <link> tag (only if loadCss is true). Default: "https://app.socialidnow.com/assets/api/themes.css".
 
|}
 
|}
  
 
== Example ==
 
== Example ==
  
−
Renderiza em "socialid_connect_container" um widget do Social Connect em português ("pt_br"), com Facebook, Twitter, LinkedIn e Google+ disponíveis para serem adicionados como nova conexão ao usuário logado atualmente no Social Login:
+
It renders the Social Connect Widget within the "socialid_connect_container" DOM element in Brazilian Portuguese ("pt_br"), with Facebook, Twitter, LinkedIn, Google+, Instagram and Apple available to be added as new connection to the user logged in the current Social Login session:
  
−
   socialid.login.init(1);
+
   socialid.login.init(1, {connectType: "event"});
 
   socialid.login.renderConnectWidget("socialid_connect_container", {
 
   socialid.login.renderConnectWidget("socialid_connect_container", {
 
     theme: "bricks",  
 
     theme: "bricks",  
−
     providers: ["facebook", "gplus", "twitter", "linkedin"],
+
     providers: ["facebook", "gplus", "twitter", "linkedin", "instagram", "apple"],
 
     language: "pt_br",
 
     language: "pt_br",
 
     showSocialIdLink: true,
 
     showSocialIdLink: true,
Line 73: Line 60:
 
   });
 
   });
  
−
Teste os parâmetros em nosso playground: https://sid-examples.herokuapp.com/social_logins/playground
+
You can test this parameters in our playground: https://sid-examples.herokuapp.com/social_logins/playground

Latest revision as of 20:42, 26 February 2020

Contents

Description

Renders the Social Connect widget within a DOM element.

See also:

Usage 

 socialid.login.renderConnectWidget(containerId, options)

Parameters

containerId required Id of the DOM element where the widget will be inserted.
options optional A Javascript object containing additional parameters.
theme optional Determines which theme will be used to build the widget. Can be "icons", "bricks" ou "labeled_icons". Default: "icons".
providers optional Array containing one or more providers enabled to the user log in. The following providers are currently supported: "facebook", "twitter", "linkedin", "gplus", "instagram" and "apple". Default: [] (no providers enabled).
language optional Defines which translation will be used in the widgets. Can be "pt_br" (Brazilian Portuguese) ou "en" (English). Default: "en".
showSocialIdLink optional Determines if the "Powered by Social-ID NOW" link will be displayed in the widget or not. Can be true or false (boolean). Default: true.
loadCss optional Determines if the CSS theme file will be automatically added in the web page as a <link> tag. Can be true or false (boolean). Default: true.
cssUrl optional Determines the CSS theme file url that will be automatically added in the web page as a <link> tag (only if loadCss is true). Default: "https://app.socialidnow.com/assets/api/themes.css".

Example

It renders the Social Connect Widget within the "socialid_connect_container" DOM element in Brazilian Portuguese ("pt_br"), with Facebook, Twitter, LinkedIn, Google+, Instagram and Apple available to be added as new connection to the user logged in the current Social Login session: 

 socialid.login.init(1, {connectType: "event"});
 socialid.login.renderConnectWidget("socialid_connect_container", {
   theme: "bricks", 
   providers: ["facebook", "gplus", "twitter", "linkedin", "instagram", "apple"],
   language: "pt_br",
   showSocialIdLink: true,
   loadCss: true
 });

You can test this parameters in our playground: https://sid-examples.herokuapp.com/social_logins/playground

Retrieved from "https://dev.socialidnow.com/index.php?title=Socialid.login.renderConnectWidget&oldid=2983"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox