Meteor Single Signon oAuth Popup为空！(跨域帧错误)

Question

我不知道为什么会发生这种事。我们最终启动了我们的应用程序，一切都在临时服务器上运行，然后我部署到一个相同的设置-现在这正在发生-我不知道为什么。

你可以亲眼看到它的发生:转到http://www.crunchyserial.com/

​

以下是控制台中的错误：

Uncaught DOMException: Blocked a frame with origin "http://www.crunchyserial.com" from accessing a cross-origin frame.
    at http://www.crunchyserial.com/packages/oauth/end_of_popup_response.js:18:39
    at http://www.crunchyserial.com/packages/oauth/end_of_popup_response.js:37:3

如果刷新空白的oauth窗口，它会关闭，然后会出现以下错误：

​

在服务器日志中，您会看到以下内容：

[00.00.00.00]{"line":"431","file":"oauth.js","message":"Error in OAuth Server: Failed to complete OAuth handshake with Google. failed [400] {   \"error\" : \"invalid_grant\",   \"error_description\" : \"Code was already redeemed.\" }","time":{"$date":1497382695634},"level":"warn"}
[00.00.00.00]Exception while invoking method 'login' Error: Failed to complete OAuth handshake with Google. failed [400] {   "error" : "invalid_grant",   "error_description" : "Code was already redeemed." }
[00.00.00.00]    at getTokens (packages/google-oauth/google_server.js:107:7)
    at Object.getServiceData [as handleOauthRequest] (packages/google-oauth/google_server.js:81:35)
    at OAuth._requestHandlers.(anonymous function) (packages/oauth2.js:27:31)
    at middleware (packages/oauth.js:203:5)
    at packages/oauth.js:176:5
{"line":"431","file":"oauth.js","message":"Error in OAuth Server: Failed to complete OAuth handshake with Google. failed [400] {   \"error\" : \"invalid_grant\",   \"error_description\" : \"Code was already redeemed.\" }","time":{"$date":1497382701056},"level":"warn"}
Exception while invoking method 'login' Error: Failed to complete OAuth handshake with Google. failed [400] {   "error" : "invalid_grant",   "error_description" : "Code was already redeemed." }
    at getTokens (packages/google-oauth/google_server.js:107:7)
    at Object.getServiceData [as handleOauthRequest] (packages/google-oauth/google_server.js:81:35)
    at OAuth._requestHandlers.(anonymous function) (packages/oauth2.js:27:31)
    at middleware (packages/oauth.js:203:5)
[00.00.00.00]    at packages/oauth.js:176:5

下面是我在生产服务器的./deploy目录中使用的settings.json：

{
  "public": {
    "analyticsSettings": {
      "Google Analytics" : {"trackingId": "//redacted//"}
    }
  },
  "private": {
    "oAuth": {
      "google": {
        "clientId": "//redacted//",
        "secret": "//redacted//",
        "loginStyle": "popup"
      },
      "facebook": {
        "appId": "//redacted//",
        "secret": "//redacted//",
        "loginStyle": "popup"
      },
      "twitter": {
        "consumerKey": "//redacted//",
        "secret": "//redacted//"
        "loginStyle": "popup"
      }
    }
  }
}

奇怪的是，“重定向”和“弹出”loginStyles没有区别……我没有注意到应用程序中的任何行为差异。

这是我的mup.js

module.exports = {
  servers: {
    one: {
      host: '//redacted//',
      username: 'ubuntu',
      pem: "//redacted//"
      // password:
      // or leave blank for authenticate from ssh-agent
    }
  },

  meteor: {
    name: 'CrunchySerial',
    path: '../../CrunchySerial',
    servers: {
      one: {}
    },
    buildOptions: {
      serverOnly: true,
    },
    env: {
      ROOT_URL: 'http://www.crunchyserial.com',
      MONGO_URL: 'mongodb://localhost/meteor'
    },

    dockerImage: 'abernix/meteord:base',
    deployCheckWaitTime: 400
  },

  mongo: {
    oplog: true,
    port: //redacted//,
    servers: {
      one: {},
    },
  },
};

我已经尝试了ROOT_URL和没有/，我已经更新到了所有最新的版本...我还是不知道为什么会发生这种事。

Answer 1

解决方案: oauth、ROOT_URL、redirect_uri和www.domain.com vs domain.com

你的oauth脚本只能在一个域中工作-当你有一个ROOT_URL时，它会在你的oauth发送请求的uri中使用它。此外，您必须注册哪些redirect_uri(s)是有效的一些服务(如谷歌)。因此，oauth只能在一个子域/域中工作。您必须选择www或no-www -，而不是两者都选择。我选择保留www并设置DNS重定向和编程重定向(只是为了确保)。

DNS从@重定向到www.your-domain.com：

我们使用的是NameCheap，所以URL Redirect Record很容易设置。这是NameCheap's documentation。

Meteor中的编程重定向：

这就是我如何在Meteor中强制重定向，检查www并在它不存在的情况下强制执行它。

File Location: [project]/imports/startup/client/force_www_redirect.js

import { Meteor } from 'meteor/meteor'

Meteor.startup(function () {
    if (location.host.indexOf('www.crunchyserial.com') !== 0) {
        location = 'http://www.crunchyserial.com'
    }
})

我只是确保这是我的客户初创公司通过首先导入它而看到的第一个代码。

File Location: [project]/imports/startup/client/index.js

// force www.crunchyserial.com
import './force_www_redirect'

// Configure Login Buttons UI
import './login_button_configuration'

// Configure atForm
import './useraccounts_configuration'

// Run the Routes
import './routes'

从[project]/client/main.js调用的

import '../imports/startup/client'