How do I query Azure Web API from Cordova Azure Au

I built an VS2015 Cordova App for ios/android. The app uses an Azure mobile service tied to Azure Active Directory following this Microsoft Azure tutorial. This works well. When I try to do a directory search, I am prompted by Azure to authenticate using my tenant credentials.

Next steps:

I created an Azure Web API which does some C.R.U.D on an Azure SQL database. The API works fine and I get data from it (while unsecured) by navigating to https://[MyUniqueApi].azurewebsites.net/api/values.
I then enabled authentication for the Web API in Azure with the screenshot below. Once enabled, I now receive a Microsoft login page asking me to authenticate to the Web API, which is great and what I expect to happen.
Now I would like my Cordova app to seamlessly (passive) authenticate to Azure Active Directory (already happening) and give me access to my Web API and return data. Following this Microsoft Azure tutorial, in the Classic Azure Management Portal, I configured the Cordova Native client application to have permissions to my Web API. Also following the tutorial, I updated the Web API manifest to set oauth2AllowImplicitFlow to true and created a key for the Web API.

Once the user has authenticated using the ADAL Cordova library (working just fine and I receive a token back), I would like to execute a GET request to my Web API and return data.

This is where I'm having trouble and not sure how to construct the request to the API so it passes along a token/credentials to return the data from the API without requiring further login. Here is what I have after I authenticate to Azure Active Directory successfully:

I tried passing the bearer token returned by ADAL to the header of the jQuery GET request but that doesn't work. The data variable in the jQuery done callback (from the screenshot above) contains HTML when it's returned. When examining the HTML, it's the Microsoft Azure login page which means I'm not getting the passive authentication flow.

Any help would be much appreciated! I'm assuming I'm not constructing the jQuery correctly, or not passing along a token or cred's correctly but can't find an example of how to accomplish this with javascript. I think my Azure setup is good, but can add examples of any further information needed to help diagnose the problem.

@vibronet I was very much hoping you would post an answer to my question. Thank you for doing so! I did follow the cordova sample you pointed out. It was the basis of my starting point. Per your suggestion, I altered my Azure Web API manifest and set the implicit flow back to false which I had initially set to true. How do I query the graph api and my web api using/sharing the same accessToken? In the index.js file (from the github example), the app.requestData function uses the accessToken from the authResult. This authResult was from getting a token for resource "https://graph.windows.net". I would now like to use this same accessToken to get data from my Web API which is at "https://mywebapi.azurewebsites.net". I'm unable to do that though and receive HTML in xhr response.

I have the example here in google docs. This will work and get me data from the graph api, but will not get data from the resource at webApiResourceUri. If I authenticate the Web API and graph API separately and get separate accessTokens, it works but will put up two login screens. That's why the jsFiddle has authenticateGraphApi and authenticateWebApi in two different functions because I don't understand how to combine and use the same token.

Thanks in advance for your help!

Arthur, you don't need the implicit flow nor a key to invoke your web API. Please refer to the Azure AD cordova sample here, and specifically to https://github.com/Azure-Samples/active-directory-cordova-multitarget/blob/master/DirSearchClient/js/index.js

Update to address the 2nd part of the question: you never use the same access token for accessing two different resources. Once you obtained the first access token, ADAL also obtained a refresh token - which can be used to silently obtain new access tokens for the other resources that you app declared as required resources. You can avoid the 2nd login screen by invoking AcquireTokenSilent