Consume Secure Azure API from SharePoint online - azure

Question

I have developed Azure API app with authentication on feature, log in with Azure Active Directory, I need to consume this API from SharePoint online , I
I need to authenticate and consume the azure API, no signin-prompt, every thing should be handled in the script
need to use ADAL.js to authenticate secure API ,I cannot find any good reference about the JavaScript code, I was wondering if anyone have a good reference how the JavaScript code should look like?
Thanks!

Answer 1

Here are the steps to call the azure hosted API from SharePoint online using JavaScript and ADAL.js library, no signing-prompt, everything should be handled in the script using ADAL.js to authenticate secure API
Create and Configure API
Create azure API  
Publish your azure API in azure
Browse to azure portal, select your API application , select Authentication/Authorizations
Set the App Service Authentication: On
Action to take when request us not authenticated: Log in with Azure dictionary
Authentication providers: Express
Now the API is protected with Azure AD, if you navigate your API via browser you will be prompted for login
When we set authentication in Express mode, the app will be created automatically in Azure Active directory, you can see the name under Azure AD app
Navigate to Azure management portal, click on active directory in left navigation,
Click on the Directory which will be federated to your office 365 (or any source you want to call azure API which uses the same azure active directory as your configured for you API authentication)
Click on the Application, and you will find you AD app in the list which has been created with Express method as we discussed om step nr.3
Now we need to create new app in AAD which will be our communication channel from office 365 to Azure API, Click on ADD on footer
Enter name and select “WEB APPLICATION AND/OR WEB AP” option
For Sign in URL enter your SharePoint online Url which you are planning to call Azure API from
For APP ID URL, enter unique Url, this will be used as a unique logical identifier for your app.
After the app created, click on Configure, copy the Client ID which will be used later­­
Under Permission to other applications, Click “Add Application”, on the next page select “All Apps” and select you Azure API app which you double checked in step nr.8, and confirm
You will be redirected back to Configure page, Under Permission to other applications, now you see your azure API app is listed here, click on delegated permission, select the access to app
At the bottom of the page, click Manage manifest > Download manifest.
Download the file to a location where you can edit it.
In the downloaded manifest file, search for the oauth2AllowImplicitFlow property. Change the value of this property from false to true, and then save the file.
Click Manage manifest > Upload manifest, and upload the file that you updated in the preceding step.
Azure management portal, select setting and copy your AAD subscription ID for related AAD
Call Azure API from SharePoint Online
Once the above steps have been done, you can call azure API from sharePoint online which is using same Active directory above
Edit the page and add Script Editor web part
Add following script
· subscriptionId, see step nr.20
· clientId see step nr.13
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.13/js/adal.min.js"></script>
<script type="text/javascript">
function CallAzureAPI() {
"use strict";
var subscriptionId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var clientId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
window.config = {
subscriptionId: subscriptionId,
clientId: clientId,
postLogoutRedirectUri: window.location.origin,
endpoints: {
AzureApiUri: 'https://xxxxxxxxxxxx.azurewebsites.net'
},
cacheLocation: 'localStorage'
};
var authContext = new AuthenticationContext(config);
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}
// If not logged in force login
var user = authContext.getCachedUser();
if (user) {
// Logged in already
console.log(user);
}
else {
authContext.login();
}
// Acquire token for Files resource.
authContext.acquireToken(config.endpoints. AzureApiUri, function (error, token) {
// Handle ADAL Errors.
if (error || !token) {
console.log('ADAL error occurred: ' + error);
return;
}
var ApiUri = "https://xxxxxxxxx.azurewebsites.net/api/Get";
$.ajax({
type: "GET",
url: ApiUri,
headers: {
'Authorization': 'Bearer ' + token,
}
}).done(function (response) {
console.log('Successfully called API.');
console.log(response);
}).fail(function () {
console.log('Calling API failed.');
});
});
}
</script>
<input type='button' value='Call Azure API' onclick=" CallAzureAPI ();"/>
This solution works though after some time ( later I found out when AAD cookie is expired ) we get this error "Token renewal operation failed due to timeout ",
I did some research and I found out he getCachedUser or getUser methods look into the browser storage for id_token and returns a non-null user if there is a token inside the cache. It does not look into the token expiration time though.
What's happening here is since localStorage is used, tokens are preserved in the cache when one re-opens the browser (and hence getCachedUser returns a non-null object) but the AAD cookie is expired (unless user checked the keep me signed in checkbox when logging in). Since the cookie is expired, acquire token call fails with the "login required" error.
so as workaround I checked , keep me signed in checkbox when logging in and it works .

Answer 2

It is possible to call the web API which protected by Azure AD from the SharePoint online using the JavaScript, however it is very complex.
Here are the steps for your reference:
Developing the web API which protected by Azure AD
register an native app on the same tenant
enable the implicit flow for the native app
grant the native app to access the web API from Azure portal
using the admin_consent for the native app to grant permission fo the organization
developing a web page in web API project for the redrect page for the OAuth 2.0 request
write the code in the web page using windows.postMessage to post the token to the parent page
$().ready(function () {
if (window.parent != null) {
// get the token from URL here
var token = "123";
console.log(window.location);
window.parent.postMessage(token, "*");
}
})
In SharePoint online page, using iframe to send the implict flow like code below
<iframe id="iframe_id" src="https://login.microsoftonline.com/{tenanit}.onmicrosoft.com/oauth2/authorize?response_type=token&client_id={clientId}&resource={webApiAppIdUri}&redirect_uri={redirect_uri}&prompt=none"></iframe>
<script>
var token = "";
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
token=event.data;
console.log(event.data);
}
</script>
Here is a figure to help understanding the progress: