XSRF with AngularJS: DocuSign API Embedded View Client-Side implementation - javascript

I have an AngularJS application that is utilizing the DocuSign Embedded Signing REST API to open a tab with the embedded document to DocuSign after the user completes a form.
I have looked around StackOverflow on some topics to help, but I can't find anything like my implementation.
I continue to get a 401 error on login, and I'm pretty sure it's because of CORS being blocked.
Any help is appreciated!
Here is my DocuSign factory:
app.factory('dsFactory', function($http) {
return {
login: function(templateId) {
return $http({
url: 'https://demo.docusign.net/restapi/v2/login_information',
method: 'GET',
params: {
'X-DocuSign-Authentication': {
'DocuSignCredentials': {
'UserName': 'xxx',
'Password': 'xxx',
'IntegratorKey': 'xxx'
}
}
}
});
},
envelope: function(baseUrl, templateId, recipientName, templateRoleName) {
var url = baseUrl + "/envelopes";
return $http({
url: url,
method: 'POST',
params: {
"emailSubject": "DocuSign API call - Embedded Sending Test",
"templateId": templateId,
"templateRoles": [{
"email": "xxx",
"name": recipientName,
"roleName": templateRoleName
}],
"status": "sent"
}
});
},
getUrl: function(baseUrl, envelopeId, recipientName) {
var url = baseUrl + "/envelopes/" + envelopeId + "/views/recipient";
return $http({
url: url,
method: 'POST',
params: {
"returnUrl": "http://www.docusign.com/devcenter",
"authenticationMethod": "email",
"email": "xxx",
"userName": recipientName
}
});
}
};
});
And here is the promise chain to open a new tab with the embedded document view:
// Elaborate promise chain for DocuSign login and document url retrieval
loginPromise = dsFactory.login($scope.templateId);
loginPromise.then(
function(payload) {
$scope.dsBaseUrl = payload.data.loginAccounts[0].baseUrl;
envelopePromise = dsFactory.envelope($scope.dsBaseUrl, $scope.templateId, $scope.businessName, 'Signer');
envelopePromise.then(
function(payload) {
$scope.dsEnvelopeId = payload.data.envelopeId;
urlPromise = dsFactory.getUrl($scope.dsBaseUrl, $scope.dsEnvelopeId, $scope.businessName);
urlPromise.then(
function(payload) {
$scope.dsCompleteUrl = payload.data.returnUrl;
window.open($scope.dsCompleteUrl);
},
function(errorPayload) {
console.log('retrieve DS url failed' + '\n');
console.log('Status: ' + errorPayload.status);
}
);
},
function(errorPayload) {
console.log('retrieve DS envelopeId failed' + '\n');
console.log('Status: ' + errorPayload.status);
}
);
},
function(errorPayload) {
console.log('DS login failed' + '\n');
console.log('Status: ' + errorPayload.status);
}
);
Any thoughts or assistance on how I can get this integration working?
Maybe something to do with the headers?

This issue is not specific to Angular.
If you can either use callback or ask target domain to add your domain in the "Access-Control-Allow-Origin" header. For your specific issue, I don't think you can ask DocuSign to do this. It leaves you with #2.
You can call the API from server side.
Angularjs https (browser)->your server->DocuSign API>your server->browser

Related

How to add 'field' property to a Google Drive API v3 call in JavaScript?

tl;dr I am new to JavaScript and Google Apps Script and I have no idea how to add the 'fields' property to a Google Drive v3 API call.
I am trying to modify file permissions in a G Suite domain using Google Apps Script, a service account, and the OAuth 2 sample from Google. I wrote a function for Drive API v3 to replace Drive API v2 getIdForEmail, but API v3 requires the 'fields' query parameter to request specific fields.
The error given when I run the script is:
Request failed for https://www.googleapis.com/drive/v3/about returned code 400. Truncated server response: { "error": { "errors": [ { "domain": "global", "reason": "required", "message": "The 'fields' parameter is required for this meth...
I found the answer in a different programming language but can't translate it to Google Apps Script / JavaScript. See Fields on the previous answer: Google Drive API v3 Migration. How do I add the 'fields' property to request 'permissionId'?
function getPermissionIdForEmail(userEmail) {
var service = getService(userEmail);
if (service.hasAccess()) {
var url = 'https://www.googleapis.com/drive/v3/about';
var options = {
'method': 'get',
'contentType': 'application/json'
};
var response = UrlFetchApp.fetch(url, {
headers: {
Authorization: 'Bearer ' + service.getAccessToken()
}
});
var result = JSON.parse(response.getContentText());
Logger.log('getPermissionIdForEmail result: %s', JSON.stringify(result, null, 2));
} else {
Logger.log('getPermissionIdForEmail getLastError: %s', service.getLastError());
}
}
Edit: Thank you Cameron Roberts for the help. The solution I used is
var url = 'https://www.googleapis.com/drive/v3/about' + '?fields=user/permissionId';
I can't recall offhand if Google will accept a POST request here, if they will this could be passed as a request payload:
var response = UrlFetchApp.fetch(url, {
headers: {
Authorization: 'Bearer ' + service.getAccessToken()
},
payload: {
fields: 'kind,user,storageQuota'
}
});
Or if it must be a GET request you can append the parameters directly to the url:
url = url+'?fields=kind,user,storageQuota'
var response = UrlFetchApp.fetch(url, {
headers: {
Authorization: 'Bearer ' + service.getAccessToken()
}
});

How to set headers in Ajax call?

I am developing multi-language website using Angularjs and a Web api as backend. I am trying to send RequestedPlatform and RequestedLanguage in the header whenever I make an API call.
Below is my Ajax request call.
$http.post(url,RegistrationData).then(function (response) {
var pageList = response.data.ID;
toastr.success('', 'Registered Succesfully');
$state.go('Registration.OTPVerification', { pageList });
}, function (error) {
toastr.error('', 'Error Occured');
});
updated code
var RegistrationData = {
FirstName: $scope.user.Fname,
LastName: $scope.user.Lname,
Password: $scope.user.password,
Gender: "Male",
DateOfBirth: "2017-04-04",
Nationality: $scope.user.selectedGlobe,
Mobile_CountryCod: "91",
MobileNumber: $scope.user.mobilenumber,
EmailId: $scope.user.email,
Home_Location: $scope.user.homeLocation,
Home_City: $scope.user.homeCity,
Home_Neighbourhood: $scope.user.homeNeighbourhood,
Home_HouseNumber: $scope.user.housenumber,
Home_MainStreet: $scope.user.homemainstreet,
Home_SubStreet: $scope.user.homesubstreet,
Work_Location: $scope.user.worklocation,
Work_City: $scope.user.workcity,
Work_Neighbourhood: $scope.user.workNeighbourhood,
Work_HouseNumber: $scope.user.workhousenumber,
Work_MainStreet: $scope.user.workmainstreet,
Work_SubStreet: $scope.user.worksubstreet
};
var req = {
method: 'POST',
url: url,
data: { RegistrationData: RegistrationData },
headers: {
RequestedPlatform: "Web",
RequestedLanguage: "English"
}
}
$http(req).then(function (response) {
var pageList = response.data.ID;
toastr.success('', 'Registered Succesfully');
$state.go('Registration.OTPVerification', { pageList });
}, function () {
toastr.error('', 'Error Occured');
});
May I get some help to set headers in Ajax. Any help would be appreciated.
you can send headers with headers property of $http
var req = {
method: 'POST',
url: 'http://example.com',
headers: {
'Content-Type': undefined
},
data: { test: 'test' }
}
$http(req).then(function(){...}, function(){...});
and if you want headers for all the requests that can be fully configured by accessing the $httpProvider.defaults.headers configuration object,
Reference
There are few ways and I have posted one which I have been using it for a while. I hope you are looking for the below
$http.post('test', data, {
withCredentials : false,
transformRequest : angular.identity,
headers : {
'Content-Type' : undefined
}
})

AngularJS - Dynamic URL with ID

config.js
angular.module('config', []).constant('ENV',
{
name: 'My Angular Project',
apiEndPoint: 'http://SOMEIP/myServer', //API host,
adminUrl:'/admin/regionid/site/siteid/admin/regionid', //endpoint
loginUrl:'/login/regionid/site/siteid/device'
});
controller.js
this.userLogin = function(username, password) {
var adminServicePath = ENV.apiEndPoint + ENV.adminUrl
//final url = http://SOMEIP/myServer/admin/1/site/1/admin/1
var loginServicePath = ENV.apiEndPoint + ENV.loginUrl
//final url = http://SOMEIP/myServer/login/2/site/2/device
return $http({
method: 'POST',
url: adminServicePath,
headers: {
"Authorization": "Basic ",
"Content-Type": "application/x-www-form-urlencoded"
}
})
};
Here I am appending API with endpoint to form a complete URL. My issue is regiondid and siteid are dynamic. After user logs in, one REST API request will fetch siteid and regionid in response.
How do I dynamically replace siteid and regionid in URL with ID's
received in API response? After receiving id's in response, call a function that replaces the value.
You can use the String.prototype.replace(substr, newsubstr)
You can keep regionID instead of ?
var ENV = {
name: 'My Angular Project',
apiEndPoint: 'http://SOMEIP/myServer', //API host,
adminUrl: '/admin/?/site/?/admin/?', //endpoint
loginUrl: '/login/?/site/?/device'
};
var adminServicePath = ENV.apiEndPoint + ENV.adminUrl.replace("?", 1).replace("?", 1).replace("?", 1);
console.log("Final url admin : " + adminServicePath);
var loginServicePath = ENV.apiEndPoint + ENV.loginUrl.replace("?", 2).replace("?", 2);
console.log("Final url login : " + loginServicePath);
instead of constant, you can use value.
angular.module('config', []).value('ENV',
{
name: 'My Angular Project',
apiEndPoint: '', //API host,
adminUrl:'', //endpoint
loginUrl:''
});
Inject ENV and set all values after API call.
ENV.name = xyz;
ENV.apiEndPoint = xyz;
ENV.adminUrl = xyz;
ENV.loginUrl = xyz;
but the values might get set to default once you refresh the browser.
I'll assume that the siteid and the regionid can only be obtained from the response to the login endpoint.
Using a constant might not be the best idea here for obvious reasons (i.e. they're constant, and can't be created at the time you want to create them).
Instead, you could do one of a few things - a simple solution that probably works for a lot of use cases would be to create a login service that wraps your API call and then sets a value either in the service or another service that can be injected into wherever you need it.
It might look like this:
angular.module('app')
.service('loginService', function($http) {
var siteId,
regionId;
function login(username, password) {
return $http({
method: 'POST',
url: '<login endpoint here>',
headers: {
"Authorization": "Basic ",
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(function(result) {
siteId = result.siteId;
regionId = result.regionId;
});
}
);
This makes the values available to you any time you need to make an API call after logging in. However, this isn't great since you will need to inject the loginService into any controller/service that needs it, and that controller/service might not really care about the login service at all.
An improved approach to this could be to have an API service that performs the http gets/sets/puts/posts/whatever and that is accessed by your data access layer. Inside this service, you can set/get the siteid and regionid.
It might look like this:
angular.module('app')
.service('api', function($http) {
var siteId,
regionId;
var defaultHeaders = {
"Authorization": "Basic ",
"Content-Type": "application/x-www-form-urlencoded"
};
function post(url, options) {
return $http({
method: 'POST',
url: url,
headers: options.headers ? options.headers : defaultHeaders
});
}
// Other functions to perform HTTP verbs...
});
angular.module('app')
.service('loginService', function(api) {
function login(username, password) {
api.post('urlHere', options)
.then(function(result) {
api.siteId = result.siteId;
api.regionId = result.siteId;
});
}
});
You can then access the siteid and regionid where you like.
For example:
angular.module('app')
.controller('someService', function(api) {
function doSomethingWithTheApi() {
var url = 'www.google.com/' + api.siteId + '/' + api.regionId + 'whatever-else';
return api.post(url, {});
}
);
Note: the code above isn't complete, but it gives you a very good idea of the approach you could take that is reasonably clean, not too hacky and is easily testable :)
Hope that helps!

Publishing in facebook page as admin in v2.3 Javascript api

I try to post in fan page as admin but it does not work:
it works but not as admin
var wallPost = {
access_token: token,
message: 'asdasdasd'
};
FB.api('/xxxxx/feed', 'post', wallPost, function(response) {
console.log(response);
});
This has an error:
FB.api('/' + page_id, {fields: 'access_token'}, function(resp) {
if(resp.access_token) {
FB.api('/' + page_id + '/feed',
'post',
{ message: "I'm a Page!", access_token: resp.access_token }
,function(response) {
console.log(response);
});
}else{
console.log(resp);
}
});
the error is:
"(#200) The user hasn't authorized the application to perform this action"
My scope: 'manage_pages,publish_actions,read_stream,user_groups'
Since v2.3, you need permission publish_pages (in addition to manage_pages) to post as a page.
They separated this from publish_actions, which is now for posting as a user only.
(See also: https://developers.facebook.com/docs/apps/changelog#v2_3_changes)

OAuth 2.0 and Phonegap's InAppBrowser for Authentication

I am trying to use Oauth 2.0 to authenticate users signing in their google accounts. I will need access to their names and email addresses for this. I am using phonegap's InAppBrowser to do this.
So far I have this:
function openPage() {
var login_url = "https://accounts.google.com/o/oauth2/auth" + '?' + $.param({ client_id: "(not shown)", redirect_uri: "http://www.google.com", response_type: "token", scope: "openid profile email" });
var loginWindow = window.open(login_url, '_blank', 'location=yes');
loginWindow.addEventListener('loadstop', function(e) {
var url = e.url;
var access_token = url.split("access_token=")[1];
validateToken(access_token);
});
function validateToken(token) {
$.ajax({
url: 'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=' + token,
data: null,
success: function(responseText){
alert("Validation Success!");
getUserInfo(token);
},
dataType: "jsonp"
});
}
function getUserInfo(token) {
$.ajax({
url: 'https://www.googleapis.com/oauth2/v1/userinfo?access_token=' + token,
data: null,
success: function(resp) {
user = resp;
alert(JSON.stringify(user));
},
dataType: "jsonp"
});
}
}
The validation of the token works everytime, but once it calls getUserInfo() the JSON returned is filled with errors and invalid credential strings. What am I doing wrong? Thanks!
I guess you need to set the token in Authorization header as per the documentation for Userinfo endpoint found here

Categories