User Authentication

Sign In View

Sign In view will prompt the user to enter email and password.

Ctrl-click views and select New - HTML File.

Enter signin.scala.html in the name field.

Double-click HTML 5 file.

If prompted, click Add to add the file to version control.

Browse to the project repository to view the file:

LineDrop Play/Scala Web Application - Sign In View

Copy the contents of the file and paste them into signin.scala.html replacing the original code.

The view contains a hidden csrf field used in jQuery. The field’s value is passed by the controller. The view references the signin.css stylesheet and signin.js script.

Sign In jQuery

Signin.js is a companion file to the Sign In view.

Expand the public directory and ctrl-click javascripts and select New - File.

Type in signin.js in the name field and press Enter key.

If prompted, click Add to add the file to version control.

Browse to the project repository to view the file:

LineDrop Play/Scala Web Application - Sign In jQuery

Copy the contents of the file and paste them into file replacing the original code.

The top two functions are event handlers to associate the button tap and the Enter key with the validate function.

The validate function checks that the string entered in the password field has at least 6 characters and that the value of the field does not equal the placeholder string. Function also checks that the email contains the ‘@’ symbol. If conditions pass, the sign_in function is called.

Hash function creates a structured AJAX request of POST type to a URL /authenticate/json. The payload of the request is a JSON-formatted string carrying email and password.

CSRF token, stored on in a hidden field, is added to the header of the request.

On a successful server response, the page is redirected to /subscribers.

Subscribers View

For now, let’s create a simple subscriber’s view to support the sign in process. Later, we will add code to the view to present the subscriber data. Subscriber view will eventually be accessible only to the authenticated users and thus will be placed in the secure package.

Ctrl-click views and select New - Package.

Type in views.secure and press Enter to create the new package.

Ctrl-click secure and select New - HTML File.

Enter subscribers.scala.html in the name field.

Double-click HTML 5 file.

If prompted, click Add to add the file to version control.

Add a temporary welcome message to the body of the view. The view should look similar to:

User Model

Open the User model and add a UserAuthenticateForm case class to support the JSON formatted data in the POST request.

Add a new method to the UserOperations to authenticate a user by email and password.

The method finds the user by email, checks if the hash has been generated, and then compares the hash of the password string to the stored value. If all conditions pass, Some(user) is returned; otherwise, None is returned.

Example: LineDrop Play/Scala Web Application - User Model

Authentication Controller

Add a new JSON Reads converter to map the request data to UserAuthenticateForm instance.

Add a signin method to render the Sign In view.

The method renders the Sign In view and passes it a CSRF token.

Add a method to sign a user out.

The method redirects to the Sign In page replacing the entire session, essentially logging the user out.

Add a method to handle the AJAX POST request.

Authentication controller’s authenticate_json method reads the POST request and maps the JSON payload into a UserAuthenticateForm object. The User Operations' authenticate is invoked passing email and password. If the authentication is successful, a session token is read from the session object created with the Session Operations’ create method.

The session token is passed to the client using the withSession modifier along with the success message allowing the browser to store a cookie with the session information. If the user could not be authenticated, failure message is printed.

Example: LineDrop Play/Scala Web Application - Authentication Controller

Dashboard Controller

Once a user has been signed in, they will be redirected to the Subscribers view, rendered by the Dashboard controller.

Ctrl-click controllers and select New - Scala Class.

Enter DashboardController in the name field and double-click Class.

If prompted, click Add to add the file to version control.

Add the following import statements below the package declaration:

Delete the current DashboardController class definition and replace it with the following:

Add subscribers method to display the temporary view after a user has signed in. We will update the method later to present subscriber data.

Please note the structure of the file path: views.html.secure.filename. Views package is followed by html and then by the inner package name.

Routing

Open routes and add the following entries.

Test

Before testing, please make sure that the database and the application are running.

Application Response

Open Google Chrome and browse to http://localhost:9000. Click the Sign In link at the top of the page.

Test by leaving the fields blank, by entering a password that is less than 6 characters, by providing incorrect email format, and by entering a wrong password.

Finally, enter a valid email and password. On a successful log in, you are redirected to the temporary Subscribers view.

Log

Logger will have printed debug messages in the Terminal window. The log has also been written to /logs/application.log in the project’s directory.

Database Records

Launch MongoDB Compass.

When prompted, enter mongodb://localhost as the connection string and click Connect.

Click sample database.

Click on sessions in the left panel. The collection will contain a new session created for the user.

Review

Let’s review the process.

...

Email and password are entered. Input is checked by the validate method and the sign_in method is called. An AJAX request is made to /authenticate/json carrying email and password data in JSON format.

The router matches URL syntax to route definition and invokes the Authentication Controller's authenticate_json. The method reads the POST request and maps the JSON payload into a UserAuthenticateForm class using a JSON Reads converter.

User Operations' authenticate is invoked. If the user is authenticated, a session token is read from the session object created by Session Operations. The controller returns an OK result containing a cookie with the session token.

Commit and Push Changes

Select VCS - Commit from the top menu.

Review the files and directories and enter the commit message.

Click the dropdown arrow on the Commit button and select Commit and Push.

Click Push to confirm.


Next: Secure Access