Standalone SPA5 with REST Level 2 and OAuth 2.0

Sign users in and out with the REST Level 2 and OAuth 2.0 Authorization Code flow with PKCE.

The fifth Single Page Application in the RESTful Workshop series will look just like its twin, the Standalone SPA4 with RESTful Hypermedia and OAuth 2.0. It displays a list of products from the backend application created with Code On Time. Its users are authenticated with OAuth 2.0 Authorization Code flow with PKCE. The user picture and email are also extracted from JWT courtesy of OpenID Connect.

What is different? This app is not taking advantage of the hypermedia. Instead it makes use of the REST resources with the appropriate HTTP methods. Hence the REST Level 2 designation according to the Richardson Maturity Model.

Standalone SPA5 with REST Level 2 and OAuth 2.0
Standalone SPA5 with REST Level 2 and OAuth 2.0

Registering SPA5 for OAuth 2.0 and CORs

Client app SPA5 is the standalone app and will require its own registration in the backend application database. Registration will make the SPA5 known to the backend and enable OAuth 2.0 Authorization and cross-domain requests to its RESTful API Engine.

Use the App Management API to create a registration record with the following data:

JSON

Make a note of the client_id of the new application registration record.

App Initialization

This is the initialization code of SPA5. Make sure to set the clientId global variable to the value of the client_id from the application registration record.

JavaScript

There is no need for the apiHypermedia variable. The new app will need to keep track of the page index and size . Function handleActions will replace its counterpart handleHypermedia.

This is the original code from SPA4:

JavaScript

User Authentication

Authentication of users is largely the same in both SPA5 and SPA4.

Login

The new app explicitly specifies the url and method parameters for $app.restful method when constructing the loginRequest data.

JavaScript

The hypermedia-enabled version uses the single hypemedia parameter. Its value is a little easier to read than the url above.

JavaScript

Exchanging Code for Token

The “code for token” exchange implementation in SPA5 is using the specific url when invoking the $app.restful method. The app reloads as soon as the token is returned by the backend and preserved in the session storage.

JavaScript

The app SPA4 passes the "self" hypermedia control as the value of the url parameter when calling the $app.restful method for the first time. There is also the second call of this method to obtain the API definition available to the identity of the authenticated user.

JavaScript

Logout

The logout function also specifies the url and method parameter explicitly.

JavaScript

The single parameter url is providing a slightly more elegant instruction to the $app.restful method.

JavaScript

Fetching and Displaying Data

The fetching and displaying of product list data is more verbose, refers to the specific resource URIs, and requires a certain amount of duplication of the server-side business logic in the paging implementation. The REST Level 2 vs. RESTful implementation differences are discussed in the SPA2 workshop segment.

JavaScript

Trying It Out

App SPA5 can be hosted on any web server and operating system. Use Microsoft IIS Express that comes with the app builder. Run the following command in the Command Prompt on your device with the /path parameter set to the location of the spa5.html file:

"C:\Program Files\IIS Express\iisexpress.exe" /path:c:\rest /port:9091 /clr:v4.0

Keep the Command Prompt running and open a new browser window. Enter http://localhost:9091/spa5.html in the address bar and explore the REST Level 2 client app in action.

The user experience will be identical to the SPA4.

Final Source Code

This single page app is composed of two physical files.

This is the markup of the spa5.html file.

HTML

The complete source of the spa5.js file is shown next.

JavaScript

Next

Create, edit, replace, and delete data with confidence in the CRUD with Hypermedia segment.


This tutorial is part of the RESTful Workshop designed to empower individual developers and teams to create amazing enterprise-quality backends for mobile and web applications. Zero experience and no code is required to provide your data with the REST API conforming to the Level 3 of Richardson Maturity Model with the built-in OAuth 2.0 and Open ID Connect.