OAuth2 访问来源错误答案

【问题标题】：OAuth2 Access origin errorOAuth2 访问来源错误
【发布时间】：2017-03-25 09:55:02
【问题描述】：

我从OAuth2 服务器请求authorization code。我的目的是使用我的 microsoft App 授权用户。参考Document

我尝试获取呼叫：

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

但这会产生以下错误：

请求中没有“Access-Control-Allow-Origin”标头资源。

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

但它给出了以下错误：

对预检请求的响应未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。

【问题讨论】：

你需要在服务器上配置这个，而不是 Angular 应用
@jonrsharpe “您需要在服务器上进行配置”是什么意思？
我的意思是您向其发出请求的服务器。尽管这似乎超出了您的控制范围。
我正在尝试请求 OAuth2 服务器。
是的，我明白这一点。但是服务器需要知道它应该响应哪些来源。也许您需要添加一些配置；参见例如stackoverflow.com/questions/28283037/…

标签： javascript azure cors oauth2

【解决方案1】：

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

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

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

注意此示例无法在 Internet Explorer 中运行。请使用其他浏览器，例如 Google Chrome。 ADAL.js 使用 iframe 为 SPA 自己的后端以外的资源获取 CORS API 令牌。这些 iframe 请求需要访问浏览器的 cookie 才能通过 Azure Active Directory 进行身份验证。不幸的是，当应用程序在 localhost 中运行时，Internet Explorer 无法访问 cookie。
启用 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>

【讨论】：

【解决方案2】：

没有使用任何frontend google 库，我想出了解决方案。

window.open("url")

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

【讨论】：