EduTalk

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

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

f:id:atsuhio:20150411183835j:plain

このブログ記事では、Rails APIとEmber CLIを使ったユーザー登録と認証を実装していきます。全部で4つのパートで構成される予定です。

必要なツール一覧

まずこれらのツールがインストールされていることを確認してください。バージョンは今回使っているバージョンです。

プロジェクトを作成します。

auth_testというプロジェクト用のフォルダーを作り、そこに移動します。

mkdir auth_test && cd auth_test

RailsAPI gemを利用してRailsプロジェクトを作成します。今回はPostgreSQLを使います。また今回Powを利用して、"http://api.auth-test-api.dev/v1/"をAPIサーバーのエンドポイントにする予定なのでそれも一緒に行います。

rails-api new auth_test_api --database=postgresql
gem install powder
powder link

次にEmber CLIアプリを作ります。

ember new auth-test-web

試しにEmber CLIアプリを動かしてみましょう。

cd auth-test-web
ember s

http://localhost:4200へ移動して"Welcome to Ember.js"と表示されていればOKです。

次にauth_test_apiにjwt, active_model_serializers, bcrypt gemを入れます。

gem 'active_model_serializers', :github => 'rails-api/active_model_serializers'
gem 'jwt'
gem 'bcrypt'


bundle install


Rails側でUserモデルをまず作ります。

rails g model user name:string email:string password_digest:string
rake db:create
rake db:migrate



次に、ルートを編集します。

auth_test_api/config/routes.rb
Rails.application.routes.draw do
  namespace :api, path: '/' do
    namespace :v1 do
      post 'users/authenticate', to: "users#authenticate", format: false
      post "users/create", to: "users#create", format: false
      get "users/:id", to: "users#show", format: false
    end
  end
end

次に、Routeに併せてUsersControllerを作ります。

rails-api g controller api/v1/users
class Api::V1::UsersController < ApplicationController
  def show
  end

  def create
  end

  def authenticate
  end

  private

  def user_params
    params.require(:user).permit(
      :name,
      :email,
      :password
    )
  end
end

まずは、モデル側でbcryptが自動的に生パスワードを暗号化してくれるようにhas_secure_passwordを設定します。
(今回は、バリデーションなどは一旦行いません。)

class User < ActiveRecord::Base
  has_secure_password
end

試しにターミナルからユーザーを作成してみます。

irb(main):001:0> User.create(name: "Atsuhiro Teshima", email: "my@email.com", password: "myawesomepassword")
irb(main):002:0> u = User.first
irb(main):003:0> u.password_digest
=> "$2a$10$LozM/ywmnn0Urfd4/I302O88COik79/7vvRlRqkiLCM5uEgZvMoli"

無事に、ユーザーを作成した時にパスワードダイジェストが生成されました。

次回パート2ではEmber側の実装をしていきます。
パート2はこちら

リンガルボックスでは現在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までご連絡下さい。