読者です 読者をやめる 読者になる 読者になる

EduTalk

教育に関するテクノロジーやスタートアップ、考えたことについて発信中。

Rails APIとEmber CLIでユーザー登録、ログインを実装する - パート4

f:id:atsuhio:20150411183835j:plain
このシリーズではRails APIとEmber CLIを利用してユーザー登録、ログインを実装していきます。

前回までで、ユーザーがログイン出来るようになり、シークレットページにユーザーの情報が表示されるところまでを実装しました。今回はログアウトとユーザー登録を実装します。

ログアウトを実装する。

まずはログアウトを実装します。ログアウトの流れは下記のとおりです。

  1. ユーザーがsecretページでlogoutボタンをクリックして、logoutアクションを呼び出す。
  2. Secretコントローラー内のlogoutアクションはAuthサービスのlogout()メソッドを呼び出す。
  3. Auth内のlogoutメソッドは、AuthのuserId、authTokenプロパティを消し、stateが"logged-out"へと変更される。
  4. loginコントローラーのlogoutSucceededメソッドが呼び出され、indexへとリダイレクトされる。

実際に実装していきます。

まずは、Secretテンプレートにlogoutボタンを設置します。

auth-test-web/app/templates/secret.hbs
...
<button {{action 'logout'}} >ログアウト</button>



Secretコントローラーにlogoutアクションを設置します。

export default Ember.Controller.extend({
  ..
  actions: {
    logout: function() {
      var auth = this.get('auth');
      auth.logout();
    }
  }
});



次にAuthサービス内のlogout関数を実装します。

export default Ember.Service.extend({
....
  logout: function() {
    this.setProperties({
      authToken: null,
      userId: null,
      state: "logged-out"
    });
    this.sendToApp('logoutSucceeded');
  },
......
});



loginコントローラー内のlogoutSucceededアクションを実装します。

export default Ember.Controller.extend({
  actions: {
    ....
    logoutSucceeded: function() {
      this.transitionToRoute('index');
    }
  }
});



これで、実際にログアウトを行うと、セッション情報が消えてindexページへリダイレクトされます。

ユーザー登録を実装する。

最後にユーザー登録を実装していきます。

まずは、RailsAPI側でUsersControllerのcreateメソッドを実装します。

class Api::V1::UsersController < ApplicationController
  ...
  def create
    user = User.new(user_params)
    if user.save
      render json: { message: "Successfully created a user" }
    else
      render json: { message: "Signup failed" }, status: 403
    end
  end
  ...
end



次に、Ember CLI側で、signupテンプレートを編集し、signupコントローラーにsignupアクションを登録します。

/auth-test-web/app/templates/signup.hbs
<form method="post" {{action "signup" on="submit"}}>
  <div class="form-group">{{input class="form-control" value=name type="text" placeholder="name"}}</div>
  <div class="form-group">{{input class="form-control" value=email type="text" placeholder="Email"}}</div>
  <div class="form-group">{{input class="form-control" value=password type="password" placeholder="Password"}}</div>
  <div class="form-group">{{input class="btn btn-default" value="Signup" type="submit"}}</div>
</form>


/auth-test-web/app/controllers/signup.js
import Ember from 'ember';
import config from 'auth-test-web/config/environment';
import { raw as icAjaxRaw } from 'ic-ajax';

export default Ember.Controller.extend({
  actions: {
    signup: function() {
      var _this = this;
      var data = this.getProperties('name', 'email', 'password');
      var auth = this.get('auth');
      icAjaxRaw(config.host + '/' + config.namespace + '/users/create', {
        type: 'post',
        data: {
          user: {
            name: data.name,
            email: data.email,
            password: data.password
          }
        }
      }).then(function(result) {
        _this.setProperties({
          name: null,
          email: null,
          password: null
        })
        auth.login(data);
      }, function(err) {
        console.log(err);
        _this.set('password', null);
      });
    }
  }
});



ここでは、最初にフォームに入力されたデータを基に、ユーザーを作成し無事ユーザーが作成された場合、同一のフォームデータを利用してログインを行うようにしています。実際に、ユーザー登録を試してみてください。ユーザーが作成され、Secretページへリダイレクトされるはずです。

これで、ユーザー登録、ログイン、ログアウトを実装することが出来ました。時間があれば、パート5以降でFacebook Loginのチュートリアルも公開出来ればと思っています。

実際のコードは、下記のページに上がってますので良かったらご覧下さい。

auth-test-web:
https://github.com/hiro1107/auth-test-web

auth_test_api:
https://github.com/hiro1107/auth_test_api

リンガルボックスでは現在CTOを募集しています。

リンガルボックスでは、オンライン英会話スクール「リンガルボックス」を運営しています。既にオンライン英会話では上場しているレアジョブに、DMM英会話、ラングリッチなど多数の会社がありますが、レアジョブの会員が3万人ほどで、日本だけでも語学学校に通う生徒数全体の中(500万人と言われています。)ではまだ小さな割合しか占めていないこと、まだ開拓の全く進んでいないブラジルやロシア、ヨーロッパなどの市場があること、オンライン英会話のサービス内容自体にもイノベーション余地があることなど、まだまだ可能性があると考えています。しかし、リンガルボックスの考えるビジョンを実現していくためには高い技術力が不可欠です。(こんなチュートリアルを書いていますが、代表は営業出身で技術力は全然高くないですw)
そうした訳で、現在リンガルボックスではCTO(Co-founder)を募集中です。

EdTech、Adaptive Learning、Single Page Application(リンガルボックスではEmber.jsを利用しています。)、Node.js、Socket.io、WebRTC、Ruby on RailsREST API、アプリ開発といったキーワードにピンときた方は是非hiro(at)lingualbox.comまでご連絡下さい。