এই টিউটোরিয়ালে, আপনি শিখবেন কিভাবে আপনার অ্যাপ্লিকেশনের ব্যবহারকারীদের তাদের টুইটার অ্যাকাউন্ট দিয়ে লগইন করতে দেওয়া যায়। OAuth-এর কারণে এটি করা খুব সহজ হয়েছে।
আপনি OmniAuth-Twitter ব্যবহার করবেন, যাতে OmniAuth-এর জন্য টুইটার কৌশল (strategy) থাকে।
চলুন শুরু করি!
শুরু করা
টার্মিনাল থেকে রেইলস অ্যাপ্লিকেশন জেনারেট করুন:
rails new Tuts-Social -T
Gemfile খুলুন এবং bootstrap জেম যোগ করুন।
#Gemfile ... gem 'bootstrap-sass'
জেম ইনস্টল করুন:
bundle install
app/assets/stylesheets/application.css-কে app/assets/stylesheets/application.scss-এ রিনেম করুন।
完了後, Bootstrap ইমপোর্ট করার জন্য নিচের কোড যোগ করুন।
#app/assets/stylesheets/application.scss ... @import 'bootstrap-sprockets'; @import 'bootstrap';
_navigation.html.erb নামে একটি পার্শিয়াল তৈরি করুন নেভিগেশন কোড রাখতে; এটি app/views/layouts ডিরেক্টরিতে থাকবে।
নিচের কোডটি IDE-তে পেস্ট করুন। এটি Bootstrap ব্যবহার করে আপনার অ্যাপ্লিকেশনের জন্য একটি নেভিগেশন বার তৈরি করে।
#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 index একশনের সাথে জেনারেট করুন।
rails generate controller Pages index
জেনারেট হওয়া 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 ক্লাস ব্যবহার করা হয়েছে—এটি একটি Bootstrap কম্পোনেন্ট যা ভিউপোর্টকে প্রসারিত করে মার্কেটিং মেসেজ দেখাতে। এর সম্পর্কে আরও জানতে Bootstrap ডকুমেন্টেশন দেখুন।
রাউট ফাইল খুলুন 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" কারণ আপনি ইনিশিয়ালাইজারে এটিকে লিস্ট করবেন।
Gemfile খুলুন omniauth-twitter জেম যোগ করতে।
#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 ... 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>
উপরে থেকে, আপনি টুইটার দিয়ে লগইন লিংকটি শুধু তখন দেখাবেন যখন ইউজার সাইন-ইন না থাকে।
সেশন তৈরি করা
ইউজার লগইন হ্যান্ডেল করার জন্য একটি সেশন কন্ট্রোলার লাগবে। আপনার কন্ট্রোলার্স ডিরেক্টরিতে একটি ফাইল তৈরি করুন; এর সूरत নিচের মতো হবে।
create অ্যাকশন ইউজারদের জন্য সেশন তৈরি করে যাতে তারা আপনার অ্যাপ্লিকেশনে লগইন করতে পারে। এটি না থাকলে ইউজাররা লগইন করতে পারবে না।
#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 ...
ইউজার মডেল
এখন আপনার Users-র জন্য একটি মডেল জেনারেট করুন। এর জন্য কমান্ড চালান।
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
উপরের কোড ব্যবহারকারীর কিছু তথ্য সংরক্ষণ করে। এতে নাম, প্রোফাইল ইমেজ, টোকেন, এবং সিক্রেট থাকে। আপনার অ্যাপ্লিকেশনে এর চেয়ে বেশি প্রয়োজন হলে OmniAuth-Twitter পেজ দেখুন।
সেশন ডিলিট করা
আপনার অ্যাপ্লিকেশনে, আপনি ব্যবহারকারীদের লগ আউট করার ক্ষমতা দিতে চান। এর জন্য SessionsController-এ একটি destroy অ্যাকশন লাগবে। তারপর নেভিগেশনে একটি লিংক যোগ করব।
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 খুলুন আপনার রাউট আপডেট করতে নতুন অ্যাকশনের সাথে।
#config/routes.rb ... delete '/logout', to: 'sessions#destroy' ...
রেইলস সার্ভার চালু করুন এবং ব্রাউজারে https://localhost:3000 যান দেখতে কী হয়েছে।
উপসংহার
এই টিউটোরিয়ালে আপনি শিখেছেন কিভাবে আপনার রেইলস অ্যাপ্লিকেশনে OmniAuth-Twitter সক্ষম করতে হয়। আপনি দেখেছেন OmniAuth-Twitter ব্যবহার করে ইউজার ডেটা কীভাবে পেতে হয়, যা আপনি User মডেলে করলেন। আপনি SessionControllers তৈরি করতে পেরেছেন যাতে ইউজাররা আপনার অ্যাপ্লিকেশন থেকে লগইন ও লগ আউট করতে পারে।
আশা করি আপনি উপভোগ করেছেন। ভবিষ্যতে আপনি ফেসবুক, গুগল, এবং লিংকডইনের জন্য একই কাজ কীভাবে করতে হয় সেটি দেখবেন।
