Adding Security to Your Database

A tutorial that explains how your can add security to your database

Introduction

Security is needed to:

  • Restrict unauthorized access to the database so that the user that is not logged in will not be able to access the database;
  • Prevent the data of one user to be exposed to the other user of the same database.

👍

You can add security to both Appery.io Database and an external database connected to your Appery.io mobile application using AppClient.

Below, you will find instructions on how to add security to your Appery.io Database.

Adding Security to your Appery.io Database

First of all, you will need to create a secured DB collection:

  1. Log in to your Appery.io online account.
  2. In the Appery.io App Builder, go to the Database tab and open the database you need to add security to.

📘

Note!

In this document, we will be using the database we created for the Notes App created with Ionic 5 (more details can be found here).

  1. Under the database Collections tab, click Create new collection, provide a name (for example, notesSecurity) and confirm the operation:
16711671
  1. Go to the Security and permissions tab, enable the Secure collection checkbox, and save:
16751675

👍

To be able to run the database collection (notesSecurity) operations like FIND, GET and/or CREATE, we need to pass the X-Appery-Session-Token with X-Appery-Master-Key.
To obtain the needed X-Appery-Session-Token, it is necessary to perform the login operation and pass the needed data (Username and Password) from the Users collection.
When done, only the authorized user(s) will be able to access the database data.

Now, you can select out of two ways to make your database(s) secured:

Using Access Control List Editor Option

  1. Open the Users collection, click +Row to add two rows to it and fill in the username and password columns:
16741674

🚧

Setting Login Credentials

To be able to use the integrated login service, make sure you use the valid email address in the [email protected] format.
Also, the password should be 8-30 symbols and should contain Latin symbols, digits and special symbols (.;:[email protected]#$%^&*).

To prevent the data of [email protected] from being accessed by [email protected], you can use the mechanism of ACL (Access Control List).

  1. To see how it works, let's open the notesSecurity collection and click +Col to add a row with the name column of String type:
16771677
  1. After that, add two rows: test1 and test2.
  2. Now, press the three dot button of the blue icon in the acl column of test1 - this will separate the records access.
  3. Select [email protected] from the drop-down and save: now, only this user will get access to the test1 record:
11861186
  1. Let's also set the access options for [email protected], Read and Write:
838838
  1. Now, press the three dot button of the blue icon in the acl column of test2 and indicate that only [email protected] will get access to the test2 record:
11821182
  1. Let's also set the access options for [email protected], Read and Write:
833833

Here is how the notesSecurity collection should look like:

16791679

Applying Default ACL

You can also apply default ACL instead of setting it manually.
Default ACL means that every time a new object is created the default ACL will be applied to that object.

  1. To set default ACL, click the Change default ACL button. When you start typing in the input field, you will see the following options:
14311431

You can select the existing users ([email protected] or [email protected]) or apply the predefined options (All users * or @Creator).

  1. Let's add @Creator, the object creator (currently signed in user):
832832
  1. Now, go to the API Express tab, which also allows working offline.

📘

Want to know more?

You can check this document to learn how to create an Ionic 5 app with offline support.

  1. Create a new testSecurity project and click the new service link to create a new notes service group of the Generate REST API type:
16711671
  1. Fill the Database connection and Table fields and press the Generate service button:
825825

In a moment, the model is created:

11191119

Since the notes service group is secured, we need to pass the X-Appery-Session-Token.
To be able to work with the notesSecurity collection, our API Express project needs to take security into consideration.

  1. To do this, go to the Settings tab, enable the Secure REST API checkbox, and fill the Security provider field with the ApperyNoteDB database value:
11211121

📘

Want to know more?

More information about secure REST API can be found here.

Creating Secured API Express Project

  1. Under the Apps tab, create a new Ionic 5 application where the secured API Express project will be added:
10311031
  1. When in the App Builder , click CREATE NEW and select the API Express Generator option.
  2. Next, select the testSecurity project:
979979
  1. To generate the needed services for the notes service group, press the generate link and enter the service name: notes.
  2. After that, press the Refresh button to refresh the App Builder:
15921592
  1. Create a new page named List and on DESIGN panel, add the List component, then delete the second List item:
12361236
  1. Open the page DATA panel, select notes_find from the datasource drop-down, click the Add button, and rename it to find:
18821882
  1. In the open mapping editor window, click the service Success > Mapping button, create the following mapping and press the Save & Replace button:
13411341
  1. Go to the page DESIGN panel and unfold the EVENTS tab.
  2. For the After page showing event of the Page component, select the Invoke service action, select find from the datasource drop-down and save:
15901590
  1. Open the Project > Routing tab and set the Routing default route to the List page:
15951595
  1. Click the SAVE and then TEST buttons in the App Builder Toolbar.
    As you can see, the error is fired because we are not logged in:
15881588

Adding Login Functionality

To make login possible, we will need to add the corresponding service.

  1. To do it, let's first create a new page using the predefined Appery.io Screen Login Layout and name it to Login:
10761076
  1. Open the page DATA panel and add the AppClientLogin datasource selecting it from the drop-down:
956956
  1. In the open mapping editor window, click the service Before > Mapping button, create the following mapping and press the Save & Replace button:
13571357
  1. Click the service Success > Add button, select Navigate to page. Then, select the List value for the Route name field under the EVENTS tab. Press the Save button:
15871587
  1. Open the page DESIGN panel and under the EVENTS tab, select LoginButton from the COMPONENT drop-down, then select the Click event, and set the Invoke service action with specifying the AppClientLogin1 datasource. Press the Save button to save your work:
19051905
  1. Go to Project > Routing and change the Routing default route to the Login page:
19111911
  1. Click the SAVE and then TEST buttons in the App Builder Toolbar: the Login page will load.
466466

The result: only the test1 record can be seen that belongs to [email protected].

  • Now, refresh the preview and fill in the Username and Password fields (now, for [email protected]), and then press the LOGIN button to see the record accessible by [email protected] only:
466466

The result: only the test2 record can be seen that belongs to [email protected].

👍

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.
For testing this particular app, you can use the test accounts we created earlier, [email protected] (password: [email protected]) and [email protected] (password: [email protected]):

468468

Conclusion

As you can see, when AppClient is used, there is no need to pass X-Appery-Session-Token (used when working with databases): The login service is called which allows receiving the needed token, saving it and passing when the corresponding query is made (FIND, CREATE, etc.).

📘

Want to know more?

You can also check out our Creating Development Environment for Ionic 5 projects document to learn how to create development environments in Appery.io apps.


Did this page help you?