Login

Login

Asset Version: 1.1.0
  • Version 1.1.0
  • Version 1.0.0
Last Published: Jun 29, 2018 By: Kony Team
5866 14 4 989
The Login component provides key front end capabilities typically used in a mobile apps login page. The modules provides typical functionality such as enforcing a minimum password length,minimum user ID length,local password encryption via the component properties directly within Visualizer. The component also provides a typical login UI that includes connectivity to Facebook, Office365, LinkedIn and Touch ID providing a quick login asset for use within apps the require authentication.

Requirements

  • Visualizer Enterprise
  • Kony Fabric
 

Devices

 

Platforms


Features

  • Ready-to-use login form/screen for mobile apps
  • Ability to authenticate with Facebook, LinkedIn, and Office365 credentials
  • Ability to authenticate with fingerprint
  • Facility to customize every UI element
  • Easy connect to custom identity services

Prerequisites

  • Kony Visualizer v8
  • Kony Fabric v8

Login component is a login form that every mobile app needs to authenticate its users. The component contains a login form with fields such as user name, password, and submit button to authenticate app users. The fields in the component are configured with necessary constraints and actions.

The component also supports Touch ID and social authentications. Touch ID is a biometric fingerprint authenticating mechanism, which allows users to log into your app with their fingerprint. With the Social authentication, users can log into your app with their social website (Facebook, Office365, and LinkedIn) credentials.

You can import the Login component into your app (created in Kony Visualizer), and achieve the login screen without developing it from scratch. The Login component also facilitates a set of properties, events, and APIs that helps you customize the fields and the functionality.

The following sections help you use the Login component in your app:

Prerequisites

Before you start using the Login component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer Enterprise V8
  3. Kony Fabric V8
  4. For Android apps, add the USE_FINGERPRINT permission to your app project. You can add the permission using the following procedure.
    1. Open the application, and click Project Settings icon. The Project Settings dialog appears.

      login_fingerprint.png
    2. Click the Native tab, and then click the Android sub-tab.
    3. In the Manifest Properties section, click the Permissions tab.
    4. Select the USE_FINGERPRINT option from the left box, and click Add. Make sure that the USE_FINGERPRINT option is moved to the right box.
    5. Click Finish.

Importing the Login Component

Before you start importing the component to Kony Visualizer, you must download the component from the Kony Marketplace website.

You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

To import the component zip file, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    login_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.login name is displayed by default. If you want, you can rename it.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. So after importing a component, you must add the component to your app.

Adding a Login Component into your App

You can add a Login component to FlexForm, FlexContainer, and FlexScrollContainer widgets.

To add a login component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. Open the library to which you imported the component. To open the library:
    • Click the context arrow of KonyLibrary, point to Open, and select the library in which the component exists.
      library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.login in the Components section on the Templates tab.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer to Button Widget.

You can also see that a new Component tab, is added on the Properties pane. The component tab contains assorted properties relevant to the component that allows you to customize the component as required. The properties on the Component tab are categorized as Generaland Text properties.

You can also add a Login component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.
/* creating a component's Object */
var login = new com.konymp.login(
{
	"clipBounds": true,
	"id": "login",
	"isVisible": true,
	"left": "0dp",
	"skin": " konymploginGradiantSkin",
	"top": "0dp",
	"width": "100%",
	"zIndex": 1
}, {}, {});
					
/*Setting Properties for the component*/
login.height="100%";
login.logoSource = "reusablelogin_logo.png";
login.rememberMeSelectedSource = "reusablelogin_checkbox_selected.png";
login.rememberMeUnSelectedSource = "reusablelogin_checkbox_unselected.png";
login.encryptCredentials = true;
login.logoScaleMode = constants.IMAGE_SCALE_MODE_FIT_TO_DIMENSIONS;
login.usernamePlaceholder = "username";
login.usernameMaxChar = 20;
login.usernameInputMode = constants.TEXTBOX_INPUT_MODE_NUMERIC;
login.passwordPlaceholder = "password";
login.passwordMaxChar = 20;
login.passwordInputMode = constants.TEXTBOX_INPUT_MODE_NUMERIC;
login.submitButtonText = "sign in";
login.forgotPasswordText = "Forgot Password";
login.remembermeProperty = true;
login.touchIDProperty = true;
login.socialloginVisible = true;
login.touchIdCenterY = "78%";
login.socialloginCenterY = "90.5%";
login.office365login = true;
login.office365Source = "reusablelogin_office365.png";
login.office365CenterX = "35%";
login.facebooklogin = true;
login.facebookSource = "reusablelogin_facebook.png";
login.facebookCenterX = "50%";
login.linkedinlogin = true;
login.linkedinSource = "reusablelogin_linkedin.png";
login.linkedinCenterX = "65%";
login.usernameMinimumChar = 5;
login.passwordMinimumChar = 5;
login.usernameValidationMsg = "Username too small";
login.passwordValidationMsg = "Password Too Small";
login.providerName = "userstore";
login.logoBackground = "konymploginGradiantSkin";
login.socialBackground = "konympWhiteBackground";
login.sknbtnlogin = "konympbtnSigninSkin";
login.sknForgotPassword = "sknsecondaryAction";
login.sknCrendentials = "sknloginTextField1";
login.loginCardBackground = "konympskngenericCard";
        
/*Defining events for the component*/
login.onErrorCallback = function(error)
{
	alert(JSON.stringify(error));
}.bind(this);
				
login.usernameOnDone = function()
{
	var username = this.view.login.getUsername();
	if (!username)
	{
		alert("username is less than 3 char’s");
	}
}.bind(this);
					
login.loginSuccessEvent = function(response)
{
	alert("login Success");
}.bind(this);

login.loginFailureEvent = function(error) 
{
	alert("login failure");
}.bind(this);

login.submitOnClick=function()
{
	alert(" sign in button clicked");
}.bind(this);
login.remembermeOnSelected = function()
{
	alert("remember me being clicked");
}.bind(this);

login.forgotPasswordOnClick = function()
{
	alert("forgot password is clicked");
}.bind(this);

/*Adding Component to the Form*/
this.view.add(login)

In the code snippet, you can edit the properties of the component based on your requirement. For more information, see Properties.

Save the file.

Setting the Error Callback

You must define the onErrorCallback event, otherwise the component throws an exception.

For more information, you can refer to onErrorCallback in the Defining Events section of this document.

To delete the Login component, do the following:

  1. In Kony Visualizer, open your app and then open the form to which you added the component.
  2. Click the context menu of the Login component, and then click Delete. A confirmation dialog appears.
  3. Click OK.

Configuring Social Authentication

The Login component comes along with social authentication embedded in it. With the integration of social authentication, the app users can log into your app directly using their social website credentials. The Login component contains icons of Facebook, LinkedIn, and Office 365 at the bottom of the screen. When a user taps on any one of the icons, the respective login form opens as illustrated in the following figure.

login_social.png

The social authentication works because of a Kony Fabric app, ReusableLogin, is bundled with the Login component. When you import the component into your app project (Kony Visualizer), and then drag the component on to the Canvas, the ReusableLogin app will be uploaded to your Kony account.

Note:

Ensure that you are logged on to your Kony account.

The ReusableLogin app contains a set of identity services related to social authentication. The identity services set helps you invoke the social authentication process when a user tries to log into your app using the social website credentials. When a user clicks any of the social website icons, the corresponding identity service gets invoked. For example, if a user clicks the Facebook icon, the Facebook service is invoked, and then the Facebook login screen opens using which the user can log into your app. The following are the available identity services.

  • reusableFacebookLogin: provides the OAuth login service for Facebook.
  • reusableLinkedinLogin: provides the OAuth login service for LinkedIn.
  • reusableOffice365Login: provides the OAuth login service for Office 365.

To enable the social authentication process, you must associate your app with the ReusableLogin app in Kony Fabric.

To associate your app with the ReusableLogin app, do the following:

  1. In Kony Visualizer, open your app to which you have added the component.
  2. On the Projects tab, click Kony Fabric. The Bind Kony Fabric Application dialog appears.
  3. Click Use Existing. The Kony Fabic Application dialog appears with a list of existing apps.
  4. Find the ReusableLogin app, and click the Associate button against the app.
Note:

You can find the app by typing the app's name in the Search box.

The Kony Fabric app name will be same as your Kony Visualizer app name.
If the Kony Fabric app is already associated with Kony Visualizer app, the services are added to the same Kony Fabric app.

Obtaining Client ID and Client Secret

To use social authentication on Kony Fabric, you need to configure a callback URL in the respective developer console. You can then generate a Client ID and a Client Secret to configure on Kony Fabric.

Refer to the steps in the following drop-down menus to obtain the Client ID and the Client Secret for your Kony Fabric service.

Creating an app on the Facebook Developer Console
  1. Create an app in the developer console.
  2. Add the callback URL of the Kony Fabric Identity Service in the developer app.
    1. In the App Dashboard, choose your app.
    2. Go to Products > Facebook Login > Settings.
    3. Under the Client OAuth Settings, enter your redirect URL in the Valid OAuth redirect URIs field for successful authorization.
  3. Get the Client ID and Client Secret from the developer app and paste it in the Identity Service on Kony Fabric.

For more information, refer to the Facebook Developer documentation.

Note:

You only need to follow the steps mentioned in the first section of the Facebook Developer documentation, that is, the Enter Your Redirect URL section.

If the Facebook Console requires a target platform, select the option as Web.

Creating an app on the LinkedIn Developer Console
  1. Create an app in the developer console.
  2. Add the callback URL of the Kony Fabric Identity Service in the developer app.
  3. Get the Client ID and Client Secret from the developer app and paste it in the Identity Service on Kony Fabric.

For more information, refer to the LinkedIn Developer documentation.

Note:

You only need to follow the first step in the LinkedIn Developer documentation, that is, Configuring Your LinkedIn Application.

If the LinkedIn Console requires a target platform, select the option as Web.

Creating an app on the Office365 Developer Console
  1. Create an app in the developer console.
  2. Add the callback URL of the Kony Fabric Identity Service in the developer app.
  3. Get the Client ID and Client Secret from the developer app and paste it in the Identity Service on Kony Fabric.

For more information, refer to the Office365 Developer documentation.

Note:

You only need to follow the steps mentioned in the first section of the Office365 Developer documentation, that is, the Register your app section.

If the Office365 Console requires a target platform, select the option as Web.

After you obtain the Client ID and Client Secret for your app , you must specify these details for each identity service to enable its respective social authentication.

The following procedure explains how to specify the client details for the Kony Fabric Identity Service.

  1. Log on to your Kony account. The Dashboard page appears by default.
  2. In the left pane, click the Apps menu. The Custom Apps page appears.
  3. Find and click the ReusableLogin app. The ReusableLogin page appears along with the Configure Services tab and the Identity sub-tab opened by default.
    Note:

    You can find the app by typing the app's name in the Search box.

    The Kony Fabric app name will be same as your Kony Visualizer app name.
    If the Kony Fabric app is already associated with Kony Visualizer app, the services are added to the same Kony Fabric app.

  4. Click on the respective social login service.
    The service configuration page opens.
    • reusableFacebookLogin: for configuring Facebook Authentication.
    • reusableLinkedinLogin: for configuring LinkedIn Authentication.
    • reusableOffice365Login: for configuring Office365 Authentication.
  5. Enter the Client ID and Client Secret in the respective text boxes.
  6. Click Save.

You can follow the above procedure to specify the client details for any identity service.

Configuring User Credentials Authentication

To enable the authentication process when a user provides the user credentials to log into your app, you must integrate the component with the Kony User Repository service in the Kony Fabric console.

Kony User Repository is a repository service provided by Kony. The repository service helps you authenticate your app users when they try to log into your app using the user credentials. With the help of Kony User Repository service, you can also add users and create credentials for them to log into your app. The service also provides you an option to import your users list as a CSV file. Ensure that the CSV file conforms to the sample.

Configuring Identity Service Authentication

An identity service allows you to connect to your existing user accounts directory. For example, if you are maintaining your user account details in Kony User Repository, using the identity service, you can connect to the user repository and enable authentication of users to access your application. In the Kony Fabric console, you can create identity services. For more information, refer to Identity Services. The Login component allows you to associate with identity services for user authentication.

Note:

Ensure that you know the name of the identity service name to which you want to associate.

To associate the Login component with an identity service, do the following:

  1. In Kony Visualizer, open your app and the form on which Login component is placed.
  2. Select the Login component, and click the Component tab on the Properties pane.
  3. In the Provider Name box, type the name of the identity service to which the component to be associated.

You can invoke the associated identity service using the invokeIdentityService API.

Setting Properties

The Properties provided on the Component tab allow you to customize the UI elements and set constraints for fields in the Login component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information about how to set the properties by writing a JavaScript.

General

RememberMe Selected Image
Description: Specifies the file name of the image to be set as selected check box for the RememberMe field.
Syntax: rememberMeSelectedSource
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
Example:
this.view.ComponentID.rememberMeSelectedSource = "active.png";
RememberMe Unselected Image
Description: Specifies the file name of the image to be set as unselected check box for the RememberMe field.
Syntax: rememberMeUnSelectedSource
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
Example:
this.view.ComponentID.rememberMeUnSelectedSource = "inactive.png";
Encrypt Credentials
Description: Controls whether or not the credentials are encrypted before storing in Kony store.
Syntax: encryptCredentials
Type: Boolean
Read/Write: Read + Write
Remarks: Encryption is not supported for the Windows platform.
Example:
this.view.ComponentID.encryptCredentials = true;

Replace the "ComponentID" with the ID of the component in all examples in this document.
You can find the ID of the component on the Look tab.

Logo Properties

Logo Source
Description: Specifies the file name of the image to be set as logo for the Application.
Syntax: logoSource
Type: String
Read/Write: Read + Write
Remarks: Before setting the property:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
  • The image dimensions should be 40x40 DP.
Example:
this.view.ComponentID.logoSource = "logo.png";
Logo Scale Mode
Description: Specifies the scaling mode of the logo image.
Syntax: logoScaleMode
Type: Constant
Read/Write: Read + Write
Remarks: The following are the image scale options:
  • Fit To Dimensions
  • Maintain Aspect Ratio
  • Crop

For more information, refer to imageScaleMode.

Example:
this.view.ComponentID.logoScaleMode = 1;

Username Properties

Username Max Characters
Description: Specifies the maximum number of characters allowed by the Username field. Using the property, you can limit the user to enter not beyond a particular number of characters.
Syntax: usernameMaxChar
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.usernameMaxChar = 20;
Username Min Characters
Description: Specifies the minimum number of characters to be entered in the Username field.
Syntax: usernameMinimumChar
Type: Number
Read/Write: Read + Write
Remarks: The component throws an exception if you provide any invalid value.
Example:
this.view.ComponentID.usernameMinimumChar = 5;
Username Placeholder
Description: Specifies a placeholder text to be displayed in the Username field.
Syntax: usernamePlaceholder
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.usernamePlaceholder = "username";
Username Input Mode
Description: Specifies a type of input characters accepted by the Username field. Using the property, you can restrict the Username field to accept only required characters. For example, only numbers.
Syntax: usernameInputMode
Type: Constant
Read/Write: Read + Write
Remarks:

You can specify any one of the following:

  • Any: accepts all characters.
  • Numeric Only: accepts only numbers.
Example:
this.view.ComponentID.usernameInputMode = constants.TEXTBOX_INPUT_MODE_ANY;
Username Validation Message
Description: Specifies a message to be displayed when the length of the text entered in the Username field is less than the specified minimum length (Username Min Characters).
Syntax: usernameValidationMsg
Type: String
Read/Write: Read + Write
Remarks: If no message is defined in the property, “Invalid Username” message will be displayed by default. If user provides invalid inputs (such as undefined, invalid datatype, usernamemaximimChar is less than usernameMinimumChar property etc.), an exception is thrown. The user needs to handle this exception.
Example:
this.view.ComponentID.usernameValidationMsg = "Invalid Username";

Password Properties

Password Input Mode
Description: Specifies a type of input characters accepted by the Password field. Using the property, you can restrict the Password field to accept only required characters. For example, only numbers.
Syntax: passwordInputMode
Type: Constant
Read/Write: Read + Write
Remarks: You can specify any one of the following:
  • Any: accepts all characters.
  • Numeric Only: accepts only numbers.
Example:
this.view.ComponentID.passwordInputMode = constants.TEXTBOX_INPUT_MODE_ANY;
Password Max Characters
Description: Specifies the maximum number of characters accepted by the Password field.
Syntax: passwordMaxChar
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.passwordMaxChar = 15;
Password Min Characters
Description: Specifies the minimum number of characters to be entered in the Password field.
Syntax: passwordMinimumChar
Type: Number
Read/Write: Read + Write
Remarks: The component throws an exception if you provide any invalid value.
Example:
this.view.ComponentID.passwordMinimumChar = 5;
Password Placeholder
Description: Specifies a placeholder text to be displayed in the Password field.
Syntax: passwordPlaceholder
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.passwordPlaceholder = "Password";
Password Validation Message
Description: Specifies a message to be displayed when the length of the text entered in the Password field is less than the specified minimum length (Password Min Characters).
Syntax: passwordValidationMsg
Type: String
Read/Write: Read + Write
Remarks: If no message is defined in the property, “Invalid Password” message will be displayed by default.
Example:
this.view.ComponentID.passwordValidationMsg = "Invalid Password";

Sign-in Properties

Forgot Password Text
Description: Specifies the text to be displayed on the Forgot Password button.
Syntax: forgotPasswordText
Type: String
Read/Write: Read + Write
Remarks: The default value of the property is “Forgot Password”.
Example:
this.view.ComponentID.forgotPasswordText = "Forgot Password?";
Remember Me
Description: Controls whether or not the Remember Me check box is visible to the user.
Syntax: remembermeProperty
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.remembermeProperty = true;
Submit Button Text
Description: Specifies the text to be displayed on the Submit button.
Syntax: submitButtonText
Type: String
Read/Write: Read + Write
Remarks:

The default value of the property is “SIGN IN”.

Example:
this.view.ComponentID.submitButtonText = "Sign In";

Login Properties

Provider Name
Description: The user can develop a Custom Identity service in the MF app. This identity can be invoked by the onClick event of Login Button.
Syntax: providerName
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.providerName = "userstore";
Touch ID
Description: Controls whether or not the TouchID option is visible to the user.
Syntax: touchIDProperty
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.touchIDProperty = true;
Social Login
Description: Controls whether or not the social authentication option is visible to the user.
Syntax: socialLoginVisible
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.socialLoginVisible = true;
Social Login Center Y
Description: Specifies the position of the Social Login FlexContainer vertically on the screen.
Syntax: socialLoginCenterY
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.socialLoginCenterY= "80%";
Touch ID Center Y
Description: Specifies the position of the Touch ID FlexContainer vertically on the screen.
Syntax: touchIdCenterY
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.touchIdCenterY = "90%";

Facebook Properties

Facebook Center X
Description: Specifies the horizontal position of the Facebook icon on the screen.
Syntax: facebookCenterX
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.facebookCenterX = "50%";
Facebook Source
Description: Specifies the file name of the image to be set as a Facebook icon.
Syntax: facebookSource
Type: String
Read/Write: Read + Write
Remarks: The property is respected only when the Facebook Login property is set to true.
Before setting the property:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
  • The image dimensions should be 40x40 DP.
Example:
this.view.ComponentID.facebookSource = "fb.png";
Facebook Login
Description: Controls whether or not the Facebook icon is visible to the user.
Syntax: facebookLogin
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.facebookLogin = true;

LinkedIn Properties

LinkedIn Center X
Description: Specifies the horizontal position of the LinkedIn icon on the screen.
Syntax: linkedinCenterX
Type: Number
Read/Write: Read + Write
Example:
this.view.ComponentID.linkedinCenterX = "65%";
LinkedIn Source
Description: Specifies the file name of the image to be set as LinkedIn icon.
Syntax: linkedinSource
Type: String
Read/Write: Read + Write
Remarks: The property is respected only when the LinkedIn Login property is set to true.
Before setting the property:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
  • The image dimensions should be 40x40 DP.
Example:
this.view.ComponentID.linkedinSource = "link.png";
LinkedIn Login
Description: Controls whether or not the LinkedIn icon is visible to the user.
Syntax: linkedinLogin
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.linkedinLogin = false;

Office365 Properties

Office365 Center X
Description: Specifies the horizontal position of the Office365 icon on the screen.
Syntax: office365CenterX
Type: String
Read/Write: Read + Write
Example:
this.view.ComponentID.office365CenterX = "40%";
Office365 Source
Description: Specifies the file name of the image to be set as a Office365 icon.
Syntax: office365Source
Type: String
Read/Write: Read + Write
Remarks: The property is respected only when the Facebook Login property is set to true.
Before setting the property:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
  • The image dimensions should be 40x40 DP.
Example:
this.view.ComponentID.facebookSource = "office365.png";
Office365 Login
Description: Controls whether or not the Office365 icon is visible to the user.
Syntax: office365Login
Type: Boolean
Read/Write: Read + Write
Example:
this.view.ComponentID.office365Login = false;

Skin Section

This section provides details on the properties related to the skin of the Login component.

Login Card Background
Description: This property enables the user to change the background of the login card.
Syntax: loginCardBackground
Read/Write: Read + Write
Example:
this.view.ComponentID.loginCardBackground = "skin_name";
Login Background
Description: This property enables the user to change the background which is lying below the login card.
Syntax: socialBackground
Read/Write: Read + Write
Example:
this.view.ComponentID.socialBackground = "skin_name";
Logo Background
Description: This property enables the user to change the background of the logo in the login component.
Syntax: logoBackground
Read/Write: Read + Write
Example:
this.view.ComponentID.logoBackground = "skin_name";
Login Button
Description: This property enables the consumer to change the skin of the sign in button.
Syntax: sknbtnLogin
Read/Write: Read + Write
Example:
this.view.ComponentID.sknbtnLogin = "btn_skin";
Forgot Password
Description: This property enables the user to change the color of the forgot password button.
Syntax: sknForgotPassword
Read/Write: Read + Write
Example:
this.view.ComponentID.sknForgotPassword = "skin_name";
Credentials Skin
Description: This property enables the user to change the skin of the username field and password field (where credentials are provided).
Syntax: sknCredentials
Read/Write: Read + Write
Example:
this.view.ComponentID.sknCredentials = "skin_name";

Defining Events

You can define events to be executed when an action is performed. You can configure the events directly on the Actions tab or by writing a JavaScript. To configure the events on the Actions tab, click the Edit button against each event. For more information, refer to Add Actions.

This section provides details about each event that help you define the actions by writing a JavaScript.

onErrorCallback Event
Description:

The event is invoked when an exception or an error occurs.

The event also provides an error object with the error code and message. You can refer to the given table to handle the error based on the error code.

Syntax:

onErrorCallback(error)

Remarks: The component throws an exception if you do not define this event and you must handle it.
Example:
this.view.componentID.onErrorCallback = function(error)
{
if(error.code == 90001)
{
	alert(“No Internet”);
}
}

ErrorCode table for the error object in onErrorCallback Event.

Code Message
90001

No Internet Connection Available

90002 Please Connect to Kony Fabric
90003 Login Success but loginSuccessEvent not defined
90004 Login Failed but loginFailureEvent not defined
90005 Username too small (This message changes based on the Username validation message)
90006 Password too small (This message changes based on the Password validation message)
90007 Touch ID not supported
90008 Authentication does not start because Touch ID has no enrolled fingerprints
90009 Authentication does not start because the passcode is not set on the device
90010 Login using Username and Password to enable Touch ID
forgotPasswordOnClick Event
Description: The event is invoked when the user clicks on Forgot password button. In the event, define actions to be executed when Forgot password button is clicked.
Syntax:

forgotPasswordOnClick()

loginFailure Event
Description: The event is invoked when the login is failure. In the event, define actions to be executed if login is failure.
Syntax:

loginFailureEvent(error)

loginSuccess Event
Description: The event is invoked when the login is successful. In the event, define actions to be executed if login is successful.
Syntax:

loginSuccessEvent(response)

passwordOnDone Event
Description: The event is invoked when a user taps the keyboard action key of the Password field.
Syntax:

passwordOnDone()

Remarks: The event will not be invoked when a user clicks next text field without clicking the keyboard action key.
remembermeOnSelection Event
Description: The event is invoked when the Remember Me check box is toggled. In the event, define actions to be executed when the Remember Me check box is selected and unselected.
Syntax:

remembermeOnSelection()

submitOnClick Event
Description: The event is invoked when the Submit button is clicked/tapped. In the event, define actions to be executed when the Submit button is clicked.
Syntax:

submitOnClick()

usernameOnDone Event
Description: The event is invoked when a user taps the keyboard action key of the Username field.
Syntax:

usernameOnDone()

Remarks: The event will not be invoked when a user clicks the next text field without clicking keyboard action key.

APIs

The following are the APIs pertaining to the Login component.

enableTouchID

The API enables or disables the Touch ID pop-up.

Syntax
enableTouchID()
Parameters

None

Return Value

None

Remarks

If the device supports the Touch feature, the Touch ID functionality is enabled automatically.

Example
this.view.ComponentID.enableTouchID();
getPassword

The API fetches the text specified in the Password field.

Syntax
getPassword()
Parameters

None

Return Value
Password [String]:

Returns the text entered in the Password field.
Remarks

If you use any third-party login such as Facebook, LinkedIn, and so on, the API returns an empty string.

Example
var pwd = this.view.ComponentID.getPassword();
if (pwd.length() < 4) {
    alert("Invalid Password Entered. Please try again.");
}
getUsername

The API fetches the text specified in the Username field.

Syntax
getUsername()
Parameters

None

Return Value
Username [String]:

Returns the text entered in the Username field.
Remarks

If you use any third-party login such as Facebook, LinkedIn, and so on, the API returns an empty string.

Example
var username = this.view.ComponentID.getUsername();if (!this.validateUsername(username)) {alert("Invalid user name. Please try again.");}
invokeIdentityService

The API invokes the specified identity service.

Syntax
invokeIdentityService(providename)
Parameters
providername [Mandatory]:

Name of the identity service to be invoked.
Return Value

None

Remarks

You will need the API to invoke a service when you use custom identity service for user authentication.

Example
this.view.ComponentID.invokeIdentityService("userstore")
rememberMe

Use the API to make your app remember the specified user credentials. Invoke the API only when the login is successful.

Syntax
rememberMe()
Parameters
None
Return Value

None

Example
this.view.ComponentID.rememberMe();

Publishing an App

After adding the Login component to your app and configuring the necessary configurations, you must publish the app to Kony Fabric. For more information, refer to Publish a Project to Kony Fabric.

Deleting the Login Component

To delete the Login component from your app, you must delete the component from the form and the ReusableLogin app from Kony Fabric.

To delete the Login component, do the following:

  1. In Kony Visualizer, open your app and then open the form to which you added the component.
  2. Click the context menu of the Login component, and then click Delete. A confirmation dialog appears.
    login_tooldel.png
  3. Click OK.
  4. Log on to your Kony account. The Dashboard page appears by default.
  5. In the left pane, click the Apps menu. The Custom Apps page appears.
  6. Find the ReusableLogin app.
    Note:

    You can find the app by typing the app's name in the Search box.

  7. Point to the context menu of ReusableLogin, and click Delete Application.
    login_delete.png