Azure oAuth getting HTML body instead of code from Angular get request

Question

I'm just doing the simple get request for authorize end point like below, but getting a HTML response in body, but I expect the code in redirect URI so that I can use this code to get the token. I'm making this get request in Angular app

getAuth() {
return this.http.get('https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/authorize?response_type=code&client_id=0b59aafg-786c-425a-b2b4-l3f1e9e0d09g
&scope=openid+profile+email
&response_mode=query
&redirect_uri=https://qwe1124/logentry/log-entry/#/', { responseType: 'text', observe: 'response' });
  }

Below is the response sample body: " ↵ ↵<!-- Copyright (C) Microsoft Corporation. All " headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} ok: true status: 200 statusText: "OK" type: 4

Please help me on this ..

Hi, please refer to the solution provided below. If it helps your problem, please accept it as answer(click on the check mark beside my answer to toggle it from greyed out to filled in). Thanks in advance~ — Hury Shen

Hury Shen Hury Shen · Accepted Answer · 2020-09-14T02:54:02

First to say, auth code grant flow is an interactive authentication, it is interactive login(by user) required. So if you use get request to the url https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/authorize, it will response the html of the login page.

To implement auth code grant flow, you need to use a pop-up window for authenticating. I find a code sample provided below for your reference:

this.authWindow = new BrowserWindow(
    {
        alwaysOnTop : true, // keeps this window on top of others
        webPreferences : {
            nodeIntegration  : false, // again, don't need to specify these if Electron v4+ but showing for demo
            contextIsolation : true // we can isolate this window
        }
    }
);

this.authWindow.on('closed', () => {
    this.authWindow = null;
});

authWindow.loadURL(`
    https://login.microsoftonline.com/${config.auth.tenantId}/oauth2/v2.0/authorize?
        client_id=xxxxxxx
        &response_type=code
        &redirect_uri=xxxxxxx
        &response_mode=query
        &scope=xxxxxxx
`);

In the new browser window, you need to login for authenticating.

Then we need to listen for when it has returned with query parameters in the URL, which contain ?code= and will have the granted code for obtaining access token. You can refer to the code sample below:

authWindow.webContents.on('did-finish-load', () => {
    session.defaultSession.webRequest.onCompleted({ urls: [`{redirect_uri}/?code=` + '*'] }, details => {
        const _url        = details.url.split('?')[1]; // get the equivalent of window.location.search for the URLSearchParams to work properly
        const _params     = new URLSearchParams(_url);
        const _accessCode = _params.get('code');

        if (_accessCode) {
            const tokenRequestUrl = `https://login.microsoftonline.com/${config.auth.tenantId}/oauth2/v2.0/token`;

            const tokenRequestBody = {
                grant_type    : 'authorization_code',
                client_id     : xxxxxxx,
                code          : _accessCode,
                redirect_uri  : xxxxxxx,
                scope         : xxxxxxx,
                client_secret : xxxxxxx     //Only required for web apps
            };

            request.post(
                { url: tokenRequestUrl, form: tokenRequestBody },
                (err, httpResponse, body) => {
                    if (!err) {
                        console.log('Token Received!\n', body);
                    } else {
                        // Probably throw an error? 
                    }
                }
            );
        } else {
          // Probably throw an error?   
        }
    });
});

After that, you can get the access token in the body of above code(in console.log('Token Received!\n', body); above)

Azure oAuth getting HTML body instead of code from Angular get request

1 Answers