Get Started - Ionic

The tutorial lets you implement LoginRadius user registration, login, profile, and log out in your Ionic based application.

You must have Ionic and cordova installed.

New to Ionic? Check out this reference.

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 Ionic application.

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

Get Credentials

Before using any of the APIs or Methods that LoginRadius provides, you need to get your App Name (when you signed up for the LoginRadius account, it created an app for you), API Key, and SOTT.

  • 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 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).

Setup Ionic

  1. Create an empty project and run the following command in the command line:

    ionic start demoApp blank --type=ionic1 --cordova
  2. Install the following additional plugins:

    • Before you can add SDK, you must install the Apache Cordova InAppBrowser into your current project. Run the following command in the command line: :

      cd demoApp
      cordova plugin add cordova-plugin-inappbrowser
  3. You must install the Apache Cordova Whitelist into your current project for Network Request. Run the following command in the command line:

    cordova plugin add cordova-plugin-whitelist

Install SDK

  1. Download the LoginRadius SDK from github
  2. Include this file in your project’s demoApp\www\js folder.
  3. Include the SDK reference on the page demoApp\www\index.html:
<script src="js/sdkservices.js"></script>
<script src="https://auth.lrcontent.com/v2/js/LoginRadiusV2.js"></script>

Configure Project

In the index.html file, initialize the LoginRadius registration interface using the following code snippet:

<script type="text/javascript">
var commonOptions = {};
commonOptions.apiKey = "<your loginradius api key>";
commonOptions.appName = "<LoginRadius app name>";
commonOptions.hashTemplate = true;
commonOptions.accessTokenResponse = true;
commonOptions.phoneLogin = false;
commonOptions.sott ="<Get_Sott>";
commonOptions.verificationUrl = "https://auth.lrcontent.com/mobile/verification/index.html    ";
commonOptions.callbackUrl = 'DemoApp://';
commonOptions.isMobile =true;
commonOptions.formValidationMessage=true;
var LRObject= new LoginRadiusV2(commonOptions);
</script>

Replace the following placeholders in the above :

Configure Registration and Login Page

  1. Create controllers.js file in your demoApp\www\js folder.
  2. Add this dependency injection in your controllers.js:
.controller("ExampleController",[ '$scope','SDKService', function ($scope,SDKService) {

// initialize the LoginRadius registration object here

}]);
  1. Add the following function to your controllers.js,this is used initialize the LoginRadius registration object, when user clicks on the Registration or Login button:
var lroptions = {};

$scope.lr = SDKService.getSDKContext(lroptions);
$scope.lrapi = SDKService.getAPIContext();

lroptions.callback = function(params) {

//Handle the actions for: login, registration
switch (params.action) {
//Login returns an accesstoken which can be used to pull user details for APIs calls.
case "login":
if (params.response.access_token != null) {
sessionStorage.setItem('LRTokenKey', params.response.access_token);
//window.location = "#/afterloginredirection";
} else {
alert(JSON.stringify(params.response));
}
break;
//Registration returns and email message and status which you can use to display messaging to your user.
case "registration":
alert(JSON.stringify(params.response));
break;
default:
break;
  }
};
  1. Add the following code snippet to Index.html file or wherever you want to use Registration Interface. It triggers the registration interface and will return with an action of “registration” to the callback function.
lr.register()

You must add an HTML div for Registration interface.

<div id="registration-container"></div>

For Example -

<div ng-app="starter" ng-controller="ExampleController" id="loginradius-ionic">

  <script id="register.html" type="text/ng-template">
  <ion-view>
   <ion-header-bar align-title="center" class="bar-positive">
  <div class="buttons">
   <div id="div" class="fa fa-chevron-left" ng-click="onBackKeyDown()" style="font-size:25px;color:#fff;margin: 5px;"></div>
</div>
<h1 class="title">Register</h1>

  </ion-header-bar>      
    <ion-content has-header="true" padding="true" ng-init="lr.register()">
     <div id="registration-container"  style="margin-bottom:4%"></div>
    </ion-content>
  </ion-view>
  </script>   
  1. Add the following code snippet to Index.html file or wherever you want to use Login Interface. It triggers the login interface and will return with an action of “login” to the callback function.
lr.login()

For email/password login to add div for Login interface

<div id="login-container"></div>

Retrieve User Data using Access Token

  1. Create a HTML file to call API and get data. For exmaple- create a Profile.html file in demoApp\www\ folder.
  2. Add the following code to the Profile.html file for getting the user profile:
<ion-content ng-controller="ExampleController" padding="true" ng-init="loadUserprofile()">
  1. Add the following code snippet to controllers.js file function for getting user profile data:
$scope.loadUserprofile = function() {
$scope.lrapi.getUserprofile(function(userprofile) {
  alert(JSON.stringify(userprofile));
});
}

Note: Redirecting the user to the Profile.html file upon successful login.

Run and See Result

  • Run the application by executing the following command in the command line: [ionic serve]
  • Register a user here and then log in. Upon successful login, in response, you will get a user profile in JSON format. 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 Ionic Demo

  • Download Demo of the above-explained tutorial to support your implementation.
  • Refer to GitHub Demo to know how to implement various LoginRadius features using SDK Functions.

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

Node-js SDK Reference

Node-js SDK

API Reference

APIs

Go Back to Home Page