Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • Authentication profiles
  • Custom Models
  • Login Endpoints
  • Login action & event
  • Testing the configuration
  • Password Protected Endpoints

Was this helpful?

  1. Learn Backend
  2. Events
  3. Security

Login

PreviousJWT EncodeNextLogout Web User

Last updated 2 years ago

Was this helpful?

On the backend of your Dittofi application, endpoints can be configured to only accept connections from authenticated users. This has the effect of needing users to enter login details to access certain information or functionality within your software application.

In this tutorial we will learn how to build an endpoint, action & event to login a user to our backend. We will learn about:

  1. Authentication profiles

  2. Custom models

  3. Login endpoints

  4. Login action & event

  5. Testing the configuration

  6. Password protected endpoints

For the purpose of this tutorial we will use a Users Data Model that looks like the following.

Authentication profiles

To kick off building a login event, the first thing that we need to do is to create an authentication profile. To do this, go to the authentication which is under the tools tab on the left hand side of the page.

This brings up the authentication profiles page.

From within here, you can add a new authentication profile by pressing "+ New Authentication Profile" in the top right of the screen.

This brings up the following screen, where you can create a new authentication profile.

The new authentication profile has the following options:

Option

Description

Name

A custom name that you can give to your authentication profile e.g. "Basic Login".

Kind

The "Kind" of login method. The only option here is Username / password.

Login variable

This will store all of your login information temporarily while your app is running. It allows you to grab the current username & password to check authentication at any point & without having to constantly dig this information out of the database to re-authenticate.

Login table

The name of the data model that holds the authentication credentials e.g. email & password. Normally this information will be a Users Data Model.

Username

This is the username that will be used in the authentication. This can be any property from your login table e.g. email, username etc.

Password

This is the password that will be used in the authentication. Usually there is only one password per user & this is stored of Kind "Password" in the Login table.

To setup a basic login with a username & password from our Users table, we can setup the Authentication Profile as below & press Save.

Custom Models

Next, let's take a look at the Custom Models tab. This is under the tools bar on the left hand side.

Selecting this brings up the Custom Models page.

Inside this view, we can use custom data structures to pass data around the backend of the Dittofi system. We are using this now, rather than a Model,

To see what this means in practice, click the "+ New Custom Model" in the top right hand corner of the screen & select the "New Model" option.

This brings up the following window which is split into two parts: Custom models naming & Custom Attributes.

First, we add a label & name on the left hand side of the screen. Make sure that this is set to something meaningful. In our case we set "UsernameAndPassword", since we will want our Custom Model to hold values for the Username & Password properties.

Next, we give attributes to our Custom Model. These attributes will be used to hold the values for our users username & password when they sign up.

To add the attributes, press the "+ Add Attribute" button on Custom Attributes side of the page.

Next we add two attributes of Kind Text. These attributes will store our Username & Password.

We can then save our Custom Model & go to the Endpoints tab to configure our Login endpoint.

Login Endpoints

To add a login endpoint press "+ New Endpoint" & select "New Endpoint"

We can then configure our endpoint as below.

Notice that the Request Method is set to Post & the Body Variable is of Kind Custom Model & uses the custom model that we created on our Custom Models section. The configuration for the Body Variable is shown below.

Login action & event

As always, the endpoint by itself does nothing. The endpoint is simply used to trigger an associated login action. To configure our login action, go to the actions tab, press "+ New Action" & give your action a name.

Next, we link our login action to our login endpoint.

Lastly, we save our action.

Using the actions & events graph on the right had side of the screen, we can then add an event of Kind Login web user.

Next we fill in the Login web user event options using (A) the basic login authentication profile that we created in the first step & (B) the Custom Model that we created in the second step.

Notice that the values for the Username & Password fields that are set in our variable browser are passed in from our endpoints body variable. Lastly save your event & close it.

The final step in setting up the action is to pick a Response Variable. This step is not mandatory, but it will allow your action to return some information to your endpoint. In this case, we are going to pick our Event variable CurrentUserToLogin. This variable holds the value we set it to inside our Login web user event.

Testing the configuration

To test the configuration, you'll need to enter a username & password into your Users Data Model. You can then generate your code, open up your endpoint & run it, entering in the username & password that you set in your Data Model.

Notice that the response variable from our action back to our endpoint contains the data CurrentUserToLogin data. This is because we configured our action to return the variable set in our event.

Password Protected Endpoints

Now that you have a method to login a user, you can make certain endpoints password protected. For the purpose of this example, we have created two new endpoints:

  • A get many records endpoint that has been configured to retrieve data from our users table

  • A log out user endpoint, action & event.

Let's suppose that we want to allow users to access the Get Many endpoint, only if they are logged in. To do this, open the Get Many endpoint & set the authentication profile for the endpoint to "basic login".

Running the logout endpoint first, we check that our user is logged out. Next, we attempt to run the Get Many endpoint.

We get a 401 error code & the JSON response reads "error" : "e_unauthorized".

Notice, if we re-run our login endpoint & correctly login with a correct username & password, & then re-run our "Get Many" endpoint. This now returns success.

🟥
🟦