Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails Tutorial user signup with AngularJS

(1)Adding a secure password

1)configuration

1.bcrypt-ruby install

$ vi Gemfile

gem 'bcrypt'

$ bundle install

2.add "password_digest" columns to the users table

$ rails generate migration add_password_digest_to_users password_digest:string
      invoke  active_record
      create    db/migrate/20150713044621_add_password_digest_to_users.rb

$ more db/migrate/20150713044621_add_password_digest_to_users.rb

class AddPasswordDigestToUsers < ActiveRecord::Migration
  def change
    add_column :users, :password_digest, :string
  end
end

3.migration

$ bundle exec rake db:migrate

4.User model "has_secure_password" method

$ vi app/models/user.rb

class User < ActiveRecord::Base
  has_secure_password
end

2)create test users

$ vi rails c

2.0.0p247 :004 > test = User.create(name: "testuser4", email: "test4@example.com", password: "test4pass", password_confirmation: "test4pass")
 => #<User id: 4, name: "testuser4", email: "test4@example.com", created_at: "2015-07-13 04:51:06", updated_at: "2015-07-13 04:51:06", password_digest: "$2a$…">

(2)AngularJS Signup form

1)AngularJS route

$ vi app/assets/javascripts/mymodule.js.erb

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);

myModule.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
.......
    .when("/users/new", {
     templateUrl: "<%= asset_path('users/new.html.erb') %>"
     })

2)AngularJS template new view

$ vi app/assets/templates/users/new.html.erb

<div ng-controller="UsersNewCtrl" class="row">
  <div class="col-md-6 col-md-offset-3">
    <h1 class="text-center">Sign up</h1>
    <form name="userNewForm" novalidate>
      <div class="well">
        <div class="form-group">
          <label>name</label>
          <input name="name" class="form-control"
            ng-model="user.name" required />
        </div>
        <div class="form-group">
          <label>email</label>
          <input type="email" name="email" class="form-control"
            ng-model="user.email" required />
        </div>
        <div class="form-group">
          <label>password</label>
          <input type="password" name="password" class="form-control"
            ng-model="user.password" required />
          </div>
        <div class="form-group">
          <label>password_confirmation</label>
            <input type="password" name="password_confirmation" 
              class="form-control"
              ng-model="user.password_confirmation" required />
        </div>
        <button ng-click="submit()" class="btn btn-primary">
          Create my account
        </button>
      </div>
    </form>
  </div>
</div>

3)AngularJS controller "UsersNewCtrl"

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersNewCtrl", function($scope, userResource) {
  $scope.user = new userResource();
});

4)add a link to home view

$ vi app/assets/templates/static_pages/home.html.erb

<p class="text-center">
  <a class="btn btn-large btn-primary" href="/users/new">Sign up now!</a>
</p>

(3)AngularJS $resource POST

1)AngularJS $resource POST

$ vi app/assets/javascripts/mymodule.js.erb

myModule.factory("userResource", function($resource) {
  return $resource("/app/users/:id", { id: "@id" },
    {
      'create':  { method: 'POST' },
..........
    }
  );
});

mymodule.controller("UsersNewCtrl", function($scope, userResource, $location) {
  $scope.user = new userResource();
  $scope.submit = function() {
    function success(response) {
      $location.path("/users/" + response.id);
    }
    function failure(response) {
      console.log("failure", response)
    }
    userResource.create($scope.user, success, failure);
  };
});

2)Rails controller create action

$ vi app/controllers/users_controller.rb

  def create
    @user = User.new(user_params)
    if @user.save
      render json: @user, status: :created, location: @user
    else
      render json: @user.errors, status: :unprocessable_entity
    end
  end

private
  def user_params
    params.permit(:name:email,:password,:password_confirmation)
  end

3)CSRF

*Problem

Can't verify CSRF token authenticity
Completed 422 Unprocessable Entity in 1ms

*Avoidance

$ vi app/assets/javascripts/mymodule.js.erb

myModule.config(function($httpProvider) {
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
});

4)test operation

1.home view
2.click "Sign up now!"
3.user sign up
4.user's profile view