Authentication

Get access token using subscriber id and password

by CAPDev

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<div class="container body-content">
    
<h3>Authentication</h3>

    <p>Get access token using subscriber id and password</p>
    <div ng-controller="authenticationDemoCtrl as vm">
        <div>
            <div class="form-group">
                <label>Subscriber Id</label>
                <input type="text" class="form-control" placeholder="Subscriber Id" ng-model="vm.subscriberId" required>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" placeholder="Password" ng-model="vm.password" required>
            </div>
            <div class="form-group" style="margin-top: 20px;">
                <label>Result Format</label>
                <select class="form-control" ng-model="vm.selectedFormat">
                    <option value="application/json">JSON</option>
                    <option value="application/xml">XML</option>
                </select>
            </div>
            <button type="submit" class="btn btn-default" ng-click="vm.getToken()">Submit</button>
        </div>
        <div ng-show="vm.resultAvailable" style="margin-top: 20px;"> <pre ng-highlight="vm.result"></pre>

        </div>
    </div>
</div>

CSS

body {
    padding-top:0;
    padding-bottom: 20px;
}
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
input, select, textarea {
    max-width: 280px;
}
pre, code {
    max-height: 400px;
}
p {
    font-size:16px;
}

JavaScript

angular.module('capApiDemo', []);

angular.module('capApiDemo').directive('ngHighlight', ['$interpolate', function ($interpolate) {
    "use strict";
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
            $scope.$watch(attrs.ngHighlight, function (newValue) {
                element.text(newValue);
                hljs.highlightBlock(element[0]);
            });
        }
    };
}]);

angular.module('capApiDemo')
    .controller('authenticationDemoCtrl', authenticationDemoCtrl);

authenticationDemoCtrl.$inject = ['$http'];

function authenticationDemoCtrl($http) {
    var vm = this;
    vm.subscriberId = "";
    vm.password = "";
    vm.getToken = getToken;
    vm.selectedFormat = "application/json";

    function getToken() {
        var basicAuth = btoa(vm.subscriberId + ':' + vm.password);
        $http({
            method: 'POST',
            url: 'https://services.cap.co.uk/v1/Authentication',
            headers: {
                'Authorization': 'Basic ' + basicAuth,
                    'Accept': vm.selectedFormat
            }
        })
            .then(function (response) {
            vm.resultAvailable = true;
            if (vm.selectedFormat === 'application/json') {
                vm.result = JSON.stringify(response.data, undefined, 2);
            } else {
                vm.result = response.data;
            }
        })
            .
        catch (function (errResponse) {
            vm.resultAvailable = true;
            if (vm.selectedFormat === 'application/json') {
                vm.result = JSON.stringify(errResponse.data, undefined, 2);
            } else {
                vm.result = errResponse.data;
            }
        });
    }

}