OAuth2

Labels
AJAX(112) Apple(1) Application Builder(242) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(11) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) DotNetNuke(12) EASE(20) Email(6) Features(99) Firebird(1) Form Builder(14) Globalization and Localization(6) Hypermedia(2) Installation(4) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(15) OAuth(5) OAuth Scopes(1) OAuth2(7) Offline(15) Oracle(10) PKCE(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(165) Reports(48) REST(27) RESTful(22) RESTful Workshop(13) RFID tags(1) SaaS(7) Security(75) SharePoint(12) SPA(5) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(82) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(332) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(39) Web.Config(9) Workflow(28)
Archive
Blog
OAuth2
Sunday, October 16, 2022PrintSubscribe
PWA, Device Authorization Grant, Many-To-Many Input

Progressive Web Apps

Code On Time release 8.9.25.0 produces Progressive Web Apps. Support of PWA specification makes an app installable on Android, Chrome OS, Mac OS, and Windows directory from the supported browsers. Deployed apps are ready to be packaged and published to all major app stores. Each app now has its own “beating heart” - the service worker. This script is installed by browsers when the app is loaded. The installed worker will cache the app resources using the “cache busting” technique supported in the server-side framework. A tiny change to a script, stylesheet, or font will cause the cache to refresh. This ensures the correct set of client files both in the online and offline modes.

Applications created with Code On Time will greet users with the prompt to install the app and experience the native mode. Deployed apps are easy to package and publish to app stores.
Applications created with Code On Time will greet users with the prompt to install the app and experience the native mode. Deployed apps are easy to package and publish to app stores.

Learn how to preview and debug an installed application.

OAuth Device Authorization Grant

Device Authorization Grant flow further extends the opportunity to find new ways to integrate applications created with Code On Time in the everyday life of their users. RESTful API Engine turns an application into a powerful backend for custom clients. Built-in Device Authorization flow will future-proof the app by making it possible to integrate the application with the smart devices.

"Cool Gadget" sample demonstrates the Device Authorization Grant flow available in the applications created with Code On Time. Users can safely authorize the 3rd party devices to access the user data and identity information.
"Cool Gadget" sample demonstrates the Device Authorization Grant flow available in the applications created with Code On Time. Users can safely authorize the 3rd party devices to access the user data and identity information.

Many-To-May Data Input And Search

Tagging is the populate user interface feature that allows setting up the many-to-many data relationships between data records in the database with the minimalistic input. This feature has been a part of the framework in the foundation of apps created with Code On Time for many years. The new release finally makes it possible to filter and search the many-to-many fields, which is not as simple as it may seem at the first glance.

Many-to-many data input is the standard features of the apps created with Code On Time. Users can also filter and search data records by entering multiple tags that must be linked to the items in the output.
Many-to-many data input is the standard features of the apps created with Code On Time. Users can also filter and search data records by entering multiple tags that must be linked to the items in the output.

Release Notes

The following features, bug fixes, and enhancements are included in the release:

  • (PWA) Apps now installable.
  • (OAuth2) Device Authorization Grant flow is now supported.
  • (Framework) Many-to-Many support is fully implemented.It is now possible to filter and search the many-to-many fields.
  • (Framework) Requests with the XML content type will ignore the whitespace and DTD links. The latter eliminates the possibility of a "blind" XML External Entity (XXE) Injection.
  • (Touch UI) A click on the checkbox in the grid will execute an update of the row with all field values of the row. Previously only the primary key and the toggled field were included. The new behavior ensures that the business rules on the server will have a consistent set of field values to work with.
  • (Reports) Action ReportAsExcel will produce the output in OPENXML format. The file extension is *.xlsx.
  • (Reports) Action ReportAsWord will produce the output in OPENXML format. The file extension is *.docx.
  • (Framework) YamlDotNet 11.2.1 is included in the library.
  • (Framework) Newtonsoft.JSON 13.0.1 is included in the library.
  • (Touch UI) Position of the context menu on the toolbar is shifted by 4px away from the edge of the screen.
  • (Touch UI) The default display density is derived from the physical screen size.
  • (Touch UI) Input focus will activate the tab containing the focused field even if it was not in the "edit" mode prior to the focus.
  • (Touch UI) Progress indicator has the "accent" color. Previously it was always blue.
  • (Touch UI) Theme selector switches UI to the "busy" mode during the theme preview.
  • (Touch UI) New "Reset" option is available in Settings|Theme menu. The option is available if the user has selected a theme in the past.
  • (Touch UI) Updated icons for "grid" and "cards" view styles.
  • (Touch UI) Top 5/10 options in the advanced search do not raise exceptions. The list of top 5/10 lookups is presented to the user for selection.
  • (Touch UI) Event handler context.app can inspect context.isMenu property to determine if the context options will be displayed in the context menu in response to the interactive request by the user.
  • (Touch UI) Labels with the blank header are marked with data-hide-when="wrap" attribute. The physical presence of the label allows adaptive hiding of the label when the content is wrapped.
  • (Touch UI) Login prompt displays the "Login" next to the icon on the toolbar when the form is displayed in fullscreen mode.
  • (Touch UI) New theme processing compatible with PWA mode.
  • (Framework) Account Manager persists the fixed number of user properties (name,email, access_token,refresh_token,claims). The user avatars are served in JPEG format.
  • (Framework) The new class AppResouceManager performs production of cacheable client resources.
  • (Framework) Method TextUtility.ToMD5Hash(string) will produce a hash of the string parameter.
  • (PWA) Method $app.getScript uses the app manifest information to download the dynamic scripts.
  • (RESTful) Fixed the bug in processing of PATCH requests.
  • (Touch UI) Click on the icon of the ui-disabled item will not trigger the "vclick" on the item.
  • (PWA) Method UserHomePageUrl() determines the 'start_url' in the manifest.
  • (Framework) Method DataCacheItem.SerializeRequest allows custom serialization of the request object. Override the method to use additional request data such as the request domain.
  • (Framework) Details are synced even when the external filter is not defined on the child data view.
  • (RESTful) Enhanced validation of "sort" parameter.
  • (RESTful) ASP.NET session is removed when the embedding engine is resolving the links.
  • (RESTful) Embedding engine calculates resource tags for faster embedding of the object resource. The links of previously fetched resources are used in place of the duplicates.
  • (RESTful) Embedding will timeout at 60 seconds or when the execution exceeds the option server.rest.timeout specified in touch-setting.json configuration file.
  • (RESTful) Robust refreshing of the page with the ".oauth2" cookie set upon receiving the authorization URL request. Simple 302 with Response.Redirect will not set the cookie on the domains other than localhost when running in Microsoft Azure.
  • (RESTful) Virtual on-demand fields specified in the body are ignored.
  • (RESTful) The "Detailed" HTTP error mode is enabled to allow RESTful error reporting in the apps hosted in Microsoft Azure.
  • (Runtime) Content types application/json and application/x-yaml are added to the mime map in web.config. This will ensure property recognition of JSON and Yaml file types on hosting services such as Microsoft Azure.
  • (RESTful) Configuration file web.config removes status codes 400, 401, 403, 404, 412, 4122, and 500 from HTTP error reporting delegated to the host web server. This allows custom JSON responses from the RESTful API of the apps deployed to Microsoft Azure and other hosting platforms.
  • Cloud On Time app for iOS, Mac, and Windows is retired and replaced with the PWA support in the generated apps. Applications are installable from the browser on the supported platforms. Deployed applications are ready to be packaged and published to the app stores.

Coming Soon

Offline Sync

The all-new Offline Sync Add-On is coming next. It will be compatible with the Progressive Web Apps support in the framework. The licensing will change as follows:

  • Perpetual use with 12 months of maintenance updates
  • Sold is multiples of ten users
  • Bound to the domain name and “localhost”
  • New lower pricing

Online apps that do not require the offline/disconnected data will benefit from the enhanced ability to operate when there is no network. If the app is installed on the device from the browser or as the native app, then the pages will be pre-loaded in the local cache for the improved user experience.

Live Project Designer

The next implementation target is the Live Project Designer described in the Roadmap. We are running behind our original schedule but the goal remains the same - make the app development process with Code On Time intuit and simple.

Tuesday, May 17, 2022PrintSubscribe
Data Caching, RESTful API Engine, Visual Studio 2022

Code On Time release 8.9.24.0 introduces the performance enhancing Universal Data Caching and one of a kind RESTful API Engine. Visual Studio 2022 is supported in the Project Designer.

Universal Data Caching will give your applications a significant performance boost. Most databases have a few tables with the content that does not change frequently. Developers can define simple rules that will eliminate the queries to such tables. It takes only a few minutes to make your app run faster.

Specify the data controllers and and the output caching duration in the application configuration. Start reaping the benefits!

Level 3 RESTful API Engine is included now in every application built with Code On Time. The data controllers are automatically mirrored in the application API.

  • Developers can use the engine to create custom data-aware embedded pages that either blend in the Touch UI or have a completely custom presentation.
  • The engine supports OAuth 2.0 Authorization Flows suitable for the standalone web and mobile applications. Use any framework and technology to build a custom frontend with the Code On Time application in the backend.
  • External scripts and utilities can make direct calls into your application with the robust authentication based on authorization keys. Use tools like cUrl to make your application perform custom actions or change data.
  • Developers can limit the application UI to the specific user roles. For example, administrators can sign into the application and manage data while the users in other roles will only be able to sign in to confirm their identity during OAuth 2.0 Authorization.

The engine is introduced in the RESTful Workshop, the curated set of tutorials that will empower the reader to build the modern high performance software in a record time and at the fraction of the cost of other tools. Level 3 REST API is self-documented with the hypermedia embedded in the data.

RESTful API Engine makes it possible to build custom embedded pages and standalone web and mobile frontends using your application as a backend. External scripts and utilities can use your application to orchestrate the complex workflows.

Code On Time is making a big bet on the RESTful API Engine to deliver the new benefits to our customers:

  • Developers will be able to build apps serving as backends for devices that need to know the user identity and a way to read and write the user-specific data. The next release will support OAuth 2.0 Device Authorization Grant flow for the input-constrained devices. You may have experienced this flow when authorizing a medical device to access your health data or when allowing a smartwatch to use your music service. The same flow is authorizing a smart TV in a hotel room to access the video streaming service that you are paying for at home.
  • Cloud Identity has been on our roadmap for several years. Soon developers will be able to build a collection of apps with one of them serving as the Identity Provider while the others will become the Identity Consumers.
    • Each application will have its own security system.
    • Users will identify themselves by signing into the Identity Provider. This app may have the 2-Factor Authentication enabled or include an option to authenticate users with the third-party providers such as Google, Microsoft, or Facebook.
    • An application will become the identity consumer at runtime when the administrator creates a Cloud Identity link with another application. Device Authorization Flow will authorize the establishment of the link when approved by the administrator of the intended Identity Provider.
    • Identity Consumer application synchronizes its roles and custom OAuth 2.0 scopes with the Identity Provider database. This makes it possible to manage users of the entire application collection in one place.
    • RESTful API Engine access tokens will be issued by the Identity Provider application. The same access token will authorize requests to any application in the collection. The token will inherit the permissions configured in the Identity Provider by the collection administrator.
  • Microservices Architecture becomes a reality with Code On Time even for the smallest of developer shops. Cloud Identity and access token portability across the collection of applications make it possible to create the frontend that will exchange data with multiple backend applications. Each backend provides a custom API, has its own performance characteristic, and can be deployed independently. This improves the stability of the frontend and its overall performance. Learn more in the Introduction to Microservices Architecture.
  • The upcoming built-in GraphQL processor will parse the queries and resolve them by executing the RESTful API Engine requests. GraphQL has emerged at Facebook as the query language for the complex collections of APIs. Their numerous apps needed small subsets of data from multiple sources, which required several requests fetching too much data. Graph QL server is the “fat client” that defines the supported query types. The server accepts the queries formulated as a graph and delegates the execution to the custom resolvers. The output of multiple resolvers is merged in the graph that matches the query.
  • The App Studio application is a part of each Code On Time installation. This local web app presently starts the product activation process by redirecting developers to the account management portal. App Studio will come with the RESTful API Engine enabled in the future releases. It will serve as the local project management portal that will replace the start page of the app generator, which will be relegated to the icon tray. It will also provide the backend to the v9 Live Project Designer. The code generator will be invoked in the command line mode by the RESTful API Engine of the App Studio in response to the developer activities in the Project Designer of live apps. This is the architectural departure from our original plan outlined in the Roadmap, but we are on the finishing line now to deliver the amazing development tools in the heads of developers.
  • Content Hub, our innovative publishing platform, creates the new content in our legacy public site. We have developed this platform for internal use. The hub agent monitors the shared drives in our corporate Google Drive and transforms the changed documents into the HTML-based Display Flow content published through the RESTful API to the account management portat. The portal feeds the content to the database of the legacy site. The following capabilities of the platform will become commercially available:
    • Content Hub Agent will monitor Google Drive, Office 365, and network folders for the content in Microsoft Word Format. The agent is a multi-platform application. Changes are pushed to the hub-enabled application built with Code On Time.
    • Content Hub Add-On for applications created with Code On Time will render the content imported by the hub agent as public pages, blog posts, documentation library, newsletters, helpdesk tickets, public forum posts, etc.
    • Add-on will provide the interactive content editor based on Touch UI. It will customize the presentation style of the live “content hub” pages. It will create tickets and community posts from within the apps built with Code On Time in the same format that is used by the hub agent. It will invoke the RESTful API of the app to read and write the hub content.

The release 8.9.24.0 includes the following features and enhancements:

  • (Framework) Upgraded the framework to jQuery.3.6.0 and the latest version of the Material Icons.
  • (AppGen) Added support for VS2022.
  • (App Gen) Develop command in the project options will activate the most recent version of Visual Studio if the solution file format version is 12.00. This will ensure that VS2022 starts when both VS2022 and 2019 are installed on the same machine.
  • The enhanced Postal Address Verification silently resolves the postal addresses with Google Geocoding. The customers in the United States can achieve a perfect resolution of each address in the USPS-approved format.
  • (Touch UI) New tag form-max-(xs|sm|md) will make the contents of the form aligned in the middle of the page.
  • (Touch UI) Input field tagged as text-style-primary will display in the "primary" color.
  • (Touch UI) Modal popups will have the header when displayed in the content pages, which have their own header hidden.
  • (DAF) Client-side cookies are created with the SameSite=Strict attribute.
  • (Framework) Access control check is performed in the correct sequence for the standard membership controllers both for reading and writing of data.
  • (Touch UI) New css rules to enable hover over the fields with the Actions lookup to ensure correct display of icons in the buttons.
  • (Touch UI) Right-clicking on the logo will open the menu panel.
  • RESTful API Engine is included in the generated apps.
  • (Framework) New js/sys/restful.js provides a thin wrapper on top of Fetch API for the RESTful API Engine.
  • (Touch UI) A click on the empty part of the app toolbar or reading pane button bar will close an visible popup menu.
  • (Touch UI) Eliminated the redundant 3rd level child Data View fetching in the form views with multi-level master-detail. This significantly reduces the load time of forms with master-detail field relationships.
  • (Touch UI) Improved stability of inline editing in multi-level master detail forms. In some situations the aggressive selection of items in DataView fields would have caused the unnecessary attempts to fetch data and server-side exceptions.
  • Universal Data Caching improves the response time of the requests to read data in Touch UI.
  • (Touch UI) The focused universal inputs are redrawn whether or not they have a value. Previously only non-empty inputs were redrawn.
  • (Touch UI) Simplified parsing of the virtual page activator.
  • Integrated codemirror-5.65.2 for the upcoming Content Hub Add-On to allow display and editing of code samples.
  • (Touch UI) Refactored the code responsible for the "scrollable" state of the system tab bar. The visual presentation goes from flat to scrolled when the scrollable content is detected and the view does not have the horizontal scrolling (grid with horizontal scrolling).
  • (Touch UI) Removed redundant CSS class definition.
  • (Framework) New $app.urlArgs() method returns an object map of the page location URL parameters of the specified argument. The argument is either a string or a hypermedia object with the 'href' property. If the parameter is not specified, then the URl of the page in the browser is used for the parameter extraction.
  • (Touch UI) Account Access grant for OAuth 2.0 Authorization Flows is now supported by the framework,
  • (Offline Sync) Improved reporting of data downloading errors during sync.
  • (Framework) ASP.NET version headers and X-Powered-By headers are not returned by the apps in the HTTP response headers.
  • (Client Framework) Server-side errors raised when the data is retrieved from the server are displayed in the notifiction bar at the bottom of the screen. This helps detect data fetching errors that may remain invisible to the developers.
  • (ASPX) New method Invoke is implemented in DataControllerService to handle all incoming requests. It allows file uploading in the apps with the aspx page model.
  • (Map) Clearing of the geo map will result in the new tooltip assigned to it.
  • (Touch UI) Fixed the exception raised when the quick find filter is cleared.
  • (App Gen) Develop command in the project options will activate the most recent version of Visual Studio if the solution file format version is 12.00. This ensures that VS2022 starts when both VS2022 and VS2019 are installed on the same machine.
  • (Designer) Action property "whenKeySelected"is correctly persisted when set to "No" in the Project Designer.
  • (Site Content) CreatedDate and ModifiedDate fields are set to the DateTime.UtcNow.
  • (CMS) Renamed "Workflow Register" option to "Site Content (recommended)". This option is available in the database connection string settings.
  • (Reports) Class Library projects are provided with the correct ReportViewer references. Previously the leading and trailing spaces have caused errors when building projects.
  • (Reports) Included the reference to the Microsoft RDL Designer for VS 2022 in the custom reports. The reference is visible to the developers in VS if the designer is not installed.
  • (Code Gen) Simplified the syntax of !String.IsNullOrEmpty in the C# source code.
  • (Code Gen) Added support for IsNullOrWhiteSpace unary code generation expression.
  • (CodeGen) Value Inequality operators are produced as natural a != b and a<>b operators in C# and VB. Previously such operators were generated as !(a==b) and Not(a = b).
  • (Code Gen) C# code string constants are now presented with "string" + "string" breaks.
  • (Code Gen) C# code placed to the previous text line the symbols +|-|*|/|% that were previously wrapped to the next line.
  • (Codegen) C# code simplification of "params System.Object[]" to "params object[]".
  • (Framework) Numeric primary keys do not cause hidden exceptions when new BLOBs are uploaded with ODP.
  • (Framework) Method $app.actionInfo(path) returns the information about the action for the specified path in the format "groupId/actionId".
  • (Touch UI) Actions rendered as "Actons" field display simple confirmations and data controller confirmations.
  • (Touch UI) Remove the preloading instructions for the fonts. Added the version of the app to the font reference in the touch-theme.css.
  • (CodeGen) Class attribute definitions in C# will have "spaces" surrounding the "=" preceding the attribute parameter values.
  • (Touch UI) Right-clicking on the logo will open the menu panel.
  • (Touch UI) Click on the empty part of the app toolbar or reading pane button bar will close an visible popup menu.
  • (Touch UI) Eliminated the redundant 3rd level child Data View refresh in the form views with multi-level master-detail.
  • (Touch UI) Improved stability of inline editing in multi-level master detail forms.
Tuesday, March 15, 2022PrintSubscribe
RESTful Workshop

This workshop is designed to empower both 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.

  • This workshop will help you understand what the RESTful API is, what are the benefits of the RESTful Hypermedia, and how to build the RESTful applications with Code On Time.
  • You will use Code On Time application builder to rapidly produce an inventory management system with a sophisticated user interface that runs on mobile and desktop devices. No coding experience is required.
  • You will enable the RESTful API Engine and build three single-page applications (SPA) embedded directly into the inventory manager. These apps will feature a custom user interface blending in the backend. The apps will invoke either the hypermedia or the direct resource URLs to interact with the API. JavaScript and HTML experience required.
  • You will enable OAuth 2.0 Authentication in the backend and build two standalone SPAs that can be hosted anywhere. Both apps will rely on “Authorization code flow with PKCE” to authenticate the users. The apps will use the OpenID Connect (OIDC) to get the user email and picture from JWT. The apps will make use of the hypermedia or direct resource URLs to get data from the backend. JavaScript and HTML experience required.

Lesson 1: RESTful Backend Application

The workshop begins with the implementation of an inventory management system and includes the step-by-step instructions. Your own application will look similar to the one shown in the picture below. It will have an advanced user interface that allows users to manage categories, suppliers, and products.

Reading Pane split view in the application created with Code On Time.
Reading Pane split view in the application created with Code On Time.

Start the workshop with the RESTful Backend Application segment.

You may be compelled to finish right there when you see the end result of your work. It will be that good! Please do not stop and keep going.

At the end of the segment the application configuration will be changed with a few keystrokes to enable the built-in RESTful API Engine. You will learn to use the API development tools to browse the hypermedia links of the RESTful API.

Hypermedia makes your API easy to learn and consume. Welcome to the RESTful World!

An example of the RESTful resource data with the embedded hypermedia.
An example of the RESTful resource data with the embedded hypermedia.

RESTful Hypermedia of the backend application is easy to discover with the help of API development tools.

Keep reading to learn more about building the embedded and standalone client apps for the RESTful backend.

Lesson 2: Embedded SPA1 with RESTful Hypermedia

The first client of the RESTful API is the Single Page Application embedded directly in the backend and protected by its security system. Users must sign in to access the page. The page will blend into the inventory manager user interface and allow paging of the products by invoking the hypermedia controls of the API.

Embedded SPA1 with RESTful Hypermedia
Embedded SPA1 with RESTful Hypermedia

Start building your first Embedded SPA1 with RESTful Hypermedia.

Lesson 3: Embedded SPA2 with REST Level 2

This tutorial will explain how to alter the SPA1 to invoke the resource URLs of the RESTful API directly. This embedded app will look just like its cousin that makes use of the hypermedia.

The implementation of the product paging will become a little more complex and require a few extra lines of code since the paging logic will have to be duplicated in the client app itself.

In contrast, the hypermedia-enabled client is simpler since it relies on the hypermedia controls (API links) embedded directly in the data received from the server. The hypermedia makes it very simple for client app developers to alter the interface and respond to the user actions.

Discover the benefits of hypermedia in the Embedded SPA2 with REST Level 2 segment by learning how to live without it!

Lesson 4: Embedded SPA3 (Custom UI) with RESTful Hypermedia

Both SPA1 and SPA2 are simple pages hosted by the backend application (the inventory manager). The apps blend seamlessly in the user interface of the host and invoke its RESTful API Engine through hypermedia or resource URLs.

Our next embedded Single Page Application features a completely custom user interface while being hosted by the backend. In fact, there will be no user interface of the host application whatsoever. The page will remain protected by the security system of the host.

You will learn how to disable the user interface of the host (shhh - very easy) while still taking advantage of the built-in RESTful API Engine with hypermedia.

Embedded SPA3 (Custom UI) with RESTful Hypermedia
Embedded SPA3 (Custom UI) with RESTful Hypermedia

Learn how to create custom landing pages, dashboards, and single page apps embedded in the API host while following the instructions in the Embedded SPA3 (Custom UI) with RESTful Hypermedia segment.

Lesson 5: Standalone SPA4 with RESTful Hypermedia and OAuth 2.0

The purpose of this tutorial is to create a standalone Single Page Application that uses the Authorization Code Flow with PKCE to authenticate the end users. This app will allow paging the inventory products by taking advantage of the RESTful Hypermedia similar to the embedded SPA1 and SPA3. This client app can be hosted on any web server of your choice.

You will begin by changing the configuration of the RESTful Backend Application to limit the user interface availability to the Administrators only and to enable OAuth 2.0.

You will learn how to register a client app for OAuth 2.0 in the backend.

You will create the login and logout capabilities and learn how to obtain the email address and picture of the authenticated user from JSON Web Token (JWT).

This is how the app looks when users first load it up in the browser.

The user interface of anonymous user in the standalone SPA4 with RESTful Hypermedia and OAuth 2.0
The user interface of anonymous user in the standalone SPA4 with RESTful Hypermedia and OAuth 2.0

Login button will redirect to the backend application and require users to sign in and authorize the account access.

Account Access consent form presented to the user during the OAuth 2.0 Authorization Code flow with PKCE in the application created with Code On Time.
Account Access consent form presented to the user during the OAuth 2.0 Authorization Code flow with PKCE in the application created with Code On Time.

If the account access is allowed, then the backend will redirect back to the client app SPA4 with the authorization code in the URL. The client app will exchange the authorization code for an access token and use the token when making requests to the backend.

The user interface of authenticated user in the standalone SPA4 with RESTful Hypermedia and OAuth 2.0
The user interface of authenticated user in the standalone SPA4 with RESTful Hypermedia and OAuth 2.0

The tutorial shows a typical hybrid app based on HTML and JavaScript. API calls are illustrated with the HTTP requests. Native app developers will get a clear understanding of how to implement the user authentication with OAuth 2.0 authorization flows built into the backend of applications created with Code on Time.

You will become ready to build client apps with your favorite user interface framework and access data with hypermedia or traditional REST.

Start the Standalone SPA4 with RESTful Hypermedia and OAuth 2.0 segment.

Lesson 6: Standalone SPA5 with REST Level 2 and OAuth 2.0

OAuth 2.0 Authorization is a set of REST APIs embedded into the backend of applications created with Code On Time. These APIs are implemented on top of the same RESTful API Engine, which speaks to its strength and flexibility. There are no 3rd party dependencies or runtime fees!

The user interface of authenticated user in the standalone SPA5 with REST Level 2 and OAuth 2.0
The user interface of authenticated user in the standalone SPA5 with REST Level 2 and OAuth 2.0

Learn to sign the users in and out in Standalone SPA5 with REST Level 2 and OAuth 2.0 without relying on the hypermedia.

This client app is the look-alike of the SPA4. It works with the REST resources directly. The HTTP methods and URLs are embedded in the code. If you have fallen in love with the hypermedia, then you may find it as a disadvantage. If you are not convinced and prefer the traditional REST, then use this client app as the foundation for your next hybrid or native application.

Lesson 7: CRUD with Hypermedia

Typical CRUD operations are performed on REST resources with POST, GET, PATCH, PUT, and DELETE methods of HTTP protocol. The uniform hypermedia controls create, edit, replace, and delete are embedded in the resource data.

The reader will modify the SPA4 app to allow creating, editing, and deleting the products.

Single page app SPA4 with RESTful Hypermedia and CRUD has the "New" button in the toolbar. The "New Product" form is displayed when the button is pressed. A click on any row in the product grid will open the "Edit Product" form allowing users to change or delete the product.
Single page app SPA4 with RESTful Hypermedia and CRUD has the "New" button in the toolbar. The "New Product" form is displayed when the button is pressed. A click on any row in the product grid will open the "Edit Product" form allowing users to change or delete the product.

Users can make changes to the product or delete it from the list.
Users can make changes to the product or delete it from the list.

Learn to Create, Read, Update, and Delete data with confidence.

Lesson 8: Custom Actions with Hypermedia

The REST API Level 2 and above must support HTTP methods (verbs) in resource handling. For example, the request with the GET method is expected to return the resource data while the request with the PATCH method is expected to modify some of its fields. The number of HTTP verbs is limited and will not cover all possible scenarios of data manipulation.

Custom action identifiers can be specified directly in the resource URLs requested with the POST method. The custom action hypermedia controls are embedded in the data by the RESTful API Engine.

Developers evolve the application API by making changes to the data controllers and their models. Both Touch UI and RESTful API are reflecting the configuration and capabilities of the application data controllers.

Confirmation controller "SellPrompt" presents the user with an option to sell 1, 5, or 10 units of a product with a single touch. Option "Other" allows entering the arbitrary quantity of units to sell. The prompt is displayed when users press the "Sell" button in the product form.
Confirmation controller "SellPrompt" presents the user with an option to sell 1, 5, or 10 units of a product with a single touch. Option "Other" allows entering the arbitrary quantity of units to sell. The prompt is displayed when users press the "Sell" button in the product form.

RESTful API Engine makes the custom action "sell" available to the client apps.  The parameters of the action are specified in the "parameters" key of the payload. The new state of the resource is returned in the response.
RESTful API Engine makes the custom action "sell" available to the client apps. The parameters of the action are specified in the "parameters" key of the payload. The new state of the resource is returned in the response.

Enhance the RESTful API of applications with custom actions to go beyond CRUD.

Lesson 9: BLOBs

Values of Binary Large Objects (BLOBs) are represented as resource URLs in the data. User identity must be specified in the Authorization header to get or change a BLOB. Hypermedia links to replace or delete BLOB values are included. Developers submit binary data as fields in the body property of the $app.restful method argument or as the named values in the multipart/form-data of HTTP requests.

Work with the BLOB resources like a pro.

Lesson 10: Resource Navigation with Hypermedia

Hypermedia helps developers and client applications to discover the available actions and related data of a resource. The RESTful API Engine evaluates the user identity, assesses the HTTP method, and consults the Access Control List (ACL) to produce the resource data. The engine performs the same rigorous checks when embedding the relevant hypermedia links directly in the output.

Resources may return singleton entities or collections of entities. The latter may be filtered with conditional expressions and query parameters with optional sorting.

Master the navigation and filtering of the hypermedia-enabled resources.

Lesson 11: No More Under-Fetching or Over-Fetching

Modern client applications require complex data to be fetched from the server. The RESTful resources provide the singletons and collections of uniform entities. The resources are easy to fetch. The hypermedia embedded in the resource entities allows the subsequent fetching of the related data.

Client application developers will love the hypermedia but hate the work required to arrange the multiple fetch requests. Also the resources may be too rich for one's taste when only a couple of fields are needed but dozens of entity properties are always included in a response. Developers had to invent the query language GraphQL to fight both the under-fetching and over-fetching of data typical for the Web APIs!

RESTful API Engine supports the fields and _embed parameter to allow fetching a complex data of a specific shape in a single request while still taking advantage of HTTP caching, which is not possible with GraphQL.

Get the data without Under-Fetching and Over-Fetching with hypermedia.

Lesson 12: JWT, OAuth 2.0 Scopes, Roles, and ACL

JSON Web Tokens (JWT) provide the industry-standard for representing claims securely between two parties. The built-in scopes make it possible for the client apps to continuously refresh the access tokens and to request specific identity claims with the explicit user permission. Custom scopes provide granular access to the RESTful resources. Built-in Access Control List (ACL) associates specific HTTP verbs and custom actions with the scopes. ACL will instruct the RESTful engine to allow specific HTTP verbs and resource action only. The embedded hypermedia is also restricted according to the ACL rules.

Combine the scopes, roles, and ACL for granular resource access.

Lesson 13: Input and Output Content Types

Built-in RESTful API Engine handles multiple input and output content types. Developers use the Content-Type and Accept headers to request and receive data in JSON, Yaml, XML, and a few other formats.

It is simple to incorporate a secure export to CSV (comma-separated values) in the RESTful apps. The standard header "Accept" directs the RESTful API Engine to produce data in the desired format.
It is simple to incorporate a secure export to CSV (comma-separated values) in the RESTful apps. The standard header "Accept" directs the RESTful API Engine to produce data in the desired format.

Discover the data languages of the RESTful API Engine.

Lesson 14: ETag and HTTP Caching

RESTful API Engine responses are provided with the ETag header. Browsers automatically submit ETag with the subsequent requests to fetch the same resource. The engine responds with the HTTP status 304 and empty body if the ETag of the resource has not changed. Apps can also submit ETag with CRUD requests for conflict detection.

ETag allows preventing the physical transfer of the unchanged resources but still requires some processing on the server. The backend application framework and the RESTful engine can be instructed to cache the resource response in the server memory and in the persistent storage. The engine will include the HTTP client caching instructions in the responses, which will allow browsers to completely eliminate the need to contact the server for a period of time.

Build high performance applications by taking advantage of the HTTP protocol.

Lesson 15: Device Authorization Grant Flow

Multiple OAuth 2.0 authorization flows are built into the framework of applications created with Code On Time. The RESTful API can be consumed by the embedded software of the devices with the limited input capabilities. Self-service kiosks, personal medical equipment, household appliances, media players, wireless speakers, and smart watches are just a few examples of devices that can interact with the API. If you are an engineer in need of a software to manage the reams of data and personalization for a brand new gadget, then Code On Time is the tool that will provide an instant foundation at a fraction of the cost.

Integrate apps in the physical world of your users with the Device Authorization Grant flow.

RESTful Apps with Code On Time

Startups, IT departments, hobbyists, and students will find Code On Time to be a powerful and easy-to-use tool that allows instant production of high quality mobile and web applications with an amazing Touch UI interface.

Built-in RESTful API Engine makes it possible to extend the applications with the embedded pages that blend in or have a completely custom look. Applications can participate in complex orchestrations through cloud functions and scripts calling into the API resources thanks to the built-in support for API keys.

Built-in OAuth 2.0 Authentication turns an application created with Code On Time into the backend of your next big thing! Do not hire hordes of backend developers and pay no runtime fees.

Get Code On Time application builder now!