Devise: मोडल विंडो में लॉगिन और पंजीकरण

विभिन्न प्रकार के उपकरणों के लिए मोडल विंडो और "नियमित" पृष्ठों के माध्यम से प्रोजेक्ट पर लॉगिन करना आवश्यक था। खोज के बाद, मैंने महसूस किया कि अक्सर काफी नहीं है कि क्या वर्णित है। इसलिए यहाँ वे एक मोडल विंडो में फॉर्म डालते हैं (वास्तव में विकी डेविस से पेज का उपयोग करते हुए), और यहाँ ( लॉगिन और पंजीकरण ) वे डेविस नियंत्रकों में विधियों को ओवरराइड करते हैं ताकि वे लगातार केवल जॅसन लौटें और "मॉडल" के लिए आपको सत्यापन के साथ बहुत सारी शर्तें लिखने की आवश्यकता होगी। अनुरोध प्रारूप। इसलिए, मैंने एक नए एप्लिकेशन में प्रयोग करने का फैसला किया और 2 प्रारूपों के लिए न्यूनतम मात्रा में पुनर्परिभाषित और गंदे हैक के साथ समर्थन लिखने का फैसला किया।

अनुप्रयोग निर्माण

1. हम बिना किसी परीक्षण के एक एप्लिकेशन जेनरेट करते हैं और बंडल इंस्टाल करते हैं : rails new devise_modal -B -T
2. रत्न के लिए आवश्यक रत्न जोड़ें:
   
   • gem 'therubyracer', platforms: :ruby
gem "less-rails"
gem 'twitter-bootstrap-rails', branch: 'bootstrap3' - मोडल खिड़कियों के लिए बूटस्ट्रैप का उपयोग करें
   • gem 'devise' प्रमाणीकरण डेविस के माध्यम से होगा
   
   और सब कुछ स्थापित करें: bundle install
   
3. हम आवश्यक जनरेटर शुरू करते हैं
   क्योंकि हम बूटस्ट्रैप शैलियों में कुछ भी नहीं बदलेगा rails g bootstrap:install static , rails g bootstrap:install static
rails g devise:install; rails g devise User; rake db:migrate rails g devise:install; rails g devise User; rake db:migrate - स्थापित करें और उपयोगकर्ता बनाएँ
   
   
4. एक नियंत्रक बनाएँ जो मुख्य पृष्ठ प्रदर्शित करेगा:
   rails g controller welcome index --no-helper --no-assets
   Config / path.rb में हम इंडेक्स को मुख्य पृष्ठ पर बाँधते हैं:
   root 'welcome#index'
   

इस चरण के अंत में devise के लिए मानक लिंक पर लॉगिन / पंजीकरण फॉर्म के साथ एक आवेदन है: users/sign_in और users/sign_up ।

रूपों के लिए मोडल विंडो

रूपों में कुछ भी उल्लेखनीय नहीं है - हम मानक विचलन वाले का उपयोग करके उन्हें दूरस्थ बनाते हैं और प्रारूप को जस्सन में बदलते हैं। फिर हम उन्हें उपयुक्त कक्षाओं में बूटस्ट्रैप लपेटकर मोडल बनाते हैं। परिणामस्वरूप, हमें ऐसा आंशिक मिला:
एप्लिकेशन / विचार / साझा / _sign_in.html.erb

 <div class="modal hide fade in" id="sign_in"> <div class="modal-header"> <button class="close" data-dismiss="modal">x</button> <h2>Sign in</h2> </div> <div class="modal-body"> <%= form_for(User.new, url: session_path(:user), html:{id: 'sign_in_user', :'data-type' => 'json'}, remote: true) do |f| %> <div> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true %> </div> <div> <%= f.label :password %><br /> <%= f.password_field :password, autocomplete: "off" %> </div> <% if Devise.mappings[:user].rememberable? -%> <div> <%= f.check_box :remember_me %> <%= f.label :remember_me %> </div> <% end -%> <div> <%= f.submit "Sign in" %> </div> <% end %> </div> <div class="modal-footer"> </div> </div> 

एप्लिकेशन / विचार / साझा / _sign_up.html.erb

 <div class="modal hide fade in" id="sign_up"> <div class="modal-header"> <button class="close" data-dismiss="modal">x</button> <h2>Sign up</h2> </div> <div class="modal-body"> <%= form_for(User.new, url: registration_path(:user), html: {id: 'sign_up_user', :'data-type' => 'json'}, remote: true) do |f| %> <div> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true %> </div> <div> <%= f.label :password %><br /> <%= f.password_field :password, autocomplete: "off" %> </div> <div> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "off" %> </div> <div><%= f.submit "Sign up" %></div> <% end %> </div> <div class="modal-footer"> </div> </div> 

लेआउट में उन्हें कॉल करने के लिए इन फ़ाइलों और लिंक का प्रदर्शन जोड़ें:

 <%= link_to "Sign in", "#sign_in", "data-toggle" => "modal", :class => 'btn btn-small' %> <%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => 'btn btn-small' %> <%= render 'shared/sign_in' %> <%= render 'shared/sign_up' %> 

उसके बाद, हम उपयोगकर्ता की उपस्थिति के लिए जाँच करके थोड़ा आनंद लेंगे:
एप्लिकेशन / विचार / लेआउट / application.html.erb

 <% if current_user %> <%= "Hello, #{current_user.email}" %> <%= link_to "Sign out", destroy_user_session_path, :method => :delete %> <% else %> <%= link_to "Sign in", "#sign_in", "data-toggle" => "modal", :class => 'btn btn-small' %> <%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => 'btn btn-small' %> <%= render 'shared/sign_in' %> <%= render 'shared/sign_up' %> <% end %> 

काम करने के लिए, आपको इस संदर्भ के लिए संसाधन और संबंधित चीजों को परिभाषित करने वाले application_helper में कई तरीके जोड़ने होंगे:
app / सहायकों / application_helper.rb

 def resource_name :user end def resource @resource ||= User.new end def devise_mapping @devise_mapping ||= Devise.mappings[:user] end 

जैसा कि प्रिंटरकु और डार्थसिम ने टिप्पणियों में उल्लेख किया है, संसाधन के लिए वैश्विक सहायकों को पुनर्परिभाषित करना बहुत कम समझ में आता है; संसाधन के बजाय फ़ॉर्म में सीधे सेट करना बेहतर है - User.new , और इसके बजाय User.new - :user । इसके अलावा एप्लिकेशन / विचारों / साझा / _sign_in.html.erb में, Devise.mappings[:user] को devise_mapping के बजाय निर्दिष्ट Devise.mappings[:user] । सामान्य तौर पर, आप इस स्थिति से पूरी तरह से छुटकारा पा सकते हैं:

 <% if devise_mapping.rememberable? -%> 

इस आधार पर कि क्या हम उपयोगकर्ता मॉडल ( ऐप / मॉडल / user.rb ) में संकेत देते हैं :rememberable । इसके अलावा, ऐप / विचार / साझा / _sign_up.html.erb में एक devise_error_messess सहायक भी था ! , जो संसाधन का उपयोग करता है , लेकिन चूंकि त्रुटि पाठ json की प्रतिक्रिया से लिया गया है, हम बस <%= devise_error_messages! %> हटा देते हैं <%= devise_error_messages! %> <%= devise_error_messages! %> अनावश्यक के रूप में।
अब ऐसे मोडल फॉर्म हैं जो किसी भी पेज से सुलभ हैं और आपको दर्ज करने और रजिस्टर करने की अनुमति देते हैं। यह केवल यह सुनिश्चित करने के लिए बना हुआ है कि इन अनुरोधों के जवाब में devise html पेज नहीं भेजता है।

डेविस से JSON प्रतिक्रियाएं

डेविस रत्न में, FailureApp इनपुट-संबंधित त्रुटियों के लिए जिम्मेदार है । जब SessionController में कोई त्रुटि होती है, जो लॉगिन अनुरोधों को संसाधित करता है, तो जवाब कहा जाता है , जहां http_auth का उपयोग किया जाता है? जाँच की गई: आपको 401 स्थिति भेजने या किसी अन्य पृष्ठ पर पुनर्निर्देशित करने की आवश्यकता है। चूंकि डिफ़ॉल्ट वसीयत है :
config / initializers / devise.rb

 config.http_authenticatable_on_xhr = true 

फिर 401 रिटर्न।
AJAX अनुरोध के जवाब में, RegContController, एक html पृष्ठ भेजता है, इसे ठीक करने के लिए, इसे थोड़ा पुनर्परिभाषित करें - हम स्पष्ट रूप से संकेत देंगे कि हम किन स्वरूपों में रुचि रखते हैं:
rails g controller Registrations --no-helper --no-assets --no-views
config / मार्गों .rb

 devise_for :users, controllers: {registrations: 'registrations'} 

ऐप / कंट्रोलर / रजिस्ट्रेशन_कंट्रोलर .rb

 class RegistrationsController < Devise::RegistrationsController respond_to :html, :json end 

अब, एक असफल पंजीकरण प्रयास के साथ, प्रतिक्रियाJSON ['त्रुटियों'] में त्रुटि ग्रंथों के साथ 422 स्थिति दी जाएगी, और एक सफल एक के साथ - 201. इसी तरह सेशंसकंट्रोलर के लिए, और एक सफल लॉगिन के साथ, आपको स्थिति देने की आवश्यकता है, html पृष्ठ नहीं, इसलिए हम इसे "सिखा" देंगे json अनुरोधों का सही उत्तर दें:
rails g controller Sessions --no-helper --no-assets --no-views
config / मार्गों .rb

 devise_for :users, controllers: {sessions: 'sessions', registrations: 'registrations'} 

एप्लिकेशन / नियंत्रक / session_controller.rb

 class SessionsController < Devise::SessionsController respond_to :html, :json end 

आप जावास्क्रिप्ट भी लिख सकते हैं, जो इस प्रकार के उदाहरणों से प्रतिक्रियाओं को संभालेंगे:
app / आस्तियों / javascripts / welcome.js.cfish

 $ -> $("form#sign_in_user, form#sign_up_user").bind("ajax:success", (event, xhr, settings) -> $(this).parents('.modal').modal('hide') ).bind("ajax:error", (event, xhr, settings, exceptions) -> error_messages = if xhr.responseJSON['error'] "<div class='alert alert-danger pull-left'>" + xhr.responseJSON['error'] + "</div>" else if xhr.responseJSON['errors'] $.map(xhr.responseJSON["errors"], (v, k) -> "<div class='alert alert-danger pull-left'>" + k + " " + v + "</div>" ).join "" else "<div class='alert alert-danger pull-left'>Unknown error</div>" $(this).parents('.modal').children('.modal-footer').html(error_messages) ) 

प्रवेश द्वार पर, हम त्रुटि को अलर्ट में लपेटते हैं, और पंजीकरण के दौरान, प्रत्येक पैरामीटर के लिए त्रुटियां, जिसके बाद हम पाद में प्राप्त संदेश प्रदर्शित करते हैं। एक सफल अनुरोध के साथ, हम बस मोडल फॉर्म को हटा देते हैं (आप लेआउट में ब्लॉक को भी अपडेट कर सकते हैं, जिसमें उपयोगकर्ता को उपयोगकर्ता डेटा प्रदर्शित करने के लिए जाँच की जाती है (वे भी उत्तर में आते हैं))।
अब कंट्रोलर मोडल फॉर्म - json , और स्टैंडर्ड ( यूजर्स / साइन_इन , यूजर्स / साइन_अप ) - html दोनों के लिए सही फॉर्मेट में जवाब देते हैं। और इसके लिए जो कुछ भी आवश्यक था, वह था नियंत्रकों को फिर से परिभाषित करना, प्रारूपों के सेट का विस्तार करना:

 respond_to :html, :json 

टिप्पणी

एप्लिकेशन को रेल 4 में लिखा गया था, लेकिन 3.2 के लिए अंतर न्यूनतम होगा: जब आप एप्लिकेशन बनाते हैं तो bundle install शुरू हो जाएगा, आपको public/index.html को हटाने की आवश्यकता होगी और मुख्य पथ थोड़ा अलग दिखेगा:
config / मार्गों .rb

 root to: 'welcome#index'