Socialid.login.renderConnectWidget
(Difference between revisions)
Renato.neves (Talk | contribs) (→Description) |
Renato.neves (Talk | contribs) (→Parameters) |
||
| Line 28: | Line 28: | ||
{| | {| | ||
! align="left" width="200px" | containerId | ! align="left" width="200px" | containerId | ||
| − | | width="200px" | | + | | width="200px" | required |
| − | | | + | | Id of the DOM element where the widget will be inserted. |
|+ | |+ | ||
! align="left" width="200px" | options | ! align="left" width="200px" | options | ||
| − | | width="200px" | | + | | width="200px" | optional |
| − | | | + | | 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" | | + | | width="200px" | optional |
| − | | | + | | Determines which theme will be used to build the widget. It could 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" | | + | | width="200px" | optional |
| − | | Array | + | | Array containing one or more providers enabled to the user log in. The following providers are currently supported: "facebook", "twitter", "linkedin" e "gplus". Default: [] (no providers enabled). |
|+ | |+ | ||
! align="left" width="200px" style="padding-left: 20px" | language | ! align="left" width="200px" style="padding-left: 20px" | language | ||
| − | | width="200px" | | + | | width="200px" | optional |
| − | | | + | | Defines which translation will be used in the widgets. It could 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" | | + | | width="200px" | optional |
| − | | | + | | Determines if the "Powered by Social-ID NOW" link will be displayed in the widget or not. It could 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" | | + | | width="200px" | optional |
| − | | | + | | Determines if the CSS theme file will be automatically added in the web page as a <link> tag. It could 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" | | + | | width="200px" | 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". |
|} | |} | ||
Revision as of 17:22, 3 November 2014
Contents |
Description
Renders the Social Connect widget within a DOM element.
This widget can trigger the following events:
- socialid.events.onConnectStart
- socialid.events.onConnectSuccess
- 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 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
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. It could 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" e "gplus". Default: [] (no providers enabled). | language | optional | Defines which translation will be used in the widgets. It could 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. It could 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. It could 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
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:
socialid.login.init(1);
socialid.login.renderConnectWidget("socialid_connect_container", {
theme: "bricks",
providers: ["facebook", "gplus", "twitter", "linkedin"],
language: "pt_br",
showSocialIdLink: true,
loadCss: true
});
Teste os parâmetros em nosso playground: https://sid-examples.herokuapp.com/social_logins/playground
