Intro to the Login Button

This page gives an introduction to the basic front-end setup of the login button:

image1

Please note that full instructions for each SDK, including full back-end configuration to enable the button to communicate with the MIRACL Trust authentication server, are given in the SDK Instructions section.

Here we can have a generic look at a standard 'index.html'-type page which includes the login button. This page uses the 'index.html' taken from the Python SDK. Note that the html makes use of flash messages coming from a main SDK server script (hence the {% %} tags).

The first if retry and if auth_url checks listen for the retry message (on failed authentication attempt) and the authorization url coming from the server script. The authorization url is provided by the 'Get Authorization Request URL' method specific to each SDK. A btmpin div is created to contain the login button (note that the wording for this is automatically populated by mpad.js hence there is no text entered in the btmpin div):


{% if retry %}
    {% if auth_url %}
    <div class="col-md-12">
        <div id="btmpin"></div>
    </div>
    {% endif %}
{% endif %}

If the retry message is not being received, the next if is_authorized check is to find out if the user is already authorized, in which case display the user email and id information and the refresh and logout buttons:


{% if not retry %}
   <div class="row">
       {% if is_authorized %}
           <div class="col-md-4">
               <b>E-mail:</b> {{ email }}<br/>
               <b>User ID:</b> {{ user_id }}<br/>
           </div>
           <div class="col-md-4"></div>
           <div class="col-md-4">
               <a href="/refresh" class="btn btn-primary action">Refresh user data</a>
               <a href="/logout" class="btn btn-primary action">Log out</a>
           </div>
       {% else %}
           {% if auth_url %}
           <div class="col-md-12">
               <div id="btmpin"></div>
           </div>
           {% endif %}
       {% endif %}
       

The last else section of the above snippet then creates a btmpin div to contain the login button, for the user's first attempt at logging in.

Finally, just before the closing tag, the button itself is created in your app with a javascript which makes use of the mpad.js library to send the authentication information to the server:

<script src="https://mcl.cdn.mpin.io/mpad/mpad.js" data-authurl="{{authURL}}" data-element="btmpin"></script>

The parameters passed in this script are:

data-element: the login button ID (corresponds with <div id="btmpin">)
data-authurl: the authorization URL (this passes the client_id and redirect_uri to the authentication server). Each SDK has a 'Get Authorization Request URL' method for obtaining this.

The authorization url must be obtained before the mpad.js script is loaded. This will be demonstrated in the sample apps for the SDKs

Top