We Keep Coding

Trying to implement ADAL (Azure AD) in Javascript, keep getting a login/redirect loop

So I've got to create a calendar in html that gets events from Outlook and then deploy that as a custom page to Sharepoint, so it can be included as a webpart/iframe in site collections.
The problem is that I've tried adding ADAL security because you need to be logged in & send a token to Microsoft Exchange Online API in order to get calendar events etc. To display the calendar part, I'm using FullCalendar.io .
Now I've been keep getting a login/redirect loop that never ends. Does anyone see the fault in code? Here it is:
var $this = this;
$(document).ready(function() {
debugger;
window.config = {
tenantId: {tenant},
clientId: {clientid},
popUp: true,
callback: callbackFunction,
redirectUri: {custom aspx page URL on our Sharepoint},
cacheLocation: 'localStorage'
};
var authenticationContext = new AuthenticationContext(config);
authenticationContext.handleWindowCallback();
function callbackFunction(errorDesc, token, error, tokenType) {
alert('callbackFunction reached!');
}
var items = null;
if (authenticationContext.TokenCache) {
items = authenticationContext.TokenCache.ReadItems();
}
if (authenticationContext['_user']) {
authenticationContext.acquireToken(config.clientId, function (errorDesc, token, error) {
if (error) { //acquire token failure
if (config.popUp) {
// If using popup flows
authenticationContext.acquireTokenPopup(config.clientId, null, null, function (errorDesc, token, error)
{});
}
else {
// In this case the callback passed in the Authentication request constructor will be called.
authenticationContext.acquireTokenRedirect(config.clientId, null, null);
}
}
else {
//acquired token successfully
// alert('token success');
$this.DisplayEvents(token);
}
});
}
else {
// Initiate login
authenticationContext.login();
}
});
function DisplayEvents(adalToken) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function(start, end, timezone, callback) {
var headers = new Headers();
var bearerToken = "Bearer " + adalToken;
headers.append('Authorization', bearer);
var options = {
method: 'GET',
headers: headers
};
var exchangeEndpoint = 'https://outlook.office.com/api/v2.0/me/events';
fetch(exchangeEndpoint, options).then(function (response) {
alert('Response data from successful call: ' + response);
});
}
});
}
So the code does get to "acquire token" and then the last "else", so "$this.DisplayEvents(token)" does get called! However, after acquire token, the app just keeps redirecting forever and ever... The Reply URL in my Azure AD App registration is also the window.config redirectURL value, or else I'd get an error stating the reply URL's don't match between request and Azure.
Does anyone know where it's going wrong?

I can reproduce your issue on my side by using your code. If you use authContext.getCachedUser() to check login status, redirect issue will disappear.
if (authContext.getCachedUser()) {
authContext.acquireToken(config.clientId, function (error, token) {
if (error) { //acquire token failure
if (config.popUp) {
// If using popup flows
authContext.acquireTokenPopup(config.clientId, null, null, function (errorDesc, token, error) { });
}
else {
// In this case the callback passed in the Authentication request constructor will be called.
authContext.acquireTokenRedirect(config.clientId, null, null);
}
}
else {
//acquired token successfully
// alert('token success');
alert(token);
}
});
}
else {
// Initiate login
authContext.login();
}

Sendind SMS from IONIC not working with $cordovaSms plugin

I am using smsCordova plugin to send sms from my ionic application but getting the error that "SMS is not defined".
I had used the cordovaSms plugin in $ionicPlatform.ready() function.
Here is my code which i am using to send the SMS :-
//use verifyNumber service
verifyNumberService.verify()
.then(
function (result) {
if (result == "Successfully data save...") {
//alert and navigate to profile Info state
$ionicPopup.alert({
title: 'Registered',
template: 'Thanks For Signup'
});
$ionicPlatform.ready(function() {
alert("in device ready function")
sendOtp();
});
$state.go('profileInfo');
}
This is the function to sendOtp() :-
function sendOtp() {
alert("inside send otp");
$cordovaSms
.send('+919765293765', "Hi there",{})
.then(function () {
// Success! SMS was sent
alert("success")
console.log('Success');
}, function (error) {
// An error occurred
alert("error");
console.log(error);
});//then
alert("send otp");
}

Azhar Khan,
If we wants to use the send sms request in cordova, then
1. we need to install this plugin in you app :
cordova plugin add https://github.com/cordova-sms/cordova-sms-plugin.git
2.Need to add that plugin instance($cordovaSms) in Controler function :
.controller('ThisCtrl', function($cordovaSms) {
});
Now we can send the sms throw that plugin using this code inside you controler :
document.addEventListener("deviceready", function () {
$cordovaSms.send('mobile_number', 'SMS Message', options)
.then(function() {
alert(SMS sent )
}, function(error) {
alert(Problem in sending SMS)
});
});
Thats all we need for sending SMS to any number in ionic
Have a happy code day.

Properly retrieve username and useful values (site title, copyright, etc.)

I have a simple web app based on this project ( https://github.com/arthurkao/angular-drywall ), running with NodeJS and AngularJS as the front-end.
I'm trying to set up a simple page that displays a list of all connected users on a map (using Google Maps, Geolocation and PubNub).
Here's how I'm actually doing it:
angular.module('base').controller('TravelCtrl',
function($rootScope, $scope, NgMap, security, $geolocation, PubNub){
$rootScope.extusers = []; //remote users
$scope.initTravel = function() { //declare the init function
PubNub.init({
subscribe_key: $rootScope.security.keys.psk,
publish_key: $rootScope.security.keys.ppk,
uuid: $rootScope.security.currentUser.username,
ssl: true
});
PubNub.ngSubscribe({
channel: "travel",
state: {
position: {},
}
});
console.log("Loaded Travel");
$geolocation.getCurrentPosition({
timeout: 60000
}).then(function(position) { //when location is retreived
$scope.position = position;
PubNub.ngSubscribe({
channel: "travel",
state: {
position: {
lat: Math.floor($scope.position.coords.latitude*1000)/1000, //decrease accuracy
long: Math.floor($scope.position.coords.longitude*1000)/1000,
},
}
});
$rootScope.$on(PubNub.ngPrsEv("travel"), function(event, payload) {
$scope.$apply(function() {
$scope.extusers = PubNub.ngPresenceData("travel");
});
});
PubNub.ngHereNow({ channel: "travel" });
$scope.showInfo = function(evt, marker) { //show user window on map
$scope.extuser = marker;
$scope.showInfoWindow('infoWindow');
};
});
};
if ($rootScope.hasLoaded()) { //if username and keys are already loaded, then init module
$scope.initTravel();
} else { //else, wait for username and keys to be loaded
$rootScope.$on('info-loaded', function(event, args) {
$scope.initTravel();
});
}
}
);
Although it works, it seems like it's very buggy and only loads sometimes. Occasionally, I get this:
Result screenshot
I really don't know what I'm doing wrong, as I simply followed the tutorials on PubNub's AngularJS SDK.
I think this has to do with how I'm initialising the application.
angular.module('app').run(['$location', '$rootScope', 'security', function($location, $rootScope, security) {
// Get the current user when the application starts
// (in case they are still logged in from a previous session)
$rootScope.hasLoaded = function() {
return (security.keys && security.info && security.currentUser); //check if everything is loaded correctly
};
$rootScope.checkLoading = function() {
if ($rootScope.hasLoaded()) {
$rootScope.$broadcast('info-loaded'); //broadcast event to "TravelCtrl" in order to init the module
}
};
security.requestKeys().then($rootScope.checkLoading); //request secret keys
security.requestSiteInfo().then($rootScope.checkLoading); //then templating info (site title, copyright, etc.)
security.requestCurrentUser().then($rootScope.checkLoading); //and finally, current user (name, id, etc.)
$rootScope.security = security;
// add a listener to $routeChangeSuccess
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route && current.$$route.title? current.$$route.title: 'Default title';
});
}]);
1- Request secret keys, site info and current user with JSON API.
2- Wait until everything's loaded then init the application with the appropriate keys (PubNub, Google Maps)
--
My question is:
How do you instantiate an AngularJS app after retrieving useful information via a RESTful API?
I'm pretty new to AngularJS, and I wouldn't be surprised if my approach is totally ridiculous, but I really need to get some advice on this.
Thanks in advance for your help,
Ulysse

You don't have to wait that the AJAX Query ended to initate the angular APPs.
you can use the $http promise ( details her )
In the controller :
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
// data is now accessible in the html
$scope.data = response ;
// you can call a function to add markers on your maps with the received data
addMarkerOnMap(response);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
You can also add a watch on some variable to wait modification on them :
// you should have $scope.yourVarName declared.
$scope.$watch('yourVarName', function(newValue, oldValue) {
console.log(newValue);
});
Or watch a list/object
$scope.$watchCollection('[var1,var2]', function () {
},true);

How to use Trello JS API to create a card

I've been trying to utilize the Trello API via JSFiddle and haven't been able to get it to work (I have very limited JS/JSON knowledge). I need to create a card under a specific list, using the API.
function PostStuff()
{
$(document).ready(function(){
Trello.authorize({
interactive: true,
type: "popup",
expiration: "never",
name: "surveyrequest",
persist: "true",
success: function() { onAuthorizeSuccessful(); },
error: function() { onFailedAuthorization(); },
scope: { read: true, write: true}
});
function onAuthorizeSuccessful() {
Trello.post("cards", { name: "Card created for test", desc: "this is a test", idList: "........", due: null, urlSource: null});
}
});
}
I have JQuery and the Trello API included. I blanked out the idList in the code for security purposes. I confirmed that the code does execute the onAuthorizeSuccessful() function.
How can I modify this to create a Trello card?

function Auth() {
Trello.authorize({
type: 'popup',
name: 'your app name',
scope: {
read: true,
write: true },
expiration: '30days',
success: authenticationSuccess,
error: authenticationFailure
});
var authenticationSuccess = function(data){ /*your function stuff*/};
var authenticationFailure = function(data){ /*your function stuff*/};
}
this code works for me. i get function Auth() triggered on button click.
Also, you might have some issues with tokens which are expired, so Trello.deauthorize(); could be used on create new card failure function (it all depends on create new card error message).
regarding the create a new card...
var newCard =
{name: jQuery('input#tc_title').val(),
desc: jQuery('textarea#tc_desc').val(),
pos: "top",
idList: trello_list_id_var
};
Trello.post('/cards/', newCard, success, error);
var success = function(data){ /*..............*/}
var error= function(data){ /*..............*/}
in success/error functions you are able to check the error data
EDIT:
also i think that Trello.post("cards" ... should be replaced with Trello.post("/cards/" ... that might be the problem...

ZenDesk App OAuth browser-based authentication

I'm working on a ZenDesk app that pulls customer info from a back-end system. We need to authenticate against that system using OAuth 2's browser-based authentication flow.
It's no problem to include a link to the authentication page, something like:
https://oauth2server.com/auth?
response_type=token&
client_id=CLIENT_ID&
redirect_uri=REDIRECT_URI&
scope=photos
Once the user has logged in, though, the OAuth server wants to redirect the client and include the authorization token. So the REDIRECT_URI would typically look like:
https://example.zendesk.com/agent/#token=ACCESS_TOKEN
However, ZenDesk already makes use of the fragment identifier to indicate what content to show on the page:
https://example.zendesk.com/agent/#/dashboard
https://example.zendesk.com/agent/#/tickets/1234
My ZD App only appears on certain pages, so how can I both
have my app rendered and Javascript run, and
have the fragment identifier with the auth token available?
(I do have control over the backend OAuth server, so if you can't think of a nice clean way to accomplish this, OAuth server-side hack suggestions are also gratefully accepted.)

Here's a really simple ZenDesk App (framework version 0.5) that
authenticates against Google (in a seperate popup window)
fetches a custom ticket field value from the currently visible ticket
retrieves the Google user's name
In manifest.json, this ZenDesk App should specify "location": "ticket_sidebar".
app.js
(function (window) {
return {
zenDeskSubdomain: 'YOUR_ZENDESK_SUBDOMAIN',
googleClientId: 'YOUR_GOOGLE_CLIENT_ID',
events: {
'app.activated': 'onActivate',
'app.deactivated': 'onDeactivate',
'click .loginout': 'onLogInOutClick',
'click .show-username': 'onShowUserNameClick'
},
requests: {
getUserInfo: function (access_token) {
return {
url: 'https://www.googleapis.com/oauth2/v1/userinfo?access_token=' + access_token,
type: 'GET',
proxy_v2: true
};
}
},
onActivate: function () {
console.info("onActivate()");
this.accessToken();
var user_id = this.ticket().customField("custom_field_22931898");
this.$('.userid').text(user_id);
},
onDeactivate: function () {
console.info("onDeactivate()");
if (this.timer) {
clearTimeout(this.timer);
}
},
onShowUserNameClick: function () {
var access_token = this.accessToken();
if (!access_token) {
console.info("Can't do it! No access_token!");
return;
}
this.ajax('getUserInfo', access_token)
.done(function (data) {
console.info(data);
this.$('.username').text(data.name);
});
},
onLogInOutClick: function (event) {
if (this.accessToken()) {
this.logout(event);
} else {
this.login(event);
}
},
login: function (event) {
console.info("login()");
event.preventDefault();
var popup = this.createLoginPopup();
this.awaitAccessToken(popup);
},
logout: function (event) {
console.info("logout()");
event.preventDefault();
this.accessToken(null);
console.info(" access_token = " + this.accessToken());
this.$('.loginout').text('login');
},
createLoginPopup: function () {
console.info("createLoginPopup()");
return window.open(
'https://accounts.google.com/o/oauth2/auth?response_type=token&client_id=' + this.googleClientId + '&redirect_uri=https%3A%2F%2F' + this.zenDeskSubdomain + '.zendesk.com%2Fagent%2F&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile',
'Login Popup',
'width=400,height=400');
},
timer: null,
awaitAccessToken: function (popup) {
console.info("awaitAccessToken()");
if (this.isLoaded(popup)) {
console.info(" popup is loaded");
} else {
console.info(" popup is NOT loaded; sleeping");
var t = this;
this.timer = setTimeout(
function () { t.awaitAccessToken(popup); },
1000);
return;
}
var access_token = this.parseAccessToken(popup.location.href);
if (access_token) {
console.info(' access_token = ' + access_token);
popup.close();
this.accessToken(access_token);
} else {
services.notify('Error requesting code...');
}
},
isLoaded: function (win) {
try {
return ('about:blank' !== win.location.href)
&& (null !== win.document.body.innerHTML);
} catch (err) {
return false;
}
},
parseAccessToken: function (uri) {
var match = uri.match(/[#&]access_token=([^&]*)/i);
return match[1] || null;
},
accessToken: function (value) {
if (1 === arguments.length) {
console.info("Storing access_token = " + value);
this.store({ access_token: value });
}
var token = this.store('access_token');
console.info("access_token = " + value);
var loginout = this.$('.loginout');
if (token) {
loginout.text('logout');
} else {
loginout.text('login');
}
return token;
}
};
}(this));
layout.hdbs
<header>
<span class="logo"/>
<h3>{{setting "name"}}</h3>
</header>
<section data-main/>
<footer>
<div><a class="loginout">login</a></div>
<div><a class="show-username">show username</a></div>
<div><b>user id: </b><span class="userid">unknown</span></div>
<div><b>username: </b><span class="username">unknown</span></div>
</footer>
Google OAuth configuration
Configure Google OAuth to allow traffic from your application.
Redirect URIs
http://localhost:XXX - for the ZAT development/testing environment
https://YOUR_ZENDESK_SUBDOMAIN.zendesk.com/agent/ - for production
Javascript Origins
http://localhost:XXX - for the ZAT development/testing environment
https://YOUR_ZENDESK_SUBDOMAIN.zendesk.com - for production

You can use a lightweight server-side app to manage the authorization flow and tokens. The Zendesk app can communicate with it through the framework's iframe helper. I wrote an extended tutorial for the Zendesk Help Center at https://support.zendesk.com/hc/en-us/articles/205225558.