{"id":1083,"date":"2015-08-01T02:16:34","date_gmt":"2015-08-01T02:16:34","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1083"},"modified":"2015-08-01T02:16:34","modified_gmt":"2015-08-01T02:16:34","slug":"user-signup-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/user-signup-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial user signup with AngularJS"},"content":{"rendered":"

(1)Adding a secure password<\/strong><\/p>\r\n\r\n

1)configuration<\/strong><\/p>\r\n\r\n

1.bcrypt-ruby install<\/strong><\/p>\r\n\r\n

$ vi Gemfile<\/p>\r\n\r\n

gem 'bcrypt'<\/p>\r\n\r\n

$ bundle install<\/p>\r\n\r\n

2.add "password_digest" columns to the users table<\/strong><\/p>\r\n\r\n

$ rails generate migration add_password_digest_to_users password_digest:string
\r\n      invoke  active_record
\r\n      create    db\/migrate\/20150713044621_add_password_digest_to_users.rb<\/p>\r\n\r\n

$ more db\/migrate\/20150713044621_add_password_digest_to_users.rb<\/p>\r\n\r\n

\r\nclass AddPasswordDigestToUsers < ActiveRecord::Migration\r\n  def change\r\n    add_column :users, :password_digest, :string\r\n  end\r\nend<\/pre>\r\n\r\n
3.migration<\/strong><\/p>\r\n\r\n
$ bundle exec rake db:migrate<\/p>\r\n\r\n
4.User model "has_secure_password" method<\/strong><\/p>\r\n\r\n
$ vi app\/models\/user.rb<\/p>\r\n\r\n
\r\nclass User < ActiveRecord::Base\r\n  has_secure_password\r\nend<\/pre>\r\n\r\n
2)create test users<\/strong><\/p>\r\n\r\n
$ vi rails c<\/p>\r\n\r\n
2.0.0p247 :004 > test = User.create(name: "testuser4", email: "test4@example.com", password: "test4pass", password_confirmation: "test4pass")
\r\n => #<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$…"><\/p>\r\n\r\n
(2)AngularJS Signup form<\/strong><\/p>\r\n\r\n
1)AngularJS route<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);\r\n\r\nmyModule.config(function($routeProvider, $locationProvider) {\r\n  $locationProvider.html5Mode(true);\r\n  $routeProvider\r\n.......\r\n    .when("\/users\/new", {\r\n     templateUrl: "<%= asset_path('users\/new.html.erb') %>"\r\n     })\r\n<\/pre>\r\n\r\n
2)AngularJS template new view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/users\/new.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="UsersNewCtrl" class="row">\r\n  <div class="col-md-6 col-md-offset-3">\r\n    <h1 class="text-center">Sign up<\/h1>\r\n    <form name="userNewForm" novalidate>\r\n      <div class="well">\r\n        <div class="form-group">\r\n          <label>name<\/label>\r\n          <input name="name" class="form-control"\r\n            ng-model="user.name" required \/>\r\n        <\/div>\r\n        <div class="form-group">\r\n          <label>email<\/label>\r\n          <input type="email" name="email" class="form-control"\r\n            ng-model="user.email" required \/>\r\n        <\/div>\r\n        <div class="form-group">\r\n          <label>password<\/label>\r\n          <input type="password" name="password" class="form-control"\r\n            ng-model="user.password" required \/>\r\n          <\/div>\r\n        <div class="form-group">\r\n          <label>password_confirmation<\/label>\r\n            <input type="password" name="password_confirmation" \r\n              class="form-control"\r\n              ng-model="user.password_confirmation" required \/>\r\n        <\/div>\r\n        <button ng-click="submit()" class="btn btn-primary">\r\n          Create my account\r\n        <\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\r\n\r\n
3)AngularJS controller "UsersNewCtrl"<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("UsersNewCtrl", function($scope, userResource) {\r\n  $scope.user = new userResource();\r\n});\r\n<\/pre>\r\n\r\n
4)add a link to home view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/static_pages\/home.html.erb<\/p>\r\n\r\n
\r\n<p class="text-center">\r\n  <a class="btn btn-large btn-primary" href="\/users\/new">Sign up now!<\/a>\r\n<\/p><\/pre>\r\n\r\n
(3)AngularJS $resource POST<\/strong><\/p>\r\n\r\n
1)AngularJS $resource POST<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.factory("userResource", function($resource) {\r\n  return $resource("\/app\/users\/:id", { id: "@id" },\r\n    {\r\n      'create':  { method: 'POST' },\r\n..........\r\n    }\r\n  );\r\n});\r\n\r\nmymodule.controller("UsersNewCtrl", function($scope, userResource, $location) {\r\n  $scope.user = new userResource();\r\n  $scope.submit = function() {\r\n    function success(response) {\r\n      $location.path("\/users\/" + response.id);\r\n    }\r\n    function failure(response) {\r\n      console.log("failure", response)\r\n    }\r\n    userResource.create($scope.user, success, failure);\r\n  };\r\n});<\/pre>\r\n\r\n
2)Rails controller create action<\/strong><\/p>\r\n\r\n
$ vi app\/controllers\/users_controller.rb<\/p>\r\n\r\n
\r\n  def create\r\n    @user = User.new(user_params)\r\n    if @user.save\r\n      render json: @user, status: :created, location: @user\r\n    else\r\n      render json: @user.errors, status: :unprocessable_entity\r\n    end\r\n  end\r\n\r\nprivate\r\n  def user_params\r\n    params.permit(:name:email,:password,:password_confirmation)\r\n  end\r\n<\/pre>\r\n\r\n
3)CSRF<\/strong><\/p>\r\n\r\n
*Problem<\/p>\r\n\r\n
Can't verify CSRF token authenticity
\r\nCompleted 422 Unprocessable Entity in 1ms<\/p>\r\n\r\n
*Avoidance<\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.config(function($httpProvider) {\r\n  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');\r\n});<\/pre>\r\n\r\n
4)test operation<\/strong><\/p>\r\n\r\n
1.home view
\r\n2.click "Sign up now!"
\r\n3.user sign up
\r\n4.user's profile view<\/p>\r\n","protected":false},"excerpt":{"rendered":"
(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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,151,150,145],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1083"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1083"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1083\/revisions"}],"predecessor-version":[{"id":1084,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1083\/revisions\/1084"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1083"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}