HTML and JS Tutorial

HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. JavaScript is a programming language, it enables interactive web pages and is an essential part of web applications.

This demo will help you with a quick implementation of the LoginRadius platform with HTML and JS demo.

Create an account to get started if you don’t have one yet!

When you signed up for the LoginRadius account, it created an app for you. This app is linked to a ready to use web page - Auth Page (IDX).

Auth Page (IDX) reflects the configuration changes that you make in LoginRadius Dashboard. You can utilize this webpage for authentication requirements on your HTML application.

Choose Theme

In your LoginRadius Dashboard, select your app, then navigate to the Auth Page (IDX) section located in the left navigation bar and click the Theme Customization section. There you can select a design theme for your login page, or further customize the content displayed:

alt_text

To preview your login page’s theme, click the Go to your Login Page link as highlighted on the above screen.

Features like Email and Password login, User registration, Forgot password, and Remember me are already configured on your Auth Page(IDX).

Get Credentials

Before using any of the APIs or Methods that LoginRadius provides, you need to get your App Name, API Key, and API Secret.

  • In your LoginRadius Dashboard, navigate to Configuration > API Credentials and click the API Key And Secret subsection to retrieve your App Name and API Key:

    alt_text

  • Now click the the Secure Mobile OTP Token(SOTT) subsection, the below screen will appear:

    alt_text

  • Generate SOTT and make sure to copy the SOTT value (for security reasons, it’s only visible once in the LoginRadius Dashboard).

Set Up HTML Project

Prerequisites :

  • The web server needs to be set up. Refer the guides here to set up web server locally. You can also set up a small GitHub webserver here.
  • Basic knowledge of HTML and JS.

    • Download our HTML and JS demo project from Github here, and put it in the root directory of your server.
    • Open the option.js file and add the following:

    var commonOptions = {};
    commonOptions.apiKey = "<LoginRadius API Key>";
    commonOptions.appName = "<LoginRadius Site Name>";
    commonOptions.hashTemplate= true;
    commonOptions.sott ="<Sott>";
    commonOptions.verificationUrl = window.location;//Change as per requirement
    
    var LRObject= new LoginRadiusV2(commonOptions);
    • After configuring the above options, go to your web browser and type in the root directory URL that your server is hosting.
    • Now, you can start the demo and play with the available features in it.

    Run and See Result

    1. Fill in your LoginRadius credentials in options.js as described in sections above
    2. Execute the index.html file in your browser
    3. Create a user by clicking on Register Here, upon successful user creation you’ll be redirected to Login page

    alt_text

    alt_text

    1. Log in. Upon successful login, it will redirect you to the return url with the access token. In response, you will get a user profile in JSON format. Open Developer Tools in your browser, navigate to Console and you’ll find a JSON response. The following displays a sample JSON response:

    alt_text

    Whitelist Domain

    For security reasons, LoginRadius processes the API calls that are received from the whitelisted domains. Local domains (http://localhost and http://127.0.0.1) are whitelisted by default.

    To whitelist your domain, in your LoginRadius Dashboard, navigate to Configuration > Domain Whitelisting and add your domain name:

    alt_text

    Explore Demo

    How to manage email templates for verification and forgot password

    How to personalize interfaces and branding of login pages

    How to configure SMTP settings for sending emails to consumers

    How to implement Social Login options like Facebook, Google

    How to implement Phone Login

    How to implement Passwordless Login

    HTML SDK Reference

    HTML SDK

    API Reference

    APIs

    Go Back to Home Page