Hindi (हिंदी) translation by Shubham Sharma (you can also view the original English article)
इस ट्यूटोरियल में, आप सीखेंगे कि आपके ऐप्लिकेशन के उपयोगकर्ताओं को उनके ट्विटर अकाउंट का उपयोग करने में कैसे प्रवेश करना है। ऐसा करने से उपकरण जैसे ओएथ के साथ आसान बना दिया गया है
आप OmniAuth-Twitter का उपयोग करेंगे, जिसमें OmniAuth के लिए ट्विटर की रणनीति शामिल है
चलो चलें!
प्रारंभ करना
अपने रेल एप्लिकेशन को शुरू करने से शुरू करें अपने टर्मिनल से, ऐसा करने के लिए कमांड चलाएं:
1 |
rails new Tuts-Social -T
|
अपने Gemfile को खोलें और बूटस्ट्रैप मणि जोड़ें।
1 |
#Gemfile |
2 |
... |
3 |
|
4 |
gem 'bootstrap-sass' |
कमांड चलाकर मणि स्थापित करें:
1 |
bundle install
|
app/assets/stylesheets/application.css
को app/assets/stylesheets/application.scs.
जब किया जाए, तो बूटस्ट्रैप आयात करने के लिए कोड की निम्न पंक्तियां जोड़ें।
1 |
#app/assets/stylesheets/application.scss |
2 |
... |
3 |
@import 'bootstrap-sprockets'; |
4 |
@import 'bootstrap'; |
नाम का आंशिक नाम बनाएँ _navigation.html.erb
अपना नेविगेशन कोड रखने के लिए; आंशिक में स्थित होना चाहिए app/views/layouts
निर्देशिका।
नीचे एक आईडीई में कोड दर्ज करें यह आपके एप्लिकेशन के लिए एक नेविगेशन बार बनाने के लिए बूटस्ट्रैप का उपयोग करता है।
1 |
#app/views/layouts/_navigation.html.erb |
2 |
|
3 |
<nav class="navbar navbar-inverse"> |
4 |
<div class="container"> |
5 |
<div class="navbar-header"> |
6 |
<%= link_to 'Tuts Social', root_path, class: 'navbar-brand' %> |
7 |
</div>
|
8 |
<div id="navbar"> |
9 |
|
10 |
<ul class="nav navbar-nav pull-right"> |
11 |
<li><%= link_to 'Home', root_path %></li> |
12 |
</ul>
|
13 |
</div>
|
14 |
</div>
|
15 |
</nav>
|
नेविगेशन के लिए इस्तेमाल किया जा करने के लिए, आप इसे अपने आवेदन लेआउट में रेंडर करने के लिए की जरूरत है। मैं नीचे क्या है की तरह लग रहे करने के लिए अपने आवेदन लेआउट ट्वीक.
1 |
#app/views/layouts/application.html.erb |
2 |
|
3 |
<!DOCTYPE html>
|
4 |
<html>
|
5 |
<head>
|
6 |
<title>Tuts Social</title> |
7 |
<%= csrf_meta_tags %> |
8 |
|
9 |
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> |
10 |
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> |
11 |
</head>
|
12 |
|
13 |
<body>
|
14 |
<%= render "layouts/navigation" %> |
15 |
<div id="flash"> |
16 |
<% flash.each do |key, value| %> |
17 |
<div class="flash <%= key %>"><%= value %></div> |
18 |
<% end %> |
19 |
</div>
|
20 |
<div class="container-fluid"> |
21 |
<%= yield %> |
22 |
</div>
|
23 |
</body>
|
24 |
</html>
|
एक उत्पन्न करें PagesController
नीचे दिए गए आदेश को अपने टर्मिनल में दर्ज करके एक सूचकांक कार्रवाई के साथ।
1 |
rails generated controller Pages index |
सूचकांक के विचारों में इसे संपादित करने के लिए इसे संपादित करें।
1 |
#app/views/pages/index.html.erb |
2 |
|
3 |
<div class="jumbotron"> |
4 |
<h1>Welcome to Tuts Social!</h1> |
5 |
<p>Thanks for checking us out!</p> |
6 |
</div>
|
उपरोक्त कोड में, हम एक क्लास का इस्तेमाल करते हैं जिसे कहा जाता jumbotron
है यह एक बूटस्ट्रैप घटक है जो हमें व्यूपोर्ट को एक मार्केटिंग संदेश दिखाने के लिए विस्तारित करने की अनुमति देता है। आप बूटस्ट्रैप दस्तावेज़ीकरण से इसके बारे में अधिक जानकारी प्राप्त कर सकते हैं।
अपने को जोड़ने के लिए अपने मार्ग फ़ाइल खोलें root_path
1 |
#config/routes.rb |
2 |
|
3 |
Rails.application.routes.draw do |
4 |
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html |
5 |
|
6 |
root to: "pages#index" |
7 |
end |
OmniAuth-Twitter को सेट करना
आपको एक नया ट्विटर एप्लिकेशन बनाने की आवश्यकता है यह पन्ना के लिए ट्विटर डेवलपर पृष्ठ में इस पृष्ठ पर जाएं नीचे दिए गए स्क्रीनशॉट में मेरे पास जितने आवश्यक विवरण, सभी को दर्ज करें।



कॉलबैक URL के लिए, अपनी वेबसाइट का पता और "auth / twitter / callback" दर्ज करें। यदि आप स्थानीय मशीन पर होते हैं, तो आपके कॉलबैक यूआरएल को यह होना चाहिए:http://127.0.0.1:3000/auth/twitter/callback
आपको ट्विटर पर ऐप के सूचना पृष्ठ पर पुनर्निर्देशित किया जाएगा। अपनी चाबियाँ प्राप्त करने के लिए कुंजी और एक्सेस टोकन टैब पर नेविगेट करें। उपभोक्ता कुंजी और उपभोक्ता रहस्य की प्रतिलिपि बनाएं और उन्हें एक सुरक्षित स्थान पर पेस्ट करें- हम उनको शीघ्र ही उपयोग करेंगे।
कॉलबैक यूआरएल यूआरएल है जहां सफल प्रमाणीकरण और अनुमोदित प्राधिकरण के बाद एक उपयोगकर्ता को ऐप के अंदर पुनर्निर्देशित किया जाएगा (अनुरोध में उपयोगकर्ता के डेटा और टोकन भी शामिल होंगे)। सभी OmniAuth रणनीतियों को कॉलबैक यूआरएल के समान होने की उम्मीद है “/auth/:provider/callback”. :provider
रणनीति का नाम लेता है इस मामले में, रणनीति "ट्विटर" होगी, जैसा कि आप आरंभकर्ता में सूचीबद्ध करेंगे।
Omniauth
-
twitter
मणि जोड़ने के लिए अपने Gemfile
खोलें।
1 |
#Gemfile |
2 |
... |
3 |
|
4 |
gem 'omniauth-twitter' |
अब अपने Config / initializers निर्देशिका में OmniAuth के लिए प्रारंभकर्ता बनाएं । यह OmniAuth के लिए कॉन्फ़िगरेशन करेगा इसे नीचे की तरह दिखें, मेरे पास क्या है।
1 |
#config/initializers/omniauth.rb |
2 |
|
3 |
Rails.application.config.middleware.use OmniAuth::Builder do |
4 |
provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET'] |
5 |
end |
इस बिंदु पर आपको सुरक्षित रूप से संगृहीत की जाने वाली चाबियाँ और एक्सेस टोकन का उपयोग करना होगा। आपको ये सुरक्षित रखने की आवश्यकता है क्योंकि जब आप अपना कोड जमा करते हैं तो आप उन्हें सार्वजनिक रिपॉजिटरी में धक्का नहीं देना चाहते हैं।
आप इस के लिए एक मणि का उपयोग करेंगे। अपने Gemfile को फिर से खोलें और नीचे मणि जोड़ें। इसे अपने Gemfile में जोड़ें:
1 |
#Gemfile |
2 |
|
3 |
... |
4 |
group :development, :test do |
5 |
... |
6 |
gem 'dotenv-rails' |
7 |
... |
मणि स्थापित (Install gem) करने के लिए, चलाएँ।
1 |
bundle install
|
आपके अनुप्रयोग की होम डायरेक्टरी में, एक फाइल बनाओ जिसे नाम दिया गया है .env
इसे खोलें और अपनी चाबियाँ और टोकनें इसी तरह जोड़ें:
1 |
#.env |
2 |
|
3 |
TWITTER_KEY=xxxxxxxxxxxxxx |
4 |
TWITTER_SECRET=xxxxxxxxxxxxxx |
ओपन .gitignore
और आप अभी बनाया फ़ाइल जोड़ें।
1 |
#.gitignore |
2 |
|
3 |
... |
4 |
# Ignore .env used for storing keys and access tokens |
5 |
.env |
इसके साथ, आपकी चाबियाँ और एक्सेस टोकन सुरक्षित हैं! Dotenv
-rails
का उपयोग कैसे करें, इसके बारे में अधिक जानने के लिए, GitHub पृष्ठ देखें।
आपके मार्ग पर काम करने का समय अपने मार्ग फाइल खोलें और नीचे मार्ग जोड़ें।
1 |
#config/routes.rb |
2 |
|
3 |
... |
4 |
get '/auth/:provider/callback', to: 'sessions#create' |
आपको अपने नेविगेशन के लिए ट्विटर साइन-इन के लिए लिंक जोड़ना होगा। अपनी नेविगेशन फाइल को खोलें और इसे देखने के लिए इसे ज़ूम करें।
1 |
<nav class="navbar navbar-default"> |
2 |
<div class="container-fluid"> |
3 |
<!-- Brand and toggle get grouped for better mobile display -->
|
4 |
<div class="navbar-header"> |
5 |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> |
6 |
<span class="sr-only">Toggle navigation</span> |
7 |
<span class="icon-bar"></span> |
8 |
<span class="icon-bar"></span> |
9 |
<span class="icon-bar"></span> |
10 |
</button>
|
11 |
<a class="navbar-brand" href="#">Tuts Social</a> |
12 |
</div>
|
13 |
<div class="collapse navbar-collapse" id="navbar-collapse"> |
14 |
<ul class="nav navbar-nav navbar-right"> |
15 |
<li><%= link_to 'Home', root_path %></li> |
16 |
<% if current_user %> |
17 |
<li>Signed in as <%= current_user.name %></li> |
18 |
<% else %> |
19 |
<li><%= link_to "Sign in with Twitter", "/auth/twitter" %></li> |
20 |
<% end %> |
21 |
</ul>
|
22 |
</div>
|
23 |
</div>
|
24 |
</nav>
|
उपरोक्त से, जब आप उपयोगकर्ता साइन इन नहीं हैं, तो आप ट्विटर के साथ लॉग इन करने के लिए लिंक दिखाना चाहते हैं।
सत्र बनाना
उपयोगकर्ताओं के लॉगिंग को संभालने के लिए आपको एक सत्र नियंत्रक की आवश्यकता होगी। अपने नियंत्रकों निर्देशिका में एक फ़ाइल बनाएँ; यह ऐसा कैसे दिखना चाहिए।
बनाने की क्रिया उपयोगकर्ताओं के लिए एक सत्र बनाने में मदद करता है ताकि वे आपके आवेदन में प्रवेश कर सकें। इसके बिना, उपयोगकर्ताओं के पास प्रवेश करने का कोई मतलब नहीं है।
1 |
#app/controllers/sessions_controller.rb |
2 |
|
3 |
class SessionsController < ApplicationController |
4 |
def create |
5 |
@user = User.find_or_create_from_auth_hash(auth_hash) |
6 |
session[:user_id] = @user.id |
7 |
redirect_to root_path |
8 |
end
|
9 |
|
10 |
protected
|
11 |
|
12 |
def auth_hash |
13 |
request.env['omniauth.auth'] |
14 |
end
|
15 |
end
|
आपको इस बिंदु पर एक current_user
विधि की आवश्यकता होगी यह आपको यह जांचने में मदद करेगा कि कोई उपयोगकर्ता लॉग इन या बाहर है या नहीं।
ओपन app/controllers/application_controller.rb
और निम्नलिखित जोड़ें।
1 |
#app/controllers/application_controller.rb |
2 |
|
3 |
... |
4 |
def current_user |
5 |
@current_user ||= User.find(session[:user_id]) if session[:user_id] |
6 |
end |
7 |
helper_method :current_user |
8 |
... |
उपयोगकर्ता मॉडल
अब अपने उपयोगकर्ताओं के लिए एक मॉडल तैयार करें। ऐसा करने के लिए कमांड चलाएं।
1 |
rails generated modoel User provider:string uid:string name:string token:string secret:string profile_image:string |
इससे माइग्रेशन फ़ाइल उत्पन्न होती है जो इस तरह दिखती है।
1 |
#xxxxxx_create_users.rb |
2 |
|
3 |
class CreateUsers < ActiveRecord::Migration[5.0] |
4 |
def change |
5 |
create_table :users do |t| |
6 |
t.string :provider |
7 |
t.string :uid |
8 |
t.string :name |
9 |
t.string :token |
10 |
t.string :secret |
11 |
t.string :profile_image |
12 |
|
13 |
t.timestamps
|
14 |
end
|
15 |
end
|
16 |
end
|
अब चलकर अपने डेटाबेस को माइग्रेट करें:
1 |
rake db:migrate |
अपना यूजर मॉडल खोलें और इसे इस तरह दिखें:
1 |
#app/models/user.rb |
2 |
|
3 |
class User < ApplicationRecord |
4 |
def self.find_or_create_from_auth_hash(auth_hash) |
5 |
user = where(provider: auth_hash.provider, uid: auth_hash.uid).first_or_create |
6 |
user.update( |
7 |
name: auth_hash.info.nickname, |
8 |
profile_image: auth_hash.info.image, |
9 |
token: auth_hash.credentials.token, |
10 |
secret: auth_hash.credentials.secret |
11 |
)
|
12 |
user
|
13 |
end
|
14 |
end
|
उपरोक्त कोड उपयोगकर्ता से संबंधित कुछ जानकारी संग्रहीत करता है इसमें उपयोगकर्ता के नाम, प्रोफाइल_इम, टोकन, और रहस्य शामिल हैं। यदि आपके आवेदन की आवश्यकता है, तो आप OmniAuth-Twitter पेज को देख सकते हैं।
सत्र हटाना
आपके आवेदन में, आप उपयोगकर्ताओं को लॉग आउट करने की क्षमता प्रदान करना चाहते हैं। आपको एक की आवश्यकता होगी destroy
अपने में कार्रवाई SessionsController
यह काम करने के लिए। फिर एक लिंक आपके नेविगेशन में जोड़ा जाएगा।
अपने SessionsController
को destroy
कार्रवाई जोड़ें।
1 |
#app/controllers/sessions_controller.rb |
2 |
|
3 |
... |
4 |
def destroy |
5 |
if current_user |
6 |
session.delete(:user_id) |
7 |
flash[:success] = "Sucessfully logged out!" |
8 |
end |
9 |
redirect_to root_path |
10 |
end |
11 |
... |
फिर अपने नेविगेशन में लॉगिंग के लिए इस लिंक को जोड़ें, ताकि आपका नेविगेशन इस तरह दिखता है।
1 |
#app/views/layouts/_navigation.html.erb |
2 |
|
3 |
<nav class="navbar navbar-default"> |
4 |
<div class="container-fluid"> |
5 |
<!-- Brand and toggle get grouped for better mobile display -->
|
6 |
<div class="navbar-header"> |
7 |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> |
8 |
<span class="sr-only">Toggle navigation</span> |
9 |
<span class="icon-bar"></span> |
10 |
<span class="icon-bar"></span> |
11 |
<span class="icon-bar"></span> |
12 |
</button>
|
13 |
<a class="navbar-brand" href="#">Tuts Social</a> |
14 |
</div>
|
15 |
<div class="collapse navbar-collapse" id="navbar-collapse"> |
16 |
<ul class="nav navbar-nav navbar-right"> |
17 |
<li><%= link_to 'Home', root_path %></li> |
18 |
<% if current_user %> |
19 |
<li>Signed in as <%= current_user.name %></li> |
20 |
<li><%= link_to 'Log Out', logout_path, method: :delete %></li> |
21 |
<% else %> |
22 |
<li><%= link_to "Sign in with Twitter", "/auth/twitter" %></li> |
23 |
<% end %> |
24 |
</ul>
|
25 |
</div>
|
26 |
</div>
|
27 |
</nav>
|
फिर अपने नेविगेशन में लॉगिंग के लिए इस लिंक को जोड़ें, ताकि आपका नेविगेशन इस तरह दिखता है ।
1 |
#config/routes.rb |
2 |
|
3 |
... |
4 |
delete '/logout', to: 'sessions#destroy' |
5 |
... |
अपने रेल सर्वर को प्रारंभ करें और अपने ब्राउजर को http: // localhost: 3000 पर देखने के लिए देखें कि आपके पास क्या है।
निष्कर्ष
इस ट्यूटोरियल में आपने सीख लिया है कि ओमनीआथ-ट्विटर को अपने रेल एप्लीकेशन में कैसे सक्षम किया जाए। आपने देखा है कि OmniAuth-Twitter का उपयोग करने वाले उपयोगकर्ताओं का डेटा कैसे प्राप्त करें, जो आपने अपने यूजर मॉडल में किया था। आप अपने आवेदन से उपयोगकर्ताओं के लॉगिंग को संभालने के लिए SessionControllers
बनाने में सक्षम थे।
मुझे उम्मीद है आपने इसका आनंद लिया। भविष्य में, आप देखेंगे कि फेसबुक, गूगल और लिंक्डइन के लिए ऐसा कैसे करना है।