Microsoft Graph: Problem getting user authorization

I'm having a problem to get the Authorization code of the user.

After the login, I get the user code in URL and after that I go get the access_token with Ajax, But when I do that, I am getting an error :

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

Here my code :

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/Pagina1.html");
    form.append("grant_type", "authorization_code");
    form.append("code", `${code}`);
    // Tried with, but no effect ->  https://cors-anywhere.herokuapp.com/
    $.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)
        }
    })

CodePudding user response：

msal.js: https://www.npmjs.com/package/msal

<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 sample used implicit grant flow to get 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  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>