Develop Reference

Azure AD When to use API Permissions vs Expose an API

I am currently developing a react web app that will use Microsoft's MSAL package to authenticate users to ensure only users within our tenant may access the Api.
I've built a http function app called TARGET_APP with a python function that accesses our data and returns it. I registered it to our Azure AD enterprise applications.
Now according to the documentation for proper "On Behalf Of" calls to work I am to register another app to represent my react client app, called CALLER_APP I registered this as well, and set up the scopes I need which include email, user.read, and the TARGET_APP's exposed Api.
Example of my CALLER_APP permissions here:
However when attempting to authorize with the CALLER_APP from the client, via MSAL with the scopes in the image, I get a prompt saying "Admin consent required"
Snippet from my authentication flow (handleLogin is the initiating function called) :
const msalConfig = {
auth: {
authority: "https://login.microsoftonline.com/MY_TENANT/",
clientId: "CALLER_APP_CLIENT_ID",
redirectUri,
postLogoutRedirectUri: redirectUri
},
cache: {
cacheLocation: "localStorage"
}
}
// NOTE I have subbed out my actual caller scope with "CALLER_APP_SCOPE" for this post
const loginRequest = {
scopes: ["CALLER_APP_SCOPE", "user.read", "email"]
};
async function handleLogin(instance) {
const loginUrl = await getLoginUrl(instance, loginRequest);
const loginResult = await launchWebAuthFlow(instance, loginUrl);
// Acquire token
const { accessToken } = await acquireToken(instance, loginRequest);
console.log(accessToken)
}
/**
* Generates a login url
*/
async function getLoginUrl(instance, request) {
return new Promise((resolve, reject) => {
instance.loginRedirect({
...request,
onRedirectNavigate: (url) => {
resolve(url);
return false;
}
}).catch(reject);
});
}
/**
* Generates a login url
*/
async function launchWebAuthFlow(instance, url) {
return new Promise((resolve, reject) => {
chrome.identity.launchWebAuthFlow({
interactive: true,
url
}, (responseUrl) => {
// Response urls includes a hash (login, acquire token calls)
if (responseUrl.includes("#")) {
instance.handleRedirectPromise(`#${responseUrl.split("#")[1]}`)
.then(resolve)
.catch(reject)
} else {
// Logout calls
resolve();
}
})
})
}
/**
* Attempts to silent acquire an access token, falling back to interactive.
*/
async function acquireToken(instance, request) {
return instance.acquireTokenSilent(request).then((response) => {
console.log(response.accessToken);
}).catch(async (error) => {
console.error(error);
storage.set({'loggedState': false});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Most of this code is taken directly from the documentation,
Calling the handleLogin function initiates the authentication flow successfully, however when I log in with my Microsoft credentials I receive the "App needs permission to access resources in your organisation that only an admin can grant" popup.
I double checked my scopes and ensured none require admin consent, as well as I have gone into the enterprise apps user consent and permissions settings and enabled user consent on low impact scopes as you can see here:
Enterprise Setting:
The "3 permissions classified as low impact" are the 3 scopes described above (email, user.read, allow-caller)
However,
If I go to the "Expose an API" blade instead for the CALLER_APP and make a scope there, and use that scope in the MSAL call instead, authentication goes through fully, I get a bearer token, and I am able to use the API for what I need.
This method is not mentioned in the documentation, nor any of the readings I've looked into though.
I was wondering if I could get help in understand why I shouldn't use "Expose an API" for my case, as well as why it requires admin consent?

Usually the permissions in the API permissions are selected where
user.read , email are graph permissions and when you mention
User.Read while calling msal it indirectly means
https://graph.microsoft.com/User.read which is the basic permission
to sign in user to read users profile and mail.
But the scope for calling your web api is created by you and it has different AppId or say App ID URI for different applications and its scope needs to be defined uniquely for that App to access that.
So actual scopes for that app to access the Api are exposed in expose an api blade which is the scope of the App to access.
NOTE:Actual full value/string of the Scope is the concatenation of your web API's Application ID URI and Scope name of scope. The
App ID URI acts as the prefix for the scopes you'll reference in your
API's code, and it must be globally unique.
For example,
if your web API's application ID URI is https://contoso.com/ and the
scope name is Employees.Read.All, the full scope is:
https://contoso.com/Employees.Read.All or
api://<application-client-id>/allow-caller in your case.
And coming to the point that it is asking admin consent is , when
there is no scope that actually means full string scope
api:///allow-caller , only mentioning
allow-caller is totally different scope and this new scope may
require consent from admin as it is not exposed for that particular
API.
Also you can add a client application in expose an api blade in case you don’t want to see the admin consent as the "authorized client applications" is used when you basically want to preauthorize users without admin consent being required to access that api ,If not it will prompt users for consent if needed.
Please check the below image:
References:
quickstart-configure-app-expose-web-api(github)
azure-expose an Api vs Api-permissions(stackOverflow)

Google Calendar API - Request had insufficient authentication scopes

My app is displaying list of events from users gmail "primary" calendar (and creates/deletes events). App works fine with one of my gmail accounts, when I try to sign in with other gmail accounts I get an error when fetching events:
GET 403, and in response => Request had insufficient authentication scopes.
My code for loading calendar:
window.gapi.load("client:auth2", () => {
console.log("Client loaded!!");
window.gapi.client.init({
apiKey: "MY_API_KEY",
clientId:
"MY_CLIENT_ID",
discoveryDocs: [
"https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
],
scope: "https://www.googleapis.com/auth/calendar.events",
});
window.gapi.client.load("calendar", "v3", () => {
console.log("Calendar loaded!!");
// List events after calendar is loaded
listUpcomingEvents("week");
});
});
And in my listUpcomingEvents() function I fetch events with pure js(no backend):
window.gapi.client.calendar.events
.list({
calendarId: "primary",
timeMin: start.toISOString(),
timeMax: end,
showDeleted: false,
singleEvents: true,
maxResults: 100,
orderBy: "startTime",
})
.then(function (response) {
var events = response.result.items;
console.log("Events:", events);
// Set events
setEvents([...events]);
setEventsFilter(events_filter);
});
I have tried setting scopes in my Google Cloud Platform (oauth consent screen), switched to other scopes or add more than scope but nothing works. I have even tried to make calendar public and bunch of other things i found on stackoverflow.

Request had insufficient authentication scopes.
Means that the user has authenticated with one scope but the method you are using requires another.
The method Events.list requires one of the following scopes
Now the code you have posted shows scope: "https://www.googleapis.com/auth/calendar.events", which is one of the scopes that should give you access to list events.
The issue is that when you ran that code the consent screen popped up and the user authorized your application. You then changed the scope to https://www.googleapis.com/auth/calendar.events and ran your code again. But the new consent screen didn't popup because the user is currently authenticated already.
You need to fore your app to request authorization of the user again, at that time the new scope will show up and if the user consents to it you will be able to use that method.
The easiest way to do this is to go to the users google account and revoke the access that was granted to your application. Google account
Or as your application is JavaScript you should be able to wait an hour and your access should expire and the user will be asked to consent again.

Microsoft Graph API token validation failure

I would use Microsoft Graph API in my Angular Web application.
First I make connexion using msal library
When I try log in with my profil I get this error
I have configured my app as the mentionned in the official git sample
MsalModule.forRoot({
clientID: "Tenant ID",
authority: "https://login.microsoftonline.com/common/",
redirectUri: "http://localhost:4200/",
validateAuthority : true,
popUp: true
}),
Authetification is working and I get the token.
Then when I'm in home page I make a second request to Microsoft Graph API to get user information using that token.
getProfile() {
let header= new Headers();
let tokenid= sessionStorage.getItem('msal.idtoken');
header.set('Authorization', 'Bearer ' + tokenid)
let url ="https://graph.microsoft.com/v1.0/me/"
return this.http.get(url,{headers:header});
}
}
I get an 401 Unauthorized error with a response :
{
"error": {
"code": "InvalidAuthenticationToken",
"message": "Access token validation failure.",
"innerError": {
"request-id": "xxxxxx",
"date": "2018-10-09T22:58:41"
}
}
}
I don't know why MG API is not accepting my token, Am I using wrong authority url ?
UPDATE: I have understood that actually I get id_token which is different from access token. How can I get Access token from MSAL library to make MS GRAPH API calls ?:

According to the same sample you can also attach an HttpInterceptor that will automatically attach the access token to each (external) HTTP call.
By reading through the documentation I found the following information.
consentScopes: Allows the client to express the desired scopes that should be consented. Scopes can be from multiple resources/endpoints. Passing scope here will only consent it and no access token will be acquired till the time client actually calls the API. This is optional if you are using MSAL for only login (Authentication).
That suggests that using the HttpInterceptor doesn't only attach the access token, but also retrieves it. The token that you're seeing is probably just a token for your application, but isn't a valid token for the Graph API.
Internally it uses getCachedTokenInternal(scopes: Array<string>, user: User) to get a new access token for specific scopes code found here. I'm not sure if you can use this method as well to get a new token for that resource. I would just use the interceptor.
You could try to copy the access token and see how it looks like on jwt.ms (a Microsoft provided JWT token viewer) or jwt.io.
Any tokens valid for Graph should have the Audience of https://graph.microsoft.com, so if you inspect the token (in jwt.ms) it should at least have this value.
"aud": "https://graph.microsoft.com",

The issue is that you're using the id_token instead of the access token:
let tokenid= sessionStorage.getItem('msal.idtoken');
becomes something like:
let tokenid= sessionStorage.getItem('msal.token'); // or msal.accesstoken
Update(per Phillipe's comment)
You need to select the scopes that you want to target in your application. So, it looks like you want the user profile, so you'll want to add the consentScopes property to specify which scopes your app will use:
MsalModule.forRoot({
clientID: "Tenant ID",
authority: "https://login.microsoftonline.com/common/",
redirectUri: "http://localhost:4200/",
validateAuthority : true,
popUp: true,
consentScopes: ["user.read"]
}),

Make sure you add your endpoint to Resource Map configuration. See this link: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/MSALAngularDemoApp
export const protectedResourceMap:[string, string[]][]=[ ['https://graph.microsoft.com/v1.0/me', ['user.read']] ];

Microsoft Graph API - 403 Forbidden for v1.0/me/events

I'm building a page with numerous calls to Microsoft Graph to different end points: to get OneDrive files, emails, user properties, etc.
The one call that does not work is to get the current user's calendar events. The end point I'm using is https://graph.microsoft.com/v1.0/me/events. The response is 403 Forbidden.
According to the Microsoft documentation here the application needs Calendars.Read or Calendars.ReadWrite permissions. I checked both of these under delegated permissions and still the same problem. I then ticked all 51 permission scopes in Azure AD for this app, and still the same problem.
I also tried creating a new app in Azure AD, but this did not help.
How can I use Microsoft Graph to get back the current user's calendar events? What am I missing?
EDIT:
I'm using ADAL.js for authentication. This is the code I have in my own doAuth function that takes in the client ID of the application.
function doAuth(clientId) {
var variables = {
// Domain of Azure AD tenant
azureAD: // the appropriate URL,
// ClientId of Azure AD application principal
clientId: clientId,
// Name of SharePoint tenant
sharePointTenant: // the appropriate URL
}
// Create config and get AuthenticationContext
window.config = {
tenant: variables.azureAD,
clientId: variables.clientId,
postLogoutRedirectUri: window.location.origin,
endpoints: {
graphApiUri: "https://graph.microsoft.com",
sharePointUri: "https://" + variables.sharePointTenant + ".sharepoint.com",
},
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);
}
var user = authContext.getCachedUser();
var token = authContext.getCachedToken(clientId);
if (!user || !token)
authContext.login();
return authContext
}

It sounds like you've changed the scopes assigned to the application. When this happens you also need to have user's reauthorize using those new scopes. To do this, add &prompt=consent to the query string of your initial ODATA redirect. This will force your new scopes to be presented to the user for authorization.
You can trigger this in the ADAL.js library using the extraQueryParameter parameter in your configuration:
// Create config and get AuthenticationContext
window.config = {
tenant: variables.azureAD,
clientId: variables.clientId,
postLogoutRedirectUri: window.location.origin,
endpoints: {
graphApiUri: "https://graph.microsoft.com",
sharePointUri: "https://" + variables.sharePointTenant + ".sharepoint.com",
},
cacheLocation: "localStorage",
extraQueryParameter: "prompt=consent"
}

In the end I wasn't able to figure this out and ended up using the Exchange API instead of Graph for mail, calendar and tasks (tasks would have required Exchange API anyway, since this is only currently available in the beta Graph API).

Nativescript {N} oAuth plugin - Retrieve User Facebook Data

Context
I'm attempting to create an Android app with Nativecript using JavaScript. On the first page, it asks the user to connect with Facebook, and I intend to verify whether or not an account exists with their email address.
Tools
I'm using the nativescript-oauth package to handle the OAuth connection to Facebook. I'm working on a Windows 10 machine via command line.
Code
app.js
var tnsOAuthModule = require("nativescript-oauth");
var facebookInitOptions = TnsOAuthOptionsFacebook = {
clientId: 'REDACTED',
clientSecret: 'REDACTED',
scope: ['email']
};
tnsOAuthModule.initFacebook(facebookInitOptions);
application.start({ moduleName: "views/start/start" });
start.js
//...
var tnsOAuthModule = require("nativescript-oauth");
//...
exports.fbConnect = function(){
console.log("Facebook Connect button tapped");
tnsOAuthModule.login()
.then(()=>{
console.log('logged in');
var token = tnsOAuthModule.accessToken();
console.log("FB Auth token: " + token);
console.log(JSON.stringify(tnsOAuthModule));
})
.catch((er)=>{
console.log(er);
});
console.log("Login sucessful");
}
What goes wrong
The above outputs the following:
JS: Facebook Connect button tapped
...
JS: logged in
JS: FB Auth token: EAAC50oamJosBAF1F3lrGAOntENgSAZA40w4iE3rNOLP1W_REDACTED_Cb7yS9ZB1Ro4qhLroOMwZD
JS: {"instance":{"tokenResult":{"accessToken":"EAAC50oamJosBAF1F3lrGAOntENgSAZA40w4iE3rNOLP1W_REDACTED_Cb7yS9ZB1Ro4qhLroOMwZD","accessTokenExpiration":"2017-03-24T18:27:04.176Z","refreshTokenExpiration":"2017-03-24T18:27:04.176Z"},"credentials":{"authority":"https://www.facebook.com/dialog","tokenEndpointBase":"https://graph.facebook.com","authorizeEndpoint":"/oauth","tokenEndpoint":"/v2.3/oauth/access_token","clientId":"REDACTED","clientSecret":"REDACTED","redirectUri":"https://www.facebook.com/connect/login_success.html","scope":"email"}}}
JS: Application started successfully
As you can see, I successfully authorise the Facebook app and retrieve a working access key and can parse the object that is returned - however I'm trying to retrieve the users' email address. I can see that the "email" is within the scope.
Question
How can I use the nativescript-oauth plugin, or the data from the above object, to retrieve the users' email address, as defined the in scope?
Resources
Nativescript homepage - https://www.nativescript.org/
nativescript-oauth GitHub page - https://github.com/alexziskind1/nativescript-oauth
Nativescript official release of OAuth plugin - https://www.nativescript.org/blog/introducing-the-nativescript-oauth-plugin

You must change the scope to get more details(add "user_friends" to get their friend's list, add "public_profile" for profile info)
var facebookInitOptions = TnsOAuthOptionsFacebook = {
clientId: 'REDACTED',
clientSecret: 'REDACTED',
scope: ['email', 'user_friends', 'public_profile']
};
Lastly, in your "App review" section of your facebook developer page, ensure those scope fields are active and shown(they will have a green dot next to them with description of data). You might need to make the app live/start a submission to get approval first if the above code doesn't work.