Question

我有一个纯Javascript应用程序，它尝试使用带有PKCE的OAuth授权流从Azure获取访问令牌。

该应用未托管在Azure中。我只将Azure用作OAuth授权服务器。

    //Based on: https://developer.okta.com/blog/2019/05/01/is-the-oauth-implicit-flow-dead

    var config = {
        client_id: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx",
        redirect_uri: "http://localhost:8080/",
        authorization_endpoint: "https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/authorize",
        token_endpoint: "https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/token",
        requested_scopes: "openid api://{tenant-id}/user_impersonation"
    };

    // PKCE HELPER FUNCTIONS

    // Generate a secure random string using the browser crypto functions
    function generateRandomString() {
        var array = new Uint32Array(28);
        window.crypto.getRandomValues(array);
        return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
    }

    // Calculate the SHA256 hash of the input text. 
    // Returns a promise that resolves to an ArrayBuffer
    function sha256(plain) {
        const encoder = new TextEncoder();
        const data = encoder.encode(plain);
        return window.crypto.subtle.digest('SHA-256', data);
    }

    // Base64-urlencodes the input string
    function base64urlencode(str) {
        // Convert the ArrayBuffer to string using Uint8 array to convert to what btoa accepts.
        // btoa accepts chars only within ascii 0-255 and base64 encodes them.
        // Then convert the base64 encoded to base64url encoded
        //   (replace + with -, replace / with _, trim trailing =)
        return btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
    }

    // Return the base64-urlencoded sha256 hash for the PKCE challenge
    async function pkceChallengeFromVerifier(v) {
        const hashed = await sha256(v);
        return base64urlencode(hashed);
    }

    // Parse a query string into an object
    function parseQueryString(string) {
        if (string == "") { return {}; }
        var segments = string.split("&").map(s => s.split("="));
        var queryString = {};
        segments.forEach(s => queryString[s[0]] = s[1]);
        return queryString;
    }

    // Make a POST request and parse the response as JSON
    function sendPostRequest(url, params, success, error) {
        var request = new XMLHttpRequest();
        request.open('POST', url, true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.onload = function () {
            var body = {};
            try {
              body = JSON.parse(request.response);
            } catch (e) { }

            if (request.status == 200) {
              success(request, body);
            } else {
              error(request, body);
            }
        }

        request.onerror = function () {
            error(request, {});
        }
        var body = Object.keys(params).map(key => key + '=' + params[key]).join('&');
        request.send(body);
    }

    function component() {
        const element = document.createElement('div');
        const btn = document.createElement('button');
        element.innerHTML = 'Hello'+ 'webpack';
        element.classList.add('hello');
        return element;
    }


    (async function () {
        document.body.appendChild(component());

        const isAuthenticating = JSON.parse(window.localStorage.getItem('IsAuthenticating'));
        console.log('init -> isAuthenticating', isAuthenticating);
        if (!isAuthenticating) {
        window.localStorage.setItem('IsAuthenticating', JSON.stringify(true));

        // Create and store a random "state" value
        var state = generateRandomString();
        localStorage.setItem("pkce_state", state);

        // Create and store a new PKCE code_verifier (the plaintext random secret)
        var code_verifier = generateRandomString();
        localStorage.setItem("pkce_code_verifier", code_verifier);

        // Hash and base64-urlencode the secret to use as the challenge
        var code_challenge = await pkceChallengeFromVerifier(code_verifier);

        // Build the authorization URL
        var url = config.authorization_endpoint
      + "?response_type=code"
      + "&client_id=" + encodeURIComponent(config.client_id)
      + "&state=" + encodeURIComponent(state)
      + "&scope=" + encodeURIComponent(config.requested_scopes)
      + "&redirect_uri=" + encodeURIComponent(config.redirect_uri)
      + "&code_challenge=" + encodeURIComponent(code_challenge)
      + "&code_challenge_method=S256"
      ;

        // Redirect to the authorization server
        window.location = url;
    } else {

        // Handle the redirect back from the authorization server and
        // get an access token from the token endpoint

        var q = parseQueryString(window.location.search.substring(1));

        console.log('queryString', q);

        // Check if the server returned an error string
        if (q.error) {
          alert("Error returned from authorization server: " + q.error);
          document.getElementById("error_details").innerText = q.error + "\n\n" + q.error_description;
          document.getElementById("error").classList = "";
        }

        // If the server returned an authorization code, attempt to exchange it for an access token
        if (q.code) {

          // Verify state matches what we set at the beginning
          if (localStorage.getItem("pkce_state") != q.state) {
            alert("Invalid state");
          } else {

            // Exchange the authorization code for an access token
            // !!!!!!! This POST fails because of CORS policy.
            sendPostRequest(config.token_endpoint, {
              grant_type: "authorization_code",
              code: q.code,
              client_id: config.client_id,
              redirect_uri: config.redirect_uri,
              code_verifier: localStorage.getItem("pkce_code_verifier")
            }, function (request, body) {

              // Initialize your application now that you have an access token.
              // Here we just display it in the browser.
              document.getElementById("access_token").innerText = body.access_token;
              document.getElementById("start").classList = "hidden";
              document.getElementById("token").classList = "";

              // Replace the history entry to remove the auth code from the browser address bar
              window.history.replaceState({}, null, "/");

            }, function (request, error) {
              // This could be an error response from the OAuth server, or an error because the 
              // request failed such as if the OAuth server doesn't allow CORS requests
              document.getElementById("error_details").innerText = error.error + "\n\n" + error.error_description;
              document.getElementById("error").classList = "";
            });
          }

          // Clean these up since we don't need them anymore
          localStorage.removeItem("pkce_state");
          localStorage.removeItem("pkce_code_verifier");
        }
    }

    }());

在Azure中，我只有一个应用程序注册（没有应用程序服务）。

Azure App Registration

获取授权码的第一步有效。

但是获取访问令牌的POST失败。（图片来自here）

OAuth Authorization Code Flow with PKCE

在以下位置访问XMLHttpRequest 来自的“ https://login.microsoftonline.com/ {tenant-id} /oauth2/v2.0/token” 原产地“ http://localhost:8080”已被CORS政策禁止：否请求中出现“ Access-Control-Allow-Origin”标头资源。

我在Azure的哪里为应用程序注册配置CORS策略？

Answer 1

好吧，在几天之后，我对Azure实施的愚蠢性大加指责之后，我在这里偶然发现了一些隐藏的信息：https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser#prerequisites

如果您将清单中的redirectUri的类型从“ Web”更改为“ Spa”，它将给我一个访问令牌！我们在做生意！它破坏了Azure中的UI，但事实如此。

Answer 2

您应使用本地主机地址定义内部网址。

https://docs.microsoft.com/en-us/azure/active-directory/manage-apps/application-proxy-understand-cors-issues

Answer 3

我最后听到的Azure AD令牌终结点不允许从浏览器到令牌终结点的CORS请求，因此您可能需要使用隐式流（response_type = token id_token）。

遗憾的是它仍然是真的-因为您尝试使用的流程绝对是正确的（response_type = code）。

我建议使用一个库，当Microsoft最终解决此问题时，您可以轻松切换该库。我的以下示例提供了两种流程的示例：

上面的Azure代码示例存储库的README文件链接到一篇文章，其中提到了其他一些Azure CORS问题以及解决方法。

与PKCE一起用于OAuth授权流程时，如何在Azure应用注册中启用CORS？

3 个答案: