AngularStack Facebook、Google+ 和 Twitter 身份验证答案

【问题标题】：AngularStack Facebook, Google+ and Twitter AuthenticationAngularStack Facebook、Google+ 和 Twitter 身份验证
【发布时间】：2014-12-23 18:02:41
【问题描述】：

我正在使用 Generator Angular Fullstack 制作我的第一个 Web 应用程序。我在这里完成了项目初始化：https://github.com/DaftMonk/generator-angular-fullstack

在初始化期间，我为以下对象设置了 oAuth：Facebook、Google+、Twitter

我也在使用 Openshift，在初始化项目后...我使用这些步骤将其添加到 openshift。这包括为 RHC 设置用于 Facebook、Google+ 和 Twitter 身份验证的环境变量。我也添加了这些。

但是，使用我的新应用程序...我无法使用 Facebook、Google+ 或 Twitter 创建新帐户。当我创建新帐户时，这些是我得到的错误：

脸书：

Invalid App ID: id

谷歌+：

401. That’s an error.

Error: invalid_client

The OAuth client was not found.

Request Details
  scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email
  response_type=code
  redirect_uri=http://site.rhcloud.com/auth/google/callback
  client_id=id
That’s all we know.

推特：

Internal Server Error

到目前为止，除了完成教程之外，我还没有做太多事情。但我觉得我错过了什么。关于这个主题的任何帮助都会很棒。谢谢:)

【问题讨论】：

标签： angularjs authentication oauth yeoman-generator-angular

【解决方案1】：

嗯，首先你必须配置你的clientIDs、clientSecrets 和callBackURLs。这些您需要在每个 oAuth 提供商的开发者平台页面上找到。即对于 Facebook，这将是：https://developers.facebook.com/apps/

这些可以放在 local.env.js 文件中（包括一个示例，如下所示：

module.exports = {
  DOMAIN: 'http://localhost:9000',
  SESSION_SECRET: "xxxxxxxxxxxxx",

  FACEBOOK_ID: 'xxxxxxx',
  FACEBOOK_SECRET: 'xxxxxxx',

  TWITTER_ID: 'xxxxxxx',
  TWITTER_SECRET: 'xxxxxx',

  GOOGLE_ID: 'xxxxxxx',
  GOOGLE_SECRET: 'xxxxxxx',

  .....
};

【讨论】：

【解决方案2】：

部署到 Heroku 时，不要忘记在使用 Google+ 登录时使用 http/https 前缀设置 DOMAIN 配置变量。

heroku config:set DOMAIN=http://<your app name>.herokuapp.com

否则你会得到一个redirect_uri_mismatch。如果这以内部服务器错误结束，您可能需要在 Google 开发者控制台中启用 Google+ API。

【讨论】：

【解决方案3】：

如果您已经获得了您提供的 ID 和 SECRET 密钥，但您仍然像我一样在使用 OpenShift 时遇到困难……我发现为应用程序设置环境变量对我有用。

例如谷歌：

rhc set-env -a GOOGLE_ID= rhc set-env -a GOODLE_SECRET=

当我在本地开发时，local.env.js 中的模块导出对我来说很好，但当我通过 grunt buildcontrol 将我的应用程序推送到 OpenShift 时却没有

【讨论】：