4

私が取り組んでいるサービスに RESTful API を提供する Sinatra ベースのサーバーがあります。私の開発マシンでは、localhost:9393.

同時に、ユーザー認証ember.jsに使用するクライアント アプリケーション ( で構築) は別のポートで実行されます: 。ember-authlocalhost:9000

以前は、サーバーとクライアントの両方を同じ host:port に設定し、クライアント アプリを静的ファイルとして返していました。認証はかなりうまくいきました。SignInの公式ドキュメントによると、指定したルートで POST リクエストを受け取ります ( /signin)。しかし今、私は何のパラメータも持たないOPTIONSリクエストを受け取りました。

クライアントからのいくつかのコード (クライアントは Yeoman の ember-generator を介して生成されます):

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Ember Starter Kit</title>

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/bootstrap.css">
    <link rel="stylesheet" href="styles/bootstrap-responsive.css">
    <link rel="stylesheet" href="styles/style.css">
    <!-- endbuild -->
  </head>
  <body>

    <!-- build:js scripts/components.js -->
    <script src="components/jquery/jquery.js"></script>
    <script src="components/handlebars/handlebars.runtime.js"></script>
    <script src="components/ember/ember.js"></script>
    <script src="components/ember-data/ember-data-latest.js"></script>
    <script src="components/ember-auth/ember-auth.js"></script>
    <!-- endbuild -->

    <!-- build:js scripts/main.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/models/user.js"></script>
    <script src="scripts/views/auth.js"></script>
    <!-- endbuild -->

    <!-- build:js(.tmp) scripts/templates.js -->
    <script src="scripts/compiled-templates.js"></script>
    <!-- endbuild -->
  </body>
</html>

app.js

var App = window.App = Ember.Application.create();

App.Store = DS.Store.extend({
  revision: 12,
  adapter:'DS.RESTAdapter'
});

App.Router.map(function() {
  // I have no routes so far,
  // as I don't need them to test authentication itself
});

App.Auth = Ember.Auth.create({
  signInEndPoint: '/signin',
  signOutEndPoint: '/signout',
  tokenKey: 'auth_token',
  baseUrl: 'http://localhost:9393',
  tokenIdKey: 'user_id',
  userModel: 'App.User',
  sessionAdapter: 'cookie',
  modules: [
    'emberData', 'rememberable'
  ],
  rememberable: {
    tokenKey: 'remember_token',
    period: 7,
    autoRecall: true
  }
});

user.js

App.User = DS.Model.extend({
  email: DS.attr('string'),
  param: DS.attr('string')
});

auth.js

App.AuthView = Ember.View.extend({
  templateName: 'auth'
});

App.AuthSignInView = Ember.View.extend({
  templateName: 'signin',
  email: null,
  password: null,
  remember: true,
  submit: function(event, view){
    event.preventDefault();
    event.stopPropagation();
    App.Auth.signIn({
      data:{
        email: this.get('email'),
        password: this.get('password'),
        remember: this.get('remember')
      }
    })
  }
});

App.AuthSignOutView = Ember.View.extend({
  templateName: 'signout',
  submit: function(event, view){
    event.preventDefault();
    event.stopPropagation();
    App.Auth.signOut();
  }
});

アプリケーション.hbs

<div class="container">
  <div class="row">
    <div class="span3">
      {{view App.AuthView}}
    </div>
    <div class="span9">
      {{outlet}}
    </div>
  </div>
</div>

auth.hbs

{{#if App.Auth.signedIn}}
  {{view App.AuthSignOutView}}
{{else}}
  {{view App.AuthSignInView}}
{{/if}}

signin.hbs

<form>
  <label>Email</label>
  {{view Ember.TextField valueBinding="view.email"}}
  <label>Password</label>
  {{view Ember.TextField type='password' valueBinding="view.password"}}
  {{view Ember.Checkbox checkedBinding="view.remember"}}
  <label>Remember me?</label>
  <hr />
  <button type="submit">Sign In</button>
</form>
4

1 に答える 1