After you created your NetPass database and configured your web config, now it's a time to get this authentication business done.
In this article i will show you how to embed into your Flex/ActionScript application authentication and authorization services based on NetPass Membership and Aplication Role Management provider for ASP.NET.
First thing you need for your Flex Application is to declare webservices connection, you can do it following way:
<mx:WebService id="wsNetPass" wsdl="/ws/netpass.asmx?WSDL" fault="wsNetPass_fault(event)" showBusyCursor="true">
<mx:operation name="validate" result="wsNetPass_result(event)">
<mx:request>
<username />
<password />
</mx:request>
</mx:operation>
</mx:WebService>
This webservice declaration example using only Validate function of NetPass, since it is only one you need to authenticate your users.
Your login form could look somewhere like this:
<mx:Canvas id="loginBox" creationCompleteEffect="fxTools" width="260" height="200" horizontalCenter="-1" verticalCenter="0.5" borderStyle="solid" borderThickness="0" backgroundColor="#fafafa" cornerRadius="5" borderColor="#90c4de" shadowDirection="right" shadowDistance="8" dropShadowColor="#000000" dropShadowEnabled="false">
<mx:Image x="10" y="10" source="assets/icons/png-48/user1_lock.png"/>
<mx:Label x="10" y="88" text="Username:"/>
<mx:TextInput x="85" y="87" id="txtUsername" text="demo"/>
<mx:Label x="16" y="114" text="Password:"/>
<mx:TextInput x="85" y="113" id="txtPassword" displayAsPassword="true" text="demo"/>
<mx:Button x="165.8" y="168" label="Cancel" id="btnCancel" click="btnCancel_click(event)">
<mx:icon>@Embed(source='12-em-cross.png')</mx:icon>
</mx:Button>
<mx:Button x="83.8" y="168" label="Login" id="btnLogin" click="btnLogin_click(event)">
<mx:icon>@Embed(source='16-arrow-right.png')</mx:icon>
</mx:Button>
<mx:HRule x="10" y="156" width="240" height="4"/>
<mx:HRule x="10" y="66" width="240" height="4"/>
<mx:Label x="85" y="35" text="Workspace Login" color="#557d90" fontSize="14" fontWeight="bold"/>
</mx:Canvas>
As you can see here it has two input fields, one of them marked as password field. Plus you have two buttons, where one of them performs btnLogin_click action when user presses on it:
private function btnLogin_click(e:MouseEvent):void
{
//Send request to NetPass Validate service
if (txtUsername.text == "" || txtPassword.text == "")
{
currentState = "LoginError";
LoginStatus.text = "Username and Password fields can't be empty"
}
else
{
wsNetPass.validate(txtUsername.text, txtPassword.text);
}
}
This code snippet not allows username and password fields to be empty. Of course you can use some field validations, but for the moment there is no need to make complex thins even more complex.
When wsNetPass.validate executed, it sends request to your ASP.NET webservice with username and password details provided by user. NetPass on server side validates provided credentials and replies back to your Flex Application with one of these two statuses:
- OK - when authentication went fine and user authorized to access the system, or
- FAILED - when authentication failed
Please don't forget, that for security reason NetPass have locks enabled, so if user enters wrong username and/or password few times, user account becomes locked and you will need to use your Membership Services console (SiteAdmin CMS, Grafeio Workspace or your own) to unlock user account.
Your NetPass Validation server reply handler function for ActionScript could look like this:
/**
* Handles NetPass result replies
*/
private function wsNetPass_result(e:ResultEvent):void
{
switch (e.result.toString())
{
case "OK":
//your action goes here
break;
default:
currentState = "LoginError";
LoginStatus.text = "Authentication failed. Wrong Username or Password"
break;
}
}
Basically that's it.
