Azure oAuth 从 Angular 获取请求中获取 HTML 正文而不是代码答案

【问题标题】：Azure oAuth getting HTML body instead of code from Angular get requestAzure oAuth 从 Angular 获取请求中获取 HTML 正文而不是代码
【发布时间】：2020-09-11 18:50:37
【问题描述】：

我只是像下面那样对授权端点执行简单的获取请求，但在正文中获得了 HTML 响应，但我希望重定向 URI 中的代码，以便我可以使用此代码来获取令牌。我在 Angular 应用程序中提出这个获取请求

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' });
  }

以下是响应示例身体： ” ↵ ↵

标签： angular azure oauth azure-active-directory

【解决方案1】：

首先要说，auth code grant flow 是一种交互式身份验证，它需要交互式登录（由用户）。所以如果你使用get请求到urlhttps://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/authorize，它会响应登录页面的html。

要实现验证码授权流程，您需要使用弹出窗口进行验证。我找到下面提供的代码示例供您参考：

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
`);

在新的浏览器窗口中，您需要登录进行身份验证。

然后我们需要监听它何时返回 URL 中的查询参数，其中包含 ?code= 并且将具有用于获取访问令牌的授权代码。您可以参考下面的代码示例：

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?   
        }
    });
});

之后，你可以在上面代码的body中获取访问令牌（在上面的console.log('Token Received!\n', body);中）

【讨论】：