Unauthorized error encountered when making an Ajax GET request to Azure Ad Graph API

I've been attempting to make calls to the Azure Ad Graph API from my typescript code, but I keep encountering the "Unauthorized" error.

lavaNET.SharePointREST.getJsonWithoutSite(this, "https://graph.windows.net/lavanet.dk/users?api-version=1.6", (tmplData: any, tmplTextStatus: string, tmplXHR: JQueryXHR) => {
    console.log(tmplData)
});

export function getJsonWithoutSite(context: any, url: string, success: SuccessCallback, failure?: ErrorCallback) {

    $.ajax({
        method: 'GET',
        context: context,
        headers: {
            'Authorization': 'Bearer zc21eb27-760b-4b46-828e-xxxxxxxxxxxxx',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        url: url,
        dataType: 'json',
        accepts: { json: 'application/json; odata=verbose' },
        success: success,
        error: failure || function (jqXHR, textStatus, errorThrown) { alert('Error: ' + errorThrown); }
    });
}

Could someone please help me understand why I am unable to retrieve data from the Ad?

Update Do you think I am on the right track with this: https://i.sstatic.net/f3D0w.png

Update Responding to Gary Liu - MSFT, these are the keys I am getting from his code: https://i.sstatic.net/mtw4G.png

Is my Ajax setup correct and which key should I be using?

ajaxazuretypescriptazure-ad-graph-api

Answer №1

An access token has been generated and set in the Authorization header.

To enable our application to acquire an access token from Azure AD, we must manually follow the OAuth 2.0 authorization flow.

Alternatively, you can utilize the ADAL SDK to easily implement this functionality in your app. However, there is currently no ADAL for TypeScript available. You may consider using ADAL for JavaScript to obtain the access token, store it in session storage or local storage in client browsers, and utilize the token in your TypeScript scripts.

For guidance on how to utilize ADAL for JavaScript in plain JavaScript, refer to this sample.

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

Nginx deployment of React causes issues with AJAX Axios functionality

I am interested in integrating frontend with backend on cloud virtual machines such as DigitalOcean, AWS, or Microsoft Azure. Frontend: React Backend: Spring Spring MVC Mybatis + Tomcat (Excluding Spring Boot) After researching various methods using N ...

ajaxreactjsspringspring-mvcnginx

Issues with updating Django template with Ajax call

Here are the details. I have managed to successfully update the "questions_in_topic" variable in views when the select option is changed, triggering an AJAX call. The AJAX call updates the "questions_in_topic" variable based on the selected value in the dr ...

ajaxdjangodjango-templatesdjango-views

What causes @typescript-eslint to retain old types/files in its cache and prevent successful compilation?

When I kick off my Typescript application using tsc -b -w, I always encounter an issue with @typescript-eslint not reacting to file changes accurately. It flags invalid types/syntax errors where there are none. Restarting the process sometimes doesn't ...

typescripteslinttypescript-eslint

Retrieving previous data following an AJAX request using the GET method in Laravel 5.5

I have encountered an issue while using two ajax calls on a single page. On one side, I am making an ajax post request to store data and submit color in a database called "color_store." On the other side, I am trying to retrieve all the colors from that ta ...

javascriptphpjqueryjsonajax

Demonstration of Concurrent Page Processing in Flask

Currently, I am working on an application that heavily utilizes graphics using libraries such as Raphael and graphdracula. The main functionality of the application involves drawing various graphs across different pages named graph1, graph2, and graph3. L ...

javascriptjqueryajaxflask

Different categories of "areas" found in TypeScript within Visual Studio 2013

In C#, we often use "regions," but unfortunately that feature is missing in TypeScript. Is there a way to group code sections in TypeScript? I came across this article on Stack Overflow discussing the absence of regions in TypeScript. I'm curious if ...

visual-studiotypescriptvisual-studio-2013

Granting remote access in a cffunction involves incorporating the application.cfm page

Whenever I designate a cffunction's access as remote for AJAX calling, the response contains the HTML from my Application.cfm template. Is there a workaround for this issue, or do I need to relocate the HTML code from Application.cfm? ...

ajaxcoldfusioncffunctionapplication.cfm

The Vue and Typescript webpage is not appearing in the GAS sidemenu template

I am tasked with developing an application for Google Sides using Vue + Typescript to enhance its functionality with an extra menu feature. You can find a sample without Typescript here. The result is visible in this screenshot: https://gyazo.com/ed417ddd1 ...

typescriptvue.jsgoogle-apps-scriptwebpackgoogle-slides

Updating the unordered list (UL) of rows in MySQL dynamically

Currently working on a test site that aims to function as a video playlist player pulling videos from the VIMEO API based on URL numbers (like vimeo.com/7100569) The setup involves storing a list of these URLs in a MySQL table. At this stage, I have manag ...

jquerymysqlajaxdynamicvimeo

Using JavaScript to show content in a textarea field

In my index.jsp file, I have implemented the following code to populate two textareas, INPUT_TEXT and INPUT_TEXT2, with processed data. This involves passing the text through a servlet, a Java class, and finally displaying the preprocessed results in the s ...

javascripthtmlajaxforms

Is there a way to combine multiple array objects by comparing just one distinct element?

Is there a way to combine these two arrays into one? array1 = [ { image: 'image1', title: 'title1' }, { image: 'image2', title: 'title2' }, { image: 'image3', title: 'title3' }, ]; array2 = ...

javascripttypescript

Retrieve the property of a Typescript object using a template argument

I am looking to develop a Typescript Collection class that can locate items by field. Here is an example of what I have in mind: class Collection<T, K keyof T> { private _items: T[]; public isItemInCollection(item: T) { return _item ...

typescripttemplates

Issue with SignalR client functionality following update to .NET Core 3.1版本

Upon updating our server-side code to asp.net core 3.1, we encountered an issue with the javascript client for signalr (@microsoft/signalr 3.1.0). The errors we are facing are: https://i.sstatic.net/ITZyK.png Here is the code snippet for the hub initial ...

typescriptwebsocketsignalrasp.net-core-signalrsignalr-client

What could be causing my jQuery promise to resolve instantaneously?

When utilizing jQuery promises, my goal is to accomplish the following: Retrieve all potential values for an animal from an API Invoke an API method for each animal to obtain their respective sounds Receive notification when each animal sound has been re ...

jqueryajaxpromise

Setting up your YAML configuration to utilize both PHP and Python with AJAX in a unified project on App Engine

Here is my project idea https://i.stack.imgur.com/oGOam.jpg $.ajax({ url: '../server/python/python_file.py', dataType: 'json', type: 'POST', success:function(data) { //Perform additional AJAX requests using PHP f ...

phppythonajaxgoogle-app-engine

What could be causing the type errors I am encountering while trying to resolve this Promise within a generic function?

I am attempting to implement additional types within this WebSocket protocol: type Action = { action: "change-or-create-state"; response: string; } | { action: "get-state"; response: string | null; }; /** * map an action to its response ...

typescript

What is the process for creating accurate types for my package?

Currently, I am in the process of creating an npm package to be used by other developers within my company. While most aspects are functioning smoothly, I am facing challenges with getting the declarations right. I have experimented with various methods f ...

typescriptrollupjsnpm-package.d.ts

Make sure to verify the optional parameter before using it in your code

Is it possible for TypeScript compiler to detect errors in code such as this, with certain tsconfig rules in place? function buildName(firstName: string, lastName?: string) { return firstName + " " + lastName; } I believe that if there is no c ...

typescriptoptional-parameterstsc

update icon when a router link becomes active

<div class="menuItem mb-3" *ngFor="let menuItem of menuItems"> <a routerLink="{{menuItem.link}}" routerLinkActive="active"> <img src="{{menuItem.icon}}" alt="{{menuItem.name}}" /> <p class="text-center f-12">{{me ...

angulartypescriptrouterlinkangular-routerlinkrouterlinkactive

Pass data from PHP to JS after triggering AJAX communication

*Updated with full code example, after receiving feedback I decided to share a sample of the code that is giving me trouble. Essentially, I am trying to achieve the functionality where clicking on a link in the HTML will submit a form to called.php and dis ...

phpjsonajax