इस ट्यूटोरियल में, आप सीखेंगे कि अपने एप्लिकेशन के उपयोगकर्ताओं को उनके ट्विटर खाते का उपयोग करके लॉग इन करने की अनुमति कैसे दें। OAuth जैसे टूल के साथ ऐसा करना आसान हो गया है।
आप OmniAuth-Twitter का उपयोग करेंगे, जिसमें OmniAuth के लिए ट्विटर रणनीति शामिल है।
चलिए शुरू करते हैं!
शुरुआत करना
अपना Rails एप्लिकेशन जनरेट करके शुरू करें। अपने टर्मिनल से, ऐसा करने के लिए कमांड चलाएं:
rails new Tuts-Social -T
अपना Gemfile खोलें और बूटस्ट्रैप जेम जोड़ें।
#Gemfile ... gem 'bootstrap-sass'
कमांड चलाकर जेम इंस्टॉल करें:
bundle install
app/assets/stylesheets/application.css का नाम बदलकर app/assets/stylesheets/application.scss करें।
जब हो जाए, तो बूटस्ट्रैप आयात करने के लिए निम्न कोड लाइनें जोड़ें।
#app/assets/stylesheets/application.scss ... @import 'bootstrap-sprockets'; @import 'bootstrap';
_navigation.html.erb नामक एक पार्शियल बनाएं जो आपके नेविगेशन कोड को रखेगा; पार्शियल app/views/layouts निर्देशिका में स्थित होना चाहिए।
नीचे दिए गए कोड को एक IDE में दर्ज करें। यह आपके एप्लिकेशन के लिए नेविगेशन बार बनाने के लिए बूटस्ट्रैप का उपयोग करता है।
#app/views/layouts/_navigation.html.erb
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<%= link_to 'Tuts Social', root_path, class: 'navbar-brand' %>
</div>
<div id="navbar">
<ul class="nav navbar-nav pull-right">
<li><%= link_to 'Home', root_path %></li>
</ul>
</div>
</div>
</nav>
नेविगेशन का उपयोग करने के लिए, आपको इसे अपने एप्लिकेशन लेआउट में रेंडर करना होगा। अपने एप्लिकेशन लेआउट को नीचे दिए गए जैसा बनाएं।
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Tuts Social</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render "layouts/navigation" %>
<div id="flash">
<% flash.each do |key, value| %>
<div class="flash <%= key %>"><%= value %></div>
<% end %>
</div>
<div class="container-fluid">
<%= yield %>
</div>
</body>
</html>
नीचे दिए गए कमांड को अपने टर्मिनल में दर्ज करके इंडेक्स एक्शन के साथ एक PagesController जनरेट करें।
rails generate controller Pages index
जनरेट किए गए इंडेक्स व्यू में, इसे नीचे दिए गए जैसा दिखने के लिए संपादित करें।
#app/views/pages/index.html.erb <div class="jumbotron"> <h1>Welcome to Tuts Social!</h1> <p>Thanks for checking us out!</p> </div>
उपरोक्त कोड में, हम jumbotron नामक एक क्लास का उपयोग करते हैं—यह एक बूटस्ट्रैप घटक है जो हमें मार्केटिंग संदेश को प्रदर्शित करने के लिए व्यूपोर्ट को विस्तारित करने की अनुमति देता है। आप इसके बारे में बूटस्ट्रैप दस्तावेज़ीकरण से अधिक जान सकते हैं।
अपना रूट्स फ़ाइल खोलें ताकि आप अपना root_path जोड़ सकें।
#config/routes.rb Rails.application.routes.draw do # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html root to: "pages#index" end
OmniAuth-Twitter सेट करना
आपको एक नया ट्विटर एप्लिकेशन बनाना होगा। एक बनाने के लिए ट्विटर डेवलपर पेज पर इस पेज पर जाएं। स्क्रीनशॉट में मेरे जैसा सभी आवश्यक विवरण दर्ज करें।
कॉलबैक URL के लिए, अपना वेबसाइट पता प्लस "auth/twitter/callback" दर्ज करें। यदि आप स्थानीय मशीन पर हैं, तो आपका कॉलबैक URL यह होना चाहिए: https://127.0.0.1:3000/auth/twitter/callback।
आपको ट्विटर पर ऐप के सूचना पृष्ठ पर रीडायरेक्ट किया जाएगा। Keys and Access Tokens टैब पर जाएं अपनी कुंजी प्राप्त करने के लिए। Consumer Key और Consumer Secret को कॉपी करें और उन्हें एक सुरक्षित स्थान पर पेस्ट करें—हम जल्द ही उनका उपयोग करेंगे।
कॉलबैक URL वह URL है जहां सफल प्रमाणीकरण और अनुमोदित प्राधिकरण के बाद उपयोगकर्ता को ऐप के अंदर रीडायरेक्ट किया जाएगा (अनुरोध में उपयोगकर्ता का डेटा और टोकन भी होगा)। सभी OmniAuth रणनीतियां कॉलबैक URL की अपेक्षा करती हैं जो "/auth/:provider/callback" के बराबर हो। :provider रणनीति का नाम लेता है। इस मामले में, रणनीति "twitter" होगी जैसा कि आप इनिशियलाइज़र में सूचीबद्ध करेंगे।
OmniAuth-Twitter जेम जोड़ने के लिए अपना Gemfile खोलें।
#Gemfile ... gem 'omniauth-twitter'
अब अपने config/initializers निर्देशिका में OmniAuth के लिए एक इनिशियलाइज़र बनाएं। यह OmniAuth के लिए कॉन्फ़िगरेशन रखेगा। इसे नीचे दिए गए जैसा बनाएं।
#config/initializers/omniauth.rb Rails.application.config.middleware.use OmniAuth::Builder do provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET'] end
इस बिंदु पर आपको उन कुंजियों और एक्सेस टोकन का उपयोग करने की आवश्यकता होगी जिन्हें आपने सुरक्षित रूप से संग्रहीत किया था। आपको इन्हें सुरक्षित रखने की आवश्यकता है क्योंकि आप नहीं चाहते कि जब आप अपना कोड कमिट करें तो वे एक सार्वजनिक रिपॉजिटरी में पुश हों।
आप इसके लिए एक जेम का उपयोग करेंगे। अपना Gemfile फिर से खोलें और नीचे दिए गए जेम को जोड़ें। इसे अपने Gemfile में इस तरह जोड़ें:
#Gemfile ... group :development, :test do ... gem 'dotenv-rails' ...
जेम इंस्टॉल करने के लिए चलाएं।
bundle install
अपने एप्लिकेशन की होम निर्देशिका में, .env नामक एक फ़ाइल बनाएं।
इसे खोलें और अपनी कुंजी और टोकन इस तरह जोड़ें:
#.env TWITTER_KEY=xxxxxxxxxxxxxx TWITTER_SECRET=xxxxxxxxxxxxxx
.gitignore खोलें और आपके द्वारा बनाई गई फ़ाइल को जोड़ें।
#.gitignore ... # Ignore .env used for storing keys and access tokens .env
इसके साथ, आपकी कुंजी और एक्सेस टोकन सुरक्षित हैं! dotenv-rails का उपयोग कैसे करें, इस बारे में अधिक जानने के लिए, GitHub पेज देखें।
अपने रूट पर काम करने का समय। अपना रूट्स फ़ाइल खोलें और नीचे दिया गया रूट जोड़ें।
#config/routes.rb ... get '/auth/:provider/callback', to: 'sessions#create'
आपको अपने नेविगेशन में ट्विटर साइन-इन का लिंक जोड़ना होगा। अपना नेविगेशन फ़ाइल खोलें और इसे नीचे दिए गए जैसा बनाएं।
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tuts Social</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Home', root_path %></li>
<% if current_user %>
<li>Signed in as <%= current_user.name %></li>
<% else %>
<li><%= link_to "Sign in with Twitter", "/auth/twitter" %></li>
<% end %>
</ul>
</div>
</div>
</nav>
उपरोक्त से, आप ट्विटर से लॉग इन करने का लिंक केवल तभी दिखाना चाहते हैं जब उपयोगकर्ता साइन इन न हो।
सत्र बनाना
उपयोगकर्ताओं के लॉग इन को संभालने के लिए आपको एक सत्र कंट्रोलर की आवश्यकता होगी। अपने कंट्रोलर निर्देशिका में इसके लिए एक फ़ाइल बनाएं; यह इस तरह दिखना चाहिए।
क्रिएट एक्शन उपयोगकर्ताओं के लिए एक सत्र बनाने में मदद करता है ताकि वे आपके एप्लिकेशन में लॉग इन हो सकें। इसके बिना, उपयोगकर्ताओं के पास लॉग इन करने का कोई साधन नहीं है।
#app/controllers/sessions_controller.rb
class SessionsController < ApplicationController
def create
@user = User.find_or_create_from_auth_hash(auth_hash)
session[:user_id] = @user.id
redirect_to root_path
end
protected
def auth_hash
request.env['omniauth.auth']
end
end
इस बिंदु पर आपको एक current_user विधि की आवश्यकता होगी। यह आपको जांचने में मदद करेगा कि कोई उपयोगकर्ता लॉग इन है या आउट।
app/controllers/application_controller.rb खोलें और निम्न जोड़ें।
#app/controllers/application_controller.rb ... def current_user @current_user ||= User.find(session[:user_id]) if session[:user_id] end helper_method :current_user ...
उपयोगकर्ता मॉडल
अब अपने उपयोगकर्ताओं के लिए एक मॉडल जनरेट करें। ऐसा करने के लिए कमांड चलाएं।
rails generate model User provider:string uid:string name:string token:string secret:string profile_image:string
यह एक माइग्रेशन फ़ाइल जनरेट करेगा जो इस तरह दिखती है।
#xxxxxx_create_users.rb
class CreateUsers < ActiveRecord::Migration[5.0]
def change
create_table :users do |t|
t.string :provider
t.string :uid
t.string :name
t.string :token
t.string :secret
t.string :profile_image
t.timestamps
end
end
end
अब निम्न चलाकर अपना डेटाबेस माइग्रेट करें:
rake db:migrate
अपना User मॉडल खोलें और इसे इस तरह बनाएं:
#app/models/user.rb
class User < ApplicationRecord
def self.find_or_create_from_auth_hash(auth_hash)
user = where(provider: auth_hash.provider, uid: auth_hash.uid).first_or_create
user.update(
name: auth_hash.info.nickname,
profile_image: auth_hash.info.image,
token: auth_hash.credentials.token,
secret: auth_hash.credentials.secret
)
user
end
end
उपरोक्त कोड उपयोगकर्ता से संबंधित कुछ जानकारी संग्रहीत करता है। इसमें उपयोगकर्ता का नाम, profile_image, टोकन और सीक्रेट शामिल हैं। यदि आपके एप्लिकेशन को इससे अधिक की आवश्यकता है, तो आप OmniAuth-Twitter पेज देख सकते हैं।
सत्र हटाना
अपने एप्लिकेशन में, आप उपयोगकर्ताओं को लॉग आउट करने की क्षमता प्रदान करना चाहते हैं। इसके लिए आपको अपने SessionsController में एक destroy एक्शन की आवश्यकता होगी। फिर एक लिंक आपके नेविगेशन में जोड़ा जाएगा।
destroy एक्शन को अपने SessionsController में जोड़ें।
#app/controllers/sessions_controller.rb
...
def destroy
if current_user
session.delete(:user_id)
flash[:success] = "Successfully logged out!"
end
redirect_to root_path
end
...
फिर लॉग आउट करने के लिए इस लिंक को अपने नेविगेशन में जोड़ें, ताकि आपका नेविगेशन इस तरह दिखे।
#app/views/layouts/_navigation.html.erb
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tuts Social</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Home', root_path %></li>
<% if current_user %>
<li>Signed in as <%= current_user.name %></li>
<li><%= link_to 'Log Out', logout_path, method: :delete %></li>
<% else %>
<li><%= link_to "Sign in with Twitter", "/auth/twitter" %></li>
<% end %>
</ul>
</div>
</div>
</nav>
अपना config/routes.rb खोलें ताकि आपके द्वारा अभी बनाए गए एक्शन के साथ अपने रूट अपडेट कर सकें।
#config/routes.rb ... delete '/logout', to: 'sessions#destroy' ...
अपना रेल्स सर्वर शुरू करें और यह देखने के लिए अपने ब्राउज़र को https://localhost:3000 पर इंगित करें कि आपके पास क्या है।
निष्कर्ष
इस ट्यूटोरियल में आपने सीखा कि अपने Rails एप्लिकेशन में OmniAuth-Twitter को कैसे सक्षम करें। आपने देखा कि OmniAuth-Twitter का उपयोग करके उपयोगकर्ताओं का डेटा कैसे प्राप्त करें, जिसे आपने अपने User मॉडल में किया। आप SessionControllers बनाने में सक्षम थे जो आपके एप्लिकेशन से उपयोगकर्ताओं के लॉग इन और आउट को संभालते हैं।
मुझे आशा है कि आपको यह पसंद आया। भविष्य में, आप देखेंगे कि फेसबुक, गूगल और लिंक्डइन के लिए भी ऐसा ही कैसे करें।
