Introduction :
In our daily life, we are using few application which requires user login authentication.
For an example Facebook, which is very much popular among us also follows the same. Here with this blog, I will describe the way to implement user login functionality into our app using ACS i.e. Appcelerator Cloud Service.
Description :
Let me first explain the whole process without including the ACS in scenario.
On development point of view, to make the user login functionality, generally we need to have a server on somewhere which will contain all the necessary information related to users like username, password, email, firstname, lastname etc. That means we obviously need to spend some money on server setup.
Then, in our app we should have a page to enter user data (user id, password) and a button to submit those user data. Now on submit of user data, generally we will call some API which will communicate with our server to validate user credential.So again to make the API, we need to create some services which will be hosted on server, which means to invest more effort in form of man power, setups, server-side programming and so many other related things.
Lets get introduced to ACS (Appcelerator Cloud Service) here. Only introducing ACS removes all our headache to maintain any server and server programming. ACS provides a place on cloud to maintain user data even for development and production mode also with services which required to communicate with their server.
To demonstrate ACS for login implementation, let’s create a mobile app first with Alloy using Titanium studio. To include ACS service we just need to check the check-box while creating the project using project template which will automatically include cloud module ‘ti.cloud’ with our app. That’s it only. Now let’s dive into the code.
Here is our UI code, which holds the text boxes and button as explained on above as a view for alloy.
index.xml
<Alloy> <Window class="container"> <TextField id="txtUserName"></TextField> <TextField id="txtPwd"></TextField> <Button id="loginBtn" onClick="loginUser"></Button> </Window> </Alloy>
Lets define few styling for above UI in index.tss file.
index.tss
".container": {
backgroundColor:"white",
layout : 'vertical'
},
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
},
'#txtUserName' : {
width : 200,
height : 50,
borderRadius : 10,
top : 50,
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'User Name'
},
'#txtPwd' : {
width : 200,
height : 50,
borderRadius : 10,
top : 20,
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Password',
passwordMask : true
},
'#loginBtn' : {
width : 200,
height : 50,
title : 'Login',
style : Ti.UI.iPhone.SystemButtonStyle,
top : 20
}
On the above view, we have a button with an ‘onclick’ event associated with a function defined on controller which exactly do the validation for user on cloud.
index.js
// Open the view on window
$.index.open();
// Function to get user login
function loginUser() {
// Created variable to hold cloud module
var Cloud = require('ti.cloud');
//
Cloud.Users.login({
login: $.txtUserName.value,
password: $.txtPwd.value
}, function (result) {
if (result.success) {
var user = result.users[0];
alert('First name: ' + user.first_name);
} else {
alert('Login failed');
}
});
}
The very first line on controller will open the view on screen.
Then we have a function called ‘loginUser’ which does the magic. On this function a variable ‘Cloud’ has been defined, which holds the cloud module that we have attached while creating this project. This module has a function called ‘login’ which exactly used to communicate with Appcelerator cloud to validate any user. So here we have passed the user login and password as data which will be sent to server and in response it will send user data back upon the correct user validation.
Summary :
So above I have demonstrated, how easily without spending time on server adjustment and with few lines of code by taking the advantage of Appcelerator cloud service not only we can validate user in our app for any purpose but also we can manage them. Also we can have chat and so many other important functionality being performed.
THAT’S IT
Written By: Raju Mahato, Software Developer, Mindfire Solutions
