Issue encountered while trying to obtain user authorization_code from Microsoft Graph

Question

Issue encountered while trying to obtain user authorization_code from Microsoft Graph

I am encountering an issue with obtaining the Authorization code for the user.

After the user logs in, I extract the user code from the URL and then use Ajax to fetch the access_token. However, during this process, I encounter the following error :

AADSTS90023: Cross-origin token redemption is allowed only for the 'Single-Page Application'

Below is my code snippet :

const url = window.location.href;
    const code = url.slice((url.indexOf("=")+1), url.indexOf("&"));
    console.log(code)
    let form = new FormData();
    form.append("client_id", "48701536-c150-48f2-917b-730d855f316b");
    form.append("client_secret", "RzZ7Q~-GEYd6WayuMKmVXvH2w.Q7GjuaoHNEy");
    form.append("scope", "https://graph.microsoft.com/user.read");
    form.append("redirect_uri", "http://localhost:3000/Page1.html");
    form.append("grant_type", "authorization_code");
    form.append("code", `${code}`);
    
    $.ajax({
        url: "https://login.microsoftonline.com/consumers/oauth2/v2.0/token",
        method: 'POST',
        "timeout": 0,
        crossDomain: true,
        async: false,
        processData: false,
        mimeType: "multipart/form-data",
        contentType: false,
        data: form,
        success(response) {
            console.log(response)
        }, error(response){
            console.log(response)
        }
    })

javascript ajax microsoft-graph-api

Answer 1

Answer №1

Check out the msal.js package on this link

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/msal.js"></script>
    </head>
    <body>
        <div style="font-size: 12px;">
            This example utilizes implicit grant flow to obtain an access token
        </div>
            <div style="margin-top: 15px; background-color: #DDDDDD;">
                <button type="button" id="signIn" onclick="signIn()">Sign In</button>
                <button type="button" id="getAccessToken" onclick="getAzureAccessToken()">getAccessToken</button>
                <button type="button" id="accessApi" onclick="accessApi()">getApiResponse</button>
                <h5 class="card-title" id="welcomeMessage">Please sign-in to see your profile and read your mails</h5>
            </div>
            <script type="text/javascript">
                const msalConfig = {
                    auth: {
                        clientId: "<applicationId>",
                        authority: "https://login.microsoftonline.com/<tenantId>",
                        redirectUri: "http://localhost:8848/Demo0819/new_file.html",
                    },
                    cache: {
                        cacheLocation: "sessionStorage", // This configures where your cache will be stored
                        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
                    }
                };
        
                const loginRequest = {
                    scopes: ["openid", "profile", "User.Read"]
                };
                
                
                const myMSALObj = new Msal.UserAgentApplication(msalConfig);
        
                function signIn() {
                    myMSALObj.loginPopup(loginRequest)
                        .then(loginResponse => {
                            console.log("id_token acquired at: " + new Date().toString());
                            console.log(loginResponse);
        
                            if (myMSALObj.getAccount()) {
                                showWelcomeMessage(myMSALObj.getAccount());
                            }
                        }).catch(error => {
                            console.log(error);
                        });
                }
        
                function showWelcomeMessage(account) {
                    document.getElementById("welcomeMessage").innerHTML = `Welcome ${account.name}`;
                }
            </script>
    </body>
</html>

Answer 2

Check out the msal.js package on this link

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/msal.js"></script>
    </head>
    <body>
        <div style="font-size: 12px;">
            This example utilizes implicit grant flow to obtain an access token
        </div>
            <div style="margin-top: 15px; background-color: #DDDDDD;">
                <button type="button" id="signIn" onclick="signIn()">Sign In</button>
                <button type="button" id="getAccessToken" onclick="getAzureAccessToken()">getAccessToken</button>
                <button type="button" id="accessApi" onclick="accessApi()">getApiResponse</button>
                <h5 class="card-title" id="welcomeMessage">Please sign-in to see your profile and read your mails</h5>
            </div>
            <script type="text/javascript">
                const msalConfig = {
                    auth: {
                        clientId: "<applicationId>",
                        authority: "https://login.microsoftonline.com/<tenantId>",
                        redirectUri: "http://localhost:8848/Demo0819/new_file.html",
                    },
                    cache: {
                        cacheLocation: "sessionStorage", // This configures where your cache will be stored
                        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
                    }
                };
        
                const loginRequest = {
                    scopes: ["openid", "profile", "User.Read"]
                };
                
                
                const myMSALObj = new Msal.UserAgentApplication(msalConfig);
        
                function signIn() {
                    myMSALObj.loginPopup(loginRequest)
                        .then(loginResponse => {
                            console.log("id_token acquired at: " + new Date().toString());
                            console.log(loginResponse);
        
                            if (myMSALObj.getAccount()) {
                                showWelcomeMessage(myMSALObj.getAccount());
                            }
                        }).catch(error => {
                            console.log(error);
                        });
                }
        
                function showWelcomeMessage(account) {
                    document.getElementById("welcomeMessage").innerHTML = `Welcome ${account.name}`;
                }
            </script>
    </body>
</html>

Issue encountered while trying to obtain user authorization_code from Microsoft Graph

Answer №1

Similar questions

Utilizing nested v-for in Vue.js with lodash's groupBy function

Can file input buttons be custom styled?

Having trouble with the Angular router link suddenly "failing"?

With Crypto-JS, a fresh hash is always generated

react-ga4 is sending multiple view events repeatedly

Having issues with the submit button functionality on Laravel Crud when employing Ajax and jQuery

Avoiding ChartJS tooltips from being cut off

Improper headings can prevent Chrome from continuously playing HTML5 audio

Tips for reducing the size of your JavaScript buffer

I encountered an issue with npm run build when attempting to launch a react application on Firebase, resulting in an error

Unable to align span vertically using font-style "Luckiest Guy" in CSS

Change classes of sibling elements using Angular 2

Alter data in MongoDB based on specific circumstances

javascript: obtain the height of the pseudo :before element

How can I save variable values to a text file or Excel file using Cypress.io?

Warning: data and salt parameters are necessary, please provide them

Why was the 'Symbol' type introduced in ECMA-262-v6 and what purpose does it serve?

How can I modify this section of the code in Google Script to retrieve all columns?

How can we enhance our proxyURL in Kendo UI with request parameters?

How can I capture the 'ended' event from an HTML5 video tag using Ember in a controller?