पटरियों (Rails) के अनुप्रयोग में ओमनीआथ-ट्विटर का उपयोग कैसे करें

Hindi (हिंदी) translation by Shubham Sharma (you can also view the original English article)

इस ट्यूटोरियल में, आप सीखेंगे कि आपके ऐप्लिकेशन के उपयोगकर्ताओं को उनके ट्विटर अकाउंट का उपयोग करने में कैसे प्रवेश करना है। ऐसा करने से उपकरण जैसे ओएथ के साथ आसान बना दिया गया है

आप OmniAuth-Twitter का उपयोग करेंगे, जिसमें OmniAuth के लिए ट्विटर की रणनीति शामिल है

चलो चलें!

प्रारंभ करना

अपने रेल एप्लिकेशन को शुरू करने से शुरू करें अपने टर्मिनल से, ऐसा करने के लिए कमांड चलाएं:

rails new Tuts-Social -T

अपने Gemfile को खोलें और बूटस्ट्रैप मणि जोड़ें।

#Gemfile
...

gem 'bootstrap-sass'

कमांड चलाकर मणि स्थापित करें:

bundle install

app/assets/stylesheets/application.css को app/assets/stylesheets/application.scs.

जब किया जाए, तो बूटस्ट्रैप आयात करने के लिए कोड की निम्न पंक्तियां जोड़ें।

#app/assets/stylesheets/application.scss
...
@import 'bootstrap-sprockets';
@import 'bootstrap';

नाम का आंशिक नाम बनाएँ _navigation.html.erb अपना नेविगेशन कोड रखने के लिए; आंशिक में स्थित होना चाहिए app/views/layouts निर्देशिका।

नीचे एक आईडीई में कोड दर्ज करें यह आपके एप्लिकेशन के लिए एक नेविगेशन बार बनाने के लिए बूटस्ट्रैप का उपयोग करता है।

#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 generated 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 http://guides.rubyonrails.org/routing.html

  root to: "pages#index"
end

OmniAuth-Twitter को सेट करना

आपको एक नया ट्विटर एप्लिकेशन बनाने की आवश्यकता है यह पन्ना के लिए ट्विटर डेवलपर पृष्ठ में इस पृष्ठ पर जाएं नीचे दिए गए स्क्रीनशॉट में मेरे पास जितने आवश्यक विवरण, सभी को दर्ज करें।

कॉलबैक URL के लिए, अपनी वेबसाइट का पता और "auth / twitter / callback" दर्ज करें। यदि आप स्थानीय मशीन पर होते हैं, तो आपके कॉलबैक यूआरएल को यह होना चाहिए:http://127.0.0.1:3000/auth/twitter/callback

आपको ट्विटर पर ऐप के सूचना पृष्ठ पर पुनर्निर्देशित किया जाएगा। अपनी चाबियाँ प्राप्त करने के लिए कुंजी और एक्सेस टोकन टैब पर नेविगेट करें। उपभोक्ता कुंजी और उपभोक्ता रहस्य की प्रतिलिपि बनाएं और उन्हें एक सुरक्षित स्थान पर पेस्ट करें- हम उनको शीघ्र ही उपयोग करेंगे।

कॉलबैक यूआरएल यूआरएल है जहां सफल प्रमाणीकरण और अनुमोदित प्राधिकरण के बाद एक उपयोगकर्ता को ऐप के अंदर पुनर्निर्देशित किया जाएगा (अनुरोध में उपयोगकर्ता के डेटा और टोकन भी शामिल होंगे)। सभी OmniAuth रणनीतियों को कॉलबैक यूआरएल के समान होने की उम्मीद है “/auth/:provider/callback”. :provider रणनीति का नाम लेता है इस मामले में, रणनीति "ट्विटर" होगी, जैसा कि आप आरंभकर्ता में सूचीबद्ध करेंगे।

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'
...

मणि स्थापित (Install gem) करने के लिए, चलाएँ।

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 generated modoel 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

अपना यूजर मॉडल खोलें और इसे इस तरह दिखें:

#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

उपरोक्त कोड उपयोगकर्ता से संबंधित कुछ जानकारी संग्रहीत करता है इसमें उपयोगकर्ता के नाम, प्रोफाइल_इम, टोकन, और रहस्य शामिल हैं। यदि आपके आवेदन की आवश्यकता है, तो आप OmniAuth-Twitter पेज को देख सकते हैं।

सत्र हटाना

आपके आवेदन में, आप उपयोगकर्ताओं को लॉग आउट करने की क्षमता प्रदान करना चाहते हैं। आपको एक की आवश्यकता होगी destroy अपने में कार्रवाई SessionsController यह काम करने के लिए। फिर एक लिंक आपके नेविगेशन में जोड़ा जाएगा।

अपने SessionsController को destroy कार्रवाई जोड़ें।

#app/controllers/sessions_controller.rb

...
  def destroy
    if current_user
      session.delete(:user_id)
      flash[:success] = "Sucessfully 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

...
  delete '/logout', to: 'sessions#destroy'
...

अपने रेल सर्वर को प्रारंभ करें और अपने ब्राउजर को http: // localhost: 3000 पर देखने के लिए देखें कि आपके पास क्या है।

निष्कर्ष

इस ट्यूटोरियल में आपने सीख लिया है कि ओमनीआथ-ट्विटर को अपने रेल एप्लीकेशन में कैसे सक्षम किया जाए। आपने देखा है कि OmniAuth-Twitter का उपयोग करने वाले उपयोगकर्ताओं का डेटा कैसे प्राप्त करें, जो आपने अपने यूजर मॉडल में किया था। आप अपने आवेदन से उपयोगकर्ताओं के लॉगिंग को संभालने के लिए SessionControllers बनाने में सक्षम थे।

मुझे उम्मीद है आपने इसका आनंद लिया। भविष्य में, आप देखेंगे कि फेसबुक, गूगल और लिंक्डइन के लिए ऐसा कैसे करना है।