Security

Blog
Security
Monday, January 2, 2017PrintSubscribe
Authenticating Users with Windows Live

Every application requires a list of user accounts that have been granted (or denied) access to the data. In order to maintain membership consistency, every user needs to be associated with a password. Recommended practices for passwords dictate that every password must be unique, contain a long series of mixed alphanumeric characters, and that users should change their passwords regularly. It is likely that many users do not follow these recommended practices, and tend to reuse simple and easy to remember passwords across various systems. This can lead to a security issue if one of the systems becomes compromised – malicious users can then gain access to all systems that share the same password.

In an attempt to solve solutions to the problems mentioned above, authentication can be delegated to a “higher authority”. Application admins can register their app to accept responses from a federated authentication server. When a new user attempts to sign up to the application, they can choose to register an account using their federated account. They will be redirected to the authentication server’s login page, and grant permission for the app to gain access to their email. This information is then used to automatically create an account in the app and sign them in. Therefore, the user simply has to ensure that their account in the federated system is secure.

Applications created with Code On Time can use OAuth 2.0 to register their users. Simply define a resource under the Content Management System (CMS) that lists your client ID, client secret, and redirect URI. A local redirect URI can be defined for testing purposes.

Registering Your App

The first step to enable Windows Live authentication is to register your app.

Navigate to https://apps.dev.microsoft.com. In the top-right corner, press “Add an App”. Enter a name for your app and press “Create Application”.

Adding an application to Windows Live.

Under the “Application Secrets” section, press “Generate New Password”.

Generating a new password for the application.

Make sure to copy the new secret.

Next, press “Add Platform” under the “Platforms” section. Select “Web”.

Adding a platform for the app.

Enter your application URI, with the path “/appservices/saas/windowslive”. Optionally add a local URI for testing purposes.

Adding redirect URI for the app.

Scroll to the bottom of the page, and press “Save”.

Enabling Windows Live Login in the App

The connection needs to be registered in your application. Navigate to the Site Content page of your app, and create a new record with the following settings:

Property Value
File Name windowslive
Path sys/saas
Text

Client Id:
1234567890

Client Secret:
12345mysecret67890

Redirect Uri:  
https://demo.codeontime.com/appservices/saas/windowslive

Local Redirect Uri:
http://localhost:31733/appservices/saas/windowslive

Make sure to change the Text to the correct values for your app.

Logging In with Windows Live

Log out of your app, and press Login to open the login form. The “LOGIN WITH WINDOWS LIVE” action will now be displayed.

The login form now displays a button to "LOGIN WITH WINDOWS LIVE".

Press “LOGIN WITH WINDOWS LIVE”, and you will be redirected to the Windows Live login screen. Once logged in, a permission request will be displayed.

Windows Live displays a permission request - the app is requesting access to the profile's email.

Press “Yes”, and your browser will be redirected back to the app. The app will attempt to sign in with the account matching the returned email. If no account is found, then an account will be created with the email as the username, and a random GUID assigned to the password and password answer.

Monday, January 2, 2017PrintSubscribe
Authenticating Users With Facebook

Every application requires a list of user accounts that have been granted (or denied) access to the data. In order to maintain membership consistency, every user needs to be associated with a password. Recommended practices for passwords dictate that every password must be unique, contain a long series of mixed alphanumeric characters, and that users should change their passwords regularly. It is likely that many users do not follow these recommended practices, and tend to reuse simple and easy to remember passwords across various systems. This can lead to a security issue if one of the systems becomes compromised – malicious users can then gain access to all systems that share the same password.

In an attempt to solve solutions to the problems mentioned above, authentication can be delegated to a “higher authority”. Application admins can register their app to accept responses from a federated authentication server. When a new user attempts to sign up to the application, they can choose to register an account using their federated account. They will be redirected to the authentication server’s login page, and grant permission for the app to gain access to their email. This information is then used to automatically create an account in the app and sign them in. Therefore, the user simply has to ensure that their account in the federated system is secure.

Applications created with Code On Time can use OAuth 2.0 to register their users. Simply define a resource under the Content Management System (CMS) that lists your client ID, client secret, and redirect URI. A local redirect URI can be defined for testing purposes.

Registering Your App With Facebook

The first step to configuring Facebook Login is to register your app with Facebook. Navigate to https://developers.facebook.com. In the top-right corner, hover over “My Apps” and press “Add a New App”.

Creating a new app in the Facebook Developers website.

Specify a Display Name, Contact Email, and Category, and press “Create App ID”.

On the “Add Product” screen, press “Get Started” next to “Facebook Login”.

Getting started with Facebook Login.

Under “Valid OAuth redirect URIs”, add a URI for your app URL, with the path “/appservices/saas/facebook”. It is recommended to add a test redirect URI when running the app locally on your PC.

Configuring OAuth for the application.

Next, press “Dashboard” section on the navbar on the left side of the screen. Take note of the App ID and App Secret values.

Finding the App ID and App Secrets.

Enabling Facebook Authentication in your App

Navigate to your website, and navigate to your Site Content page. Create a new record with the following properties:

Property Value
File Name facebook
Path sys/saas
Text

Client Id:
1234567890

Client Secret:
12345mysecret67890

Redirect Uri:  
https://demo.codeontime.com/appservices/saas/facebook

Local Redirect Uri:
http://localhost:30195/appservices/saas/facebook

Make sure to replace the values in the “Text” property with the correct values for your app. Save the new record, and log out of the app.

Logging In With Facebook

On the login screen, the “LOGIN WITH FACEBOOK” action will now be displayed at the top of the form.

Logging in with Facebook from the Login screen

Press the “LOGIN WITH FACEBOOK” button, and the app will redirect to authenticate with Facebook. Once signed in, it will display a permissions popup.

Facebook is requesting the user to grant access to the application.

Press “Continue as XXX” button to grant access to your profile and email address for that app. It will redirect back to your app and attempt to log in as a user with that email. If the user does not exist, it will be created. The password and password answer will be randomly generated.

Note that in order to allow Facebook users other than the app creator to authenticate with the app, the app must be marked as “Public” under the App Review section of the developer site.

Monday, October 27, 2014PrintSubscribe
Handling Login and Logout

In order to log into a web app generated with Code On Time, the user must first activate the login modal window. When using Touch UI, click on the Menu button in the top left corner.

image

Then, select the Login button in the menu.

image

This will open the modal login window. Enter the username and password in the fields provided, and press Login to initiate the login process.

Default login modal form.

The Desktop UI uses a flyover login dialog. Mouse over the top right corner of the screen, next to the words “Login to this website”, and enter the user credentials when the dialog appears.

image

If a standalone login page has been generated, then the username and password fields will be visible in the top right corner of the Login page. Enter the user credentials and press Login.

image

Once the user clicks the Login button, the $app.login JavaScript method will be called on the client. The login() meth0d invokes the web service on the server and executes DataControllerService.Login method, seen below.

public bool Login(string username, string password, bool createPersistentCookie)
{
    return ApplicationServices.Login(username, password, createPersistentCookie);
}

The DataControllerService.Login method then calls ApplicationServices.Login method, which creates an instance of ApplicationServices and calls the virtual method UserLogin.

public static bool Login(string username, string password, bool createPersistentCookie)
{
    ApplicationServices services = new ApplicationServices();
    return services.UserLogin(username, password, createPersistentCookie);
}

The UserLogin method’s default implementation will validate the user using the application’s Membership class. If successfully validated, it will set the authentication cookie and return true. Otherwise, it will return false.

public virtual bool UserLogin(string username, string password, bool createPersistentCookie)
{
    if (Membership.ValidateUser(username, password))
    {
        FormsAuthentication.SetAuthCookie(username, createPersistentCookie);
        return true;
    }
    else
        return false;
}

Any custom user control can call the $app.login method in order to log in the user – an example of this would be the standalone login page.

If it is necessary to the project requirements of your application, the UserLogin method can be overridden to extend the functionality. This allows setting of session variables, executing custom scripts on the server, logging user access, to name a few examples.

Logging In From JavaScript

Suppose that we want to add a button to the home page of the app that allows the user to log in with “user” account without having to use the standard login form.

The first step will be to add a page and a custom user control to the page. Start the Project Designer. In the Project Explorer window, click on the New Page button.

Adding a new page to the project.

Specify these properties:

Property Value
Name LoginPage
Roles ?

Press OK to save the page. In the Project Explorer, drag and drop the new page to right of Home page to place it second in the site menu.

Dragging a page onto the right side of Home page node.     Login Page has been placed after Home in the site menu.

Right-click on the new page and press New Container.

Adding a new container to the 'Login Page' page.

Preserve the default settings and press OK to save. Right-click the new container and press New Control.

Adding a new control to the 'Login Page' page.

Next to the User Control field, click on the New User Control icon.

Creating a new user control.

Enter a name of “CustomLoginButton” and press OK to save the user control. Press OK again to bind the control to the page.

On the toolbar, press Browse to generate the web app and the new user control file. When complete, right-click on the control and press Edit in Visual Studio.

Editing the user control in Visual Studio.

The file will open in Visual Studio. Replace the contents after the <%@ Control%> element with the following:

<div id="CustomLoginButton" data-app-role="page" data-activator="Button|CustomLoginButton">
    <div data-role="content">
        <p>
            <button id="login-admin-button">Login As Administrator</button>
        </p>
    </div>
</div>

<script type="text/javascript">
    (function () {
        $(document)
            // attach event to button
            .on('click', '#login-admin-button', function () {
                // call login method
                $app.login('admin', 'admin123%', true, function () {
                    // on success, navigate to Home
                    window.location.replace('/Pages/Home.aspx');
                }, function () {
                    // on failure, show an alert
                    alert('Login failed!');
                });
                return false;
            });
    })();
</script>

Run the project by pressing F5, and navigate to the Login Page. The page will have a single button present.

A single button is present on the 'Login Page'.

Click on the button. The page will successfully log in the user with “admin” account and redirect to the Home page.

The user has been logged in and redirected to the Home page.

Extending Login

The Login authentication method can also be overridden to implement custom functionality.

For example, suppose that we need to allow anyone to take the name of any user if they provide a secret key. Let’s override the Login method to check for presence of the secret key in the password. If the password is the key, then the user will be authenticated. Otherwise, the base method will be called to check for the user’s actual password.

Start the app generator. Click on the project name, and press Develop to open the project in Visual Studio.

In the Solution Explorer of Visual Studio, right-click on ~/App_Code folder and press Add | Class.

Adding a class to the application using Visual Studio.

Assign a name to the class file.

Assigning a name to the class file.

Replace the contents of the file with the following:

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;

namespace MyCompany.Services
{
    public partial class ApplicationServices
    {
        public override bool UserLogin(string username, string password, bool createPersistentCookie)
        {
            if (password == "secret")
            {
                FormsAuthentication.SetAuthCookie(username, createPersistentCookie);
                return true;
            }
            else
                return base.UserLogin(username, password, createPersistentCookie);
        }
    }
}

Visual Basic:

Imports Microsoft.VisualBasic

Namespace MyCompany.Services
    Partial Public Class ApplicationServices
        Public Overrides Function UserLogin(username As String, password As String, createPersistentCookie As Boolean) As Boolean
            If password.Equals("secret") Then
                FormsAuthentication.SetAuthCookie(username, createPersistentCookie)
                Return True
            End If
            Return MyBase.UserLogin(username, password, createPersistentCookie)
        End Function
    End Class
End Namespace

Save the file, and press F5 on your keyboard to start the application. Login to the application with the username “admin” and the password “secret”.

Logging into admin account with the secret password.

The application will log you in successfully and grant you access to the user’s pages.

Access has been granted to the user with admin priveledges.

Logging Out

The logout procedure is very similar to login. To log out from a Touch UI web app, click on the Menu button in the top right corner of the page, and click Logout from the menu panel.

image

When a user clicks on the Logout button, the JavaScript method $app.logout is called. The method will invoke the web service to trigger the DataControllerServices.Logout method.

public void Logout()
{
    ApplicationServices.Logout();
}

The Logout() web method will invoke ApplicationServices.Logout().

public static void Logout()
{
    ApplicationServices services = new ApplicationServices();
    services.UserLogout();
}
The ApplicationServices.Logout static method will create an instance of ApplicationServices and invoke UserLogout virtual method.
public virtual void UserLogout()
{
    FormsAuthentication.SignOut();
}
The UserLogout method will trigger the SignOut method of forms authentication, which will remove the authentication cookie.

Logging Out From JavaScript

Let’s add a logout button to the user control that was created previously. Switch back to the user control file open in Visual Studio, and replace the contents after the <% Control %> element with the following:

<div id="CustomLoginButton" data-app-role="page" data-activator="Button|CustomLoginButton">
    <div data-role="content">
        <p>
            <button id="login-admin-button">Login As Administrator</button>
            <button id="logout-button">Logout</button>
        </p>
    </div>
</div>

<script type="text/javascript">
    (function () {
        $(document)
            // attach login event to button
            .on('click', '#login-admin-button', function () {
                // call login method
                $app.login('admin', 'admin123%', true, function () {
                    // on success, navigate to Home
                    window.location.replace('/Pages/Home.aspx');
                }, function () {
                    // on failure, show an alert
                    alert('Login failed!');
                });
                return false;
            }).on('click', '#logout-button', function () {
                $app.logout(function () {
                    // refresh the page
                    window.location.reload();
                })
            });
    })();
</script>

Save the file, and open the page in your browser. Note that there are now two buttons.

Login and Logout custom buttons are present on the page.

Click on the first one and you will be logged into the app as “admin”. Click on the second one and it will log the user out, and refresh the page.

Extending Logout

The UserLogout method can also be overridden to add custom functionality. For example, suppose that we need to record when a user logs out. In the class file created in the previous section, add another overridden class after UserLogin method:

C#:

public override void UserLogout()
{
    Trace.WriteLine(String.Format(
                        "User {0} has logged out.", 
                        HttpContext.Current.User.Identity.Name));
    base.UserLogout();
}

Visual Basic:

Public Overrides Sub UserLogout()
    System.Diagnostics.Trace.WriteLine(String.Format(
                        "User {0} has logged out.",
                        HttpContext.Current.User.Identity.Name))
    MyBase.UserLogout()
End Sub

Press F5 to run the app in debug mode. Log in to the application, and then log out. Switch back to Visual Studio and you will notice that the line has been printed to the Output window.

The trace line has been printed to the Output window.

Note that the line may not print in Web Site Factory apps.