Utilizing AngularJS and ADAL.JS to Define Resource ID (Audience)

Is there a way to utilize adal.js within AngularJS to obtain a bearer token for the audience https://management.azure.com through JavaScript?

I have created a client application in Azure AD and configured its permissions to allow access to the "Windows Azure Service Management API". Below is the code snippet from my AngularJS application:

adalService.init(
            {
                instance: "https://login.windows.net/",
                tenant: "<something>.onmicrosoft.com",
                clientId: "<some id>",
                cacheLocation: 'localStorage',
                redirectUri: 'http://localhost:63691/index.html#/configure',
                endpoints: {
                    /* 'target endpoint to be called': 'target endpoint's resource ID' */
                    'https://management.azure.com/subscriptions?api-version=2014-04-01': 'https://management.azure.com/'
                }
            },
            $httpProvider
        );

When using the token received from this adalService in POSTMAN to access 

https://management.azure.com/subscriptions?api-version=2014-04-01
, I encounter the following error message:

The access token has been obtained from the wrong audience or resource '<some id>'. 
It must precisely match (including forward slash) with one of the allowed audiences 'https://management.core.windows.net/', 'https://management.azure.com/'.
javascriptangularjsazureazure-active-directoryadal.js

Answer №1

After diving into the ADAL.JS source code, I finally uncovered the solution. It all comes down to line 137, where it checks for the presence of config.loginResource before passing the config object to the init() function.

For those who are struggling with this issue:

If you require your token to include a claim for “” (or any other resource URI), you can specify the audience during AuthenticationContext initialization like this:

app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalService) {
    adalService.init(
                {
                    instance: "https://login.microsoftonline.com/",
                    tenant: "<something>.onmicrosoft.com",
                    clientId: "<client-id>",
                    cacheLocation: 'localStorage', //optional
                    redirectUri: '<redirect-uri>',
                    loginResource: 'https://management.azure.com/' //to set AUDIENCE
                },
                $httpProvider
            );
}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating a dynamic table by looping through its generated tr elements

I am currently working with a dynamically created tr table that includes individual rows of data and a fixed total sum at the bottom. The total sum does not change dynamically. var tmp = '<tr id="mytable"> <td id="warenid">'+data1.id ...

javascriptjqueryhtml

What are the steps to utilizing an npm package that simply encapsulates my JavaScript code?

Our current npm package is designed for clients working on ES6-based projects, such as React. The main index file of the package looks like this: export function ourFunction() { } Clients import this function using the following syntax: import { ourFunc ...

javascriptreactjsnpmcommonjs

The request to http://localhost:5000/error resulted in a 404 (Not Found) error message. I encountered difficulties connecting

When attempting to retrieve information about a product from Amazon using their productId with Express.js and ScraperAPI, an error is encountered: Error message: "{name: "RequestError", message: "Error: Invalid URI "${baseUrl}&url=https://www.amazon.com/d ...

javascriptnode.jsapiexpressweb-scraping

Sending the object context back to the controller callback from an AngularJS Directive

I am currently working on creating a modified version of ng-change with a delay feature for auto-saving changes. Here is the custom directive I have implemented: myApp.directive('changeDelay', ['$timeout', function ($timeout) { re ...

javascriptangularjsangularjs-directiveangularjs-ng-change

Demonstrating various date and time formats in AngularJS for user localization

When it comes to displaying date and time in different formats from an ISO string, I am utilizing the date filter in the following way: ng-bind="mydate | date: 'mediumDate'" However, if a user has the ability to input a date, I want to show the ...

angularjsangular-filters

Tips for incorporating a Font Awesome icon <i> within a select dropdown and customizing its appearance

I am facing an issue while trying to insert an icon into a select option. The error message I received is: Warning: validateDOMNesting(...): cannot appear as a child of <option> To indicate that certain fields are required, I am using asterisk ic ...

javascripthtmlcssreactjsfont-awesome

How can you retrieve attributes from a specific element within a dropdown menu?

I came across this intriguing HTML code snippet: <select id="selectSomething"> <option id="4" data-name="tomato" data-email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbba0a2aebba08fbbe1aca0a2">[email ...

javascriptjqueryhtmlselect

How to Retrieve Parent Controller Data in Child Controllers with AngularJS

I am facing an issue and would like to hear your suggestions on this matter. The problem I have encountered is that I have a child controller inside a parent controller div. For example, <div ng-controller="parent"> <div ng-controller="child" ...

angularjsangularjs-controller

random mongoose response 500

I came across a nodeJS code recently that was supposed to retrieve random documents from my mongoose collection using the mongoose-random plugin. However, whenever I call the findRandom() method, it returns a 500 error. test.js Below is the code snippet: ...

javascriptnode.jsmongodbexpress

Check access tokens from various front-end applications (Client ID) with the help of okta-jwt-verifier

Is there a way to verify access tokens generated from multiple front end Angular apps using the same backend API by sending in an array of clientIds? const OktaJwtVerifier = require("@okta/jwt-verifier"); const oktaJwtVerifier = new OktaJwtVerifi ...

node.jsangularjsexpressjwtokta

Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

I'm currently facing an issue with an input range slider that controls the position of an audio track. It seems to work perfectly in Firefox, but in Chrome, the slider gets stuck and doesn't move when dragged. There is a function in place that up ...

javascriptjqueryhtmlaudio

Beginning the default execution right away

Currently employing jQuery. This is my code snippet: $("#input").keypress(function(event) { getConversion(); }); Is there a way to ensure that the key pressed is first added to #input before triggering the getConversion() function? ...

javascriptjquery

Mapping fields in Spring to JSON can be tricky, especially when dealing with fields that can be

In my object, there is a String value field which can contain either true or false. The issue arises when Spring/Jackson maps this to value: "true" as a String, causing problems with certain angularjs ng-model mappings that expect a boolean. Is there a way ...

javascriptjavaangularjsjsonspring

Guide to transferring req.params to a callback function within node.js

I am currently working on a Node.js project using Express. I have been attempting to retrieve data using the NPM request package, utilizing a specific URL and passing an anonymous callback function to handle the resulting JSON file. The code below has bee ...

javascriptnode.jsexpress

Errors persist with Angular 2 iFrame despite attempts at sanitization

Attempting to add an iFrame within my Angular 2 application has been challenging due to the error message that keeps popping up. unsafe value used in a resource URL context The goal is to create a dynamic URL to be passed as a parameter into the iFrame ...

javascriptangulariframe

Need to send emails to two separate users? Look no further than Resend.com for a quick and

I am currently utilizing resend.com to send an email containing different variables to two distinct users. import type { NextApiRequest, NextApiResponse } from "next"; import { EmailTemplate } from "../../components/emails/EmailTemplate" ...

javascriptreactjsemailnext.jsresend.com

"Discover the Step-by-Step Guide to Launching Fresh Content or Code in the Current Tab and

I have a webpage with multiple tabs, each representing different content. Now, I want to create a functionality where if a user clicks on the "Home" tab, they are prompted to enter a password (e.g., 1234). Upon entering the correct password, the user shoul ...

javascripthtml

Combining Vue.js for handling both enter key and blur events simultaneously

I have been working on a solution where pressing the enter key or losing focus on an element will hide it and display a message. However, I am facing an issue where when I press the enter key to hide the element, it also triggers the blur event. I only wan ...

javascriptvue.js

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

javascriptcss

Error: Namespace declaration does not have a type annotation - TypeScript/Babel

After creating my app using the command npx create-react-app --typescript, I encountered an issue with generated code and namespaces causing Babel to throw an error. Here are the steps I took to try and resolve the issue: I ejected the project Updated b ...

javascriptreactjstypescriptbabeljscreate-react-app