CODEWITHSUNDEEP
javascriptajaxoffice365adaloffice-js
EasyE
EasyE

Reputation: 580

Office Add in not Authenticating to Webapi

Currently having issues accessing a web api controller that has the an autherize attribute and is registered to Azure AD. Currently I am getting a Token from ADAL.JS successfully and now am trying to make a ajax call to a test Webapi which will perform a back end service for my Office-Addin app. I have tried to scenarios which I will describe.

First Scenario: I created to separate web application entries Azure management portal, one for my office Add in app so I can get a token, and the other one for my web api to I can lock it down. I then gave permission for my office-add application to my webapi in order for my office-Add in to talk with my web api. I get a 401 status unauthorized.

Second Senario:

Since I was getting unauthorized I proceeded to make a new application in my Azure Management portal and getting a token with the ADAL.js but when I make the same call to the webapi which is sharing the same client number as my office-Addin app I still get a 01 status unauthorized.

Not sure what I am doing wrong, seem like I have tried both possible ways but none are working for me. This is my java-script 

window.config = {
tenant: variables.azureAD,
clientId: variables.clientId,
postLogoutRedirectUri: window.location.origin,
endpoints: {
    sharePointUri: "https://" + tenant + ".sharepoint.com",
    ContentCenterApi: "https://localhost:44334"
},
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);
}


function GetSharepointList(e) {
var authContext = new AuthenticationContext(config);
var user = authContext.getCachedUser();


if (!user) {
    authContext.login();
}

else {
    authContext.acquireToken(config.endpoints.sharePointUri, function (error, token) {

        if (error || !token) {
            console.log("ADAL error occurred: " + error);
            return;
        }
        else {
            var me = this;
            //var SiteUrl = config.endpoints.sharePointUri + "/sites/Apps_Dev/ER_TestSite/";
            $.ajax({

                url: 'https://localhost:44334/api/Values/Get',
                dataType: "json",
                headers: {
                    "Authorization": "Bearer " + token,
                    "accept": "application/json;odata=verbose",
                },
                success: function (data) {
                    handleData(data);
                }
            }).done(function (response) {
                console.log("Successfully fetched list from SharePoint.");
                // var items = response.d.results;
                //$("#contentPreview").append(items[0]);
            }).fail(function (error) {
                console.log("Fetching list from SharePoint failed.");
            });
        }

    });
};
}

Upvotes: 0

Views: 254

Answers (1)

Jeffrey Chen
Jeffrey Chen

Reputation: 4690

I'm a little confusing that the API you call is "https://localhost:44334/api/Values/Get", but the resource id to acquire token is "config.endpoints.sharePointUri". It should be the App URI you registered on the Azure AD.

About how to secure the Web API by using Azure AD. The article below may give you some help.

Protect a Web API using Bearer tokens from Azure AD.

Single Page Application demo (adal.js): active-directory-angularjs-singlepageapp

This sample demonstrates the use of ADAL for JavaScript for securing an AngularJS based single page app, implemented with an ASP.NET Web API backend.

Upvotes: 2

Related Questions