OAuth2 访问源错误

Question

我从 OAuth2 服务器请求 authorization code。我的目的是授权用户使用我的微软应用程序。引用 Document

我的 get Call 尝试：

function httpGet(){
        var theUrl = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id="client_id"&response_type=code&redirect_uri="redirect_uri"&response_mode=query&resource=https%3A%2F%2Fservice.contoso.com%2F&state=12345";

        var req = new XMLHttpRequest();
        req.open('GET', theUrl, true);
        req.onreadystatechange = function() {
            if (req.readyState === 4) {
                if (req.status >= 200 && req.status < 400) {
                    console.log(req.responseText)
                } else {
                    console.log("error")
                }
            }
        };
        req.send();
    }

但这给出了以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

然后我添加 req.setRequestHeader("Access-Control-Allow-Origin", "*");

但出现以下错误：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

要在 javascript 中集成 AAD，我们建议您使用 azure-activedirectory-library-for-js，它是 javascript 中的一个前端库，可以轻松集成 AAD。

在使用 ADAL for JS 之前，我们需要注意两个选项：

根据 https://github.com/OfficeDev/O365-jQuery-CORS#step-6--run-the-sample 的节点：

Note This sample will not work in Internet Explorer. Please use a different browser, such as Google Chrome. ADAL.js uses an iframe to get CORS API tokens for resources other than the SPA's own backend. These iframe requests require access to the browser's cookies to authenticate with Azure Active Directory. Unfortunately, cookies are not accessible to Internet Explorer when the app is running in localhost.
启用 Azure AD 应用程序的 oauth2AllowImplicitFlow。详细步骤参考https://crmdynamicsblog.wordpress.com/2016/03/17/response-type-token-is-not-enabled-for-the-application-2/。

这是从 Microsoft Graph 获取访问令牌的代码示例：

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/js/adal.min.js"></script>

<body>
<a href="#" onclick="login();">login</a>
<a href="#" onclick="getToken()">access token</a>
</body>
<script type="text/javascript">
    var configOptions = {
        tenant: "<tenant_id>", // Optional by default, it sends common
        clientId: "<client_id>",
        postLogoutRedirectUri: window.location.origin,
    }
    window.authContext = new AuthenticationContext(configOptions);

    var isCallback = authContext.isCallback(window.location.hash);
    authContext.handleWindowCallback();

    function getToken(){
        authContext.acquireToken("https://graph.microsoft.com",function(error, token){
            console.log(error);
            console.log(token);
        })
    }
    function login(){
        authContext.login();
    }
</script>

Answer 2

在不使用任何 frontend google 库的情况下，我提出了解决方案。

window.open("url")

完成身份验证后，我从 url params 获得 code 并将其发送 backend 并实现 access token, refersh token.......etc,

OAuth2 访问源错误

OAuth2 Access origin error

javascript

azure

cors

oauth2