Call secure azure hosted API from SharePoint online

The goal of this post is to provide steps to call the azure hosted API from SharePoint online using JavaScript and the ADAL.js library, no signing-prompt, everything should be handled in the script using ADAL.js to authenticate secure API

Configuration Azure API 

1. Create azure API , You can read aboutAzure API apps here and follow a good Getting started tutorial here. 
2. Publish your azure API in azure, check the API
3. 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

 

4. Now the API is protected with Azure AD, if you navigate your API via browser you will be prompted for login
5. 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
6. Brows to Azure management portal, click on active directory in left navigation
7. 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)
8. 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
9. 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
10. Enter name and select “WEB APPLICATION AND/OR WEB AP” option
11. For Sign in URL enter your SharePoint online Url which you are planning to call Azure API from
12. For APP ID URL, enter unique Url, this will be used as a unique logical identifier for your app.
13. After the app created, click on Configure, copy the Client ID which will be used later­­
14. 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
15. 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
16. At the bottom of the page, click Manage manifest > Download manifest.
17. Download the file to a location where you can edit it.
18. In the downloaded manifest file, search for the oauth2AllowImplicitFlow Change the value of this property from falseto true, and then save the file.
19. Click Manage manifest > Upload manifest, and upload the file that you updated in the preceding step.
20. 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

1. Edit the page and add Script Editor web part
2. 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 = "xxxxxxxxxxxxxxxxxxxxxxxxxx";

var clientId = "xxxxxxxxxxxxxxx";

 

window.config = {

subscriptionId: subscriptionId,

clientId: clientId,

postLogoutRedirectUri: window.location.origin,

endpoints: {

AzureApiUri: 'https://xxxxxx.azurewebsites.net'

},

cacheLocation: 'localStorage' // enable this for IE, as sessionStorage does not work for localhost.

};

var authContext = new AuthenticationContext(config);

// Check For & Handle Redirect From AAD After Login

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 {

// NOTE: you may want to render the page for anonymous users and render

// a login button which runs the login function upon click.

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://xxx.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 ();"/>