Authentication Example

Demonstrates creating an oAuth Bearer Token Request using IVA's appid and secret key.

by Dhanck

HTML

<div class="container">
    <div class="row">
        <div class="starter-template">
             <h1>Authentication Demo</h1>

            <p class="lead">Demonstrates how to retrieve an acess_token from oAuth server.</p>
        </div>
        <div>
            <p>This example uses jquery to assemble an oAuth request to the /token oAuth server. If the credentials are correct, the oAuth server returns the access_token, token_type, and expires_on in a JSON object. This response is then cached on the page to prevent subsequent requests from going to the server.</p>
            <p>In a production environment, you would need to hide the access_token if used on public web pages.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="alert alert-info">For testing purposes, we have exposed the test account: <b>APPID: eba4cf26</b> and <b>Secret Key: Wo6TOFJy2Sroyakgqb1O8IMuLac=</b> 
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">APPID:</div>
        <div class="col-sm-10">
            <input type="text" id="appid" class="form-control" aria-label="enter appid" placeholder="Enter APPID you created in MediaManager.internetvideoarchve.com" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-2">Secret Key:</div>
        <div class="col-sm-10">
            <input type="text" id="secretkey" class="form-control" aria-label="enter secret key" placeholder="Enter Secret key you created in MediaManager.internetvideoarchive.com" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-10">
            <input type="button" id="button" onclick="ShowToken()" title="Generate Access Token" value="Generate Access Token" aria-label="Generate Access Token" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="margin-top:30px">
            <div...

JavaScript

function ShowToken() {
    alert('ShowToken');
    var appid = $("#appid").val();
    var secretkey = $("#secretkey").val();
    var tokenresponse = GetAccessToken(appid, secretkey);
    resetdata();
    showResponse(tokenresponse);
}



function showResponse(data) {
    $("#output").empty().append(JSON.stringify(data, null, '\t'));
}

// empty the divs where we populate data.
function resetdata() {
    $('#output').empty();
}



function GetAccessToken(appid, secretkey) {

    // for demonstration purposes we are caching the data in the $("#output").data
    // so we don't request a new token each time.
    // In production, the secret key should be completely hidden from end users
    // and probably handled server side unless the application is secured in some way
    // where the source is not accessible.

    var Response = $("#output").data(appid + secretkey);
    if (Response !== undefined) {
        return Response;
    }
    $.ajax({
        async: false,
        type: "POST",
        dataType: "json",
        url: 'https://prod.api.modist.twg.ca/api/v1',
        data: {
            'grant_type': "client_credentials",
                'client_id': appid,
                'client_secret': secretkey
        },
        success: function (d) {
            Response = d;
        },
        error: function (err, result) {
            Response = err.responseJSON;
        }
    });

    $("#output").data(appid + secretkey, Response);
    return Response;
}