Creating User-Specific Redirects After Login
4 minutes to readHTML DataPages, when used as Standalone Sign-in Screens, can be a great asset for authenticated apps. Not only can they be placed directly on the homepage providing a single point of sign-in, but you can also customize where the user will be directed based on data stored in their user profile. For instance, depending on the role a user can be redirected to admin, manager or employee interface. This article shows some examples of popular redirection techniques using an HTML DataPage, authentication parameters and sample JavaScript.
Redirect based on user type
The most common redirect is based on user type. For example, if the user is an administrator the user is directed to the admin dashboard/portal/interface. If the user is a manager, then the user is directed to the manager dashboard/portal/interface.
Steps:
- Create or edit the users table used in authentication. It needs to have two Yes/No fields, Admin and Manager, which stores Yes or No values based on the user’s permission in this application.
Note: There’s no need of an additional checkbox for Employees. They’re going to be routed to their account if they’re active inside the users table.
- Identify how many users groups an application will have and create that many views to filter data. In this example, there are three user levels, so we’ll need to create three separate views that filter based on user type and status checkbox.
- Create authentications based on the views.
- Make sure to include the “logout destination” and “time out & redirection” links in the Advanced Settings.
- Create an HTML DataPage and restrict access to the DataPage via authentication. Make sure that advanced features and parameters are enabled.
- Copy and paste the following JavaScript sample into your HTML DataPage.
- Replace the parameter name and values to match your app. You can duplicate the else if section as many times as necessary to accommodate the number of user groups in your app.
In this example we see there are three user group types: Admin, Manager and Employee. If user type is admin, user will be redirected to admin.html page and if a user type is manager, user will be redirected to manager.html page. Lastly, if users are neither the Admin nor the Manager, they will be redirected to the employee.html site.
Redirect based on subscription date
You can redirect users based on their subscription date or date of last confirmed payment. Using this method, past due users can be automatically directed away from protected areas of your app and towards payment information.
In this scenario, your users table should contain the Last_Payment field which stores the last payment date for each user. Create an HTML DataPage similar to the one explained above, then copy the following JavaScript sample into your HTML DataPage.
In this example, if the user’s last confirmed payment was received more than 30 days ago, the user will be directed to a payment page. This same basic system can also be used to direct users who haven’t logged in for extended periods of time, or who are signing in for the first time after the site has undergone functional changes.
Redirect the first time a user signs in
It is sometimes helpful to direct first-time users to a special orientation or training page. For this method, your user profile (table) must contain a Yes/No field. In this example, the Yes/No field is Finished_Training.
Using a Single Record Update Form with this Yes/No type field will allow you to display important information to new users and allow them to skip this screen when they become more comfortable.
In this example new users are directed to “training.html” where they are presented with training information and checkbox saying “Don’t show this screen again”. This training page will appear every time they login until they click the checkbox.
Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.
code1
<script> if("[@authfield:Admin]" == "Yes"){ window.location = "https://www.mysite.com/admin.html"; } else if ("[@authfield:Manager]" == "Yes"){ window.location = "https://www.mysite.com/manager.html"; } else{ window.location = "https://www.mysite.com/employee.html"; } </script>
code2
<script> var today =new Date(); var signup = new Date( "[@authfield:Last_Payment]" ); var valid = new Date(); valid.setDate(today.getDate()-30); if (valid<signup) { /*Valid*/ document.location = "https://www.mysite.com/menu.html"; } else { /*Not Valid*/ window.location = "https://www.mysite.com/payment.html" } </script>
code3
<script> if("[@authfield:Finished_Training]" == "No") { window.location = "https://www.mysite.com/training.html"; } else{ window.location = "https://www.mysite.com/menu.html"; } </script>