The following documentation is applicable to Free, Developer, and Developer Pro plans. For documentation related to the enterprise plan, please click here.

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.

Get Credentials

  • API Key/Secret

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 API Credentials.

alt_text

  • SOTT
  • 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
  • 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
    
    }]);
    
  3. 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;
      }
    };
    
  4. 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()">
  3. 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 > Whitelist Your Domain 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.

Node-js SDK Reference

Node-js SDK

API Reference

APIs

Go Back to Home Page


Was this article helpful?

Have more questions? Submit a request