<html>
    <body ng-app="example">
        <div ng-controller="ExampleController">
            <label>Consumer Key</label><br />
            <input type="text" name="requiredParameters.oauth_consumer_key" ng-model="requiredParameters.oauth_consumer_key" />
            <br /><br />
            <label>Nonce</label><br />
            <input type="text" name="requiredParameters.oauth_nonce" ng-model="requiredParameters.oauth_nonce" />
            <br /><br />
            <label>Timestamp</label><br />
            <input type="text" name="requiredParameters.oauth_timestamp" ng-model="requiredParameters.oauth_timestamp" />
            <br /><br />
            <label>Request End Point</label><br />
            <input type="text" name="endpoint" ng-model="endpoint" />
            <br /><br />
            <label>Base Signature String</label><br />
            <textarea name="base_signature_string" ng-model="base_signature_string"></textarea>
            <br /><br />
            <label>Consumer Secret Key</label><br />
            <input type="text" name="oauth_consumer_secret" ng-model="oauth_consumer_secret" />
            <br /><br />
            Signature: {{hmac_sha1}}
        </div>
    </body>
</html>
input {
    width: 100%;
}

textarea {
    width: 100%;
    height: 100px;
}
var example = angular.module("example", []);
example.controller("ExampleController", function($scope, $http) {
    
    var nonceObj = new jsSHA(Math.round((new Date()).getTime() / 1000.0), "TEXT");
    $scope.oauth_consumer_secret = "";
    $scope.endpoint = "https://api.twitter.com/oauth/request_token";
    $scope.requiredParameters = {
        oauth_consumer_key: "",
        oauth_nonce: nonceObj.getHash("SHA-1", "HEX"),
        oauth_signature_method: "HMAC-SHA1",
        oauth_timestamp: Math.round((new Date()).getTime() / 1000.0),
        oauth_version: "1.0"
    };
    
    $scope.$watchCollection("[requiredParameters.oauth_consumer_key, requiredParameters.oauth_nonce, requiredParameters.oauth_timestamp, endpoint]", function() {
        $scope.base_signature_string = "POST&" + encodeURIComponent($scope.endpoint) + "&";
        var requiredParameterKeys = Object.keys($scope.requiredParameters);
        for(var i = 0; i < requiredParameterKeys.length; i++) {
            if(i == requiredParameterKeys.length - 1) {
                $scope.base_signature_string += encodeURIComponent(requiredParameterKeys[i] + "=" + $scope.requiredParameters[requiredParameterKeys[i]]);
            } else {
                $scope.base_signature_string += encodeURIComponent(requiredParameterKeys[i] + "=" + $scope.requiredParameters[requiredParameterKeys[i]] + "&");
            }
        }
    });
    
    $scope.$watchCollection("[base_signature_string, oauth_consumer_secret]", function() {
        if(typeof $scope.base_signature_string !== "undefined" && $scope.base_signature_string.length > 0) {
            if(typeof $scope.oauth_consumer_secret !== "undefined" && $scope.oauth_consumer_secret.length > 0) {
                var shaObj = new jsSHA($scope.base_signature_string, "TEXT");
                $scope.hmac_sha1 = encodeURIComponent(shaObj.getHMAC($scope.oauth_consumer_secret + "&", "TEXT", "SHA-1", "B64"));
            }
        }
    });
    
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jsSHA/1.5.0/sha1.js