使用ember-cli和ember-simple-auth设置客户端凭据OAuth2

Question

我一直在尝试使用ember-cli和Rails API后端设置OAuth2客户端凭据流，并且遇到了麻烦。 也许是因为我是新手。 我目前正在尝试做的是：

bower.json
{
    "ember-simple-auth": "*"
}

Brocfile.js
app.import('vendor/ember-simple-auth/simple-auth.amd.js')
app.import('vendor/ember-simple-auth/simple-auth-oauth2.amd.js')

initializers/login.js
App.initializer({
  name: 'Register Components',
  initialize: function(container, application) {
    registerComponents(container);
    Ember.SimpleAuth.setup(application);
  }
});

controllers/login.js
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';

export default Ember.Controller.extend(SimpleAuth.LoginControllerMixin, {
  authenticatorFactory: 'simple-auth-authenticator:oauth2-password-grant'
});

templates/login.hbs
<form {{action authenticate on='submit'}}>
  <label for="identification">Login</label>
  {{view Ember.TextField id='identification' valueBinding='identification' placeholder='Enter Login'}}
  <label for="password">Password</label>
  {{view Ember.TextField id='password' type='password' valueBinding='password' placeholder='Enter Password'}}
  <button type="submit">Login</button>
</form>

任何有关这方面的指南，教程或更正均表示赞赏。

Answer 1

最新版本的Ember Simple Auth不再需要定义初始化程序，并为该库添加了Ember CLI插件，这使设置一切变得更加容易。 README和API文档现在也着重于通过Ember CLI使用该库，这应该对您有很大帮助。

签出自述文件： https : //github.com/simplabs/ember-simple-auth#readme

Answer 2

我最近在GitHub上进行了讨论 。 这是我最终使用HTTP基本身份验证（在app / app.js中）对客户端进行身份验证的操作：

import OAuth2Authenticator from 'simple-auth-oauth2/authenticators/oauth2';

OAuth2Authenticator.reopen({
  makeRequest: function(data) {
    var clientId = MyProjectENV.APP.apiClientId;
    var clientSecret = MyProjectENV.APP.apiClientSecret;
    return Ember.$.ajax({
      url:         this.serverTokenEndpoint,
      type:        'POST',
      data:        data,
      dataType:    'json',
      contentType: 'application/x-www-form-urlencoded',
      headers:     { "Authorization": "Basic " + btoa(clientId + ":" + clientSecret) }
    });
  }
});

并在config / environment.js中：

var ENV = {
  // ...
  APP: {
    apiClientId: "12345",
    apiClientSecret: "abcdefg987654"
  }

Answer 3

您可以通过设置OAuth 2.0身份验证器的clientId属性来包含客户端ID（请参阅API文档： http : //ember-simple-auth.com/api/classes/OAuth2PasswordGrantAuthenticator.html#property_clientId ）。 与其他答案暗示的相反， 您永远不要包含客户机密 。 一旦您在Ember应用程序中的任何地方使用秘密，它便不再是秘密，因为它包含在源代码中，并且对有权访问源代码的所有人（通常是整个Internet上的所有人）都可见。

就OAuth而言，Web客户端是公共客户端，无法信任，因此无法使用客户端密码。 您可以使用客户端ID进行分析等。但是，您甚至不应该在服务器端信任它，因为它可以轻松地进行操作，当然也可以被其他客户端使用，因为可以从应用程序源中查找它。

所以请大家记住：

永远不要在Ember应用程序中使用客户密码！！ 1！1！

Answer 4

感谢marcoow付出的巨大努力，Ember-Simple-Auth现在支持一种简单的添加client_it的方法！

ESA在默认身份验证器中将clientId的值设置为null（请参阅文件node_modules / esa / addon / authenticator / oauth2-password-grant.js ）

您可以采用覆盖自定义服务器令牌端点的相同方法覆盖自定义身份验证器中的值。

// app/authenticators/oauth2.js
import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';
import ENV from '../config/environment';

export default OAuth2PasswordGrant.extend({
  serverTokenEndpoint: `${ENV.api.host}/oauth/token`,
  clientId: `${ENV.APP.apiClientId}`,
});

您可以在esa的github讨论中考虑作者对设置client_id的看法。

更新 ：

我更新了源代码，并删除了客户端机密，因为您不应该将其包含在余烬应用程序中。