home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Ruby

วิธีใช้ OmniAuth-Twitter ในแอปพลิเคชัน Rails

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีอนุญาตให้ผู้ใช้แอปพลิเคชันของคุณเข้าสู่ระบบโดยใช้บัญชี Twitter การทำเช่นนี้ทำได้ง่ายด้วยเครื่องมือต่างๆ เช่น OAuth

คุณจะใช้ประโยชน์จาก OmniAuth-Twitter ซึ่งมีกลยุทธ์ Twitter สำหรับ OmniAuth

มาดำน้ำกันเถอะ!

การเริ่มต้นใช้งาน

เริ่มต้นด้วยการสร้างแอปพลิเคชัน Rails ของคุณ จากเทอร์มินัลของคุณ ให้รันคำสั่งเพื่อทำสิ่งนี้:

rails new Tuts-Social -T

เปิด Gemfile ของคุณและเพิ่ม bootstrap gem

#Gemfile
...

gem 'bootstrap-sass'

ติดตั้ง gem โดยรันคำสั่ง:

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 ไดเรกทอรี

ป้อนรหัสด้านล่างลงใน 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 ด้วยการดำเนินการดัชนีโดยป้อนคำสั่งด้านล่างลงในเทอร์มินัลของคุณ

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 —นี่คือองค์ประกอบ Bootstrap ที่ช่วยให้เราขยายวิวพอร์ตเพื่อแสดงข้อความทางการตลาด ดูข้อมูลเพิ่มเติมได้จากเอกสารประกอบ Bootstrap

เปิดไฟล์เส้นทางของคุณเพื่อเพิ่ม 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

คุณต้องสร้างแอปพลิเคชัน Twitter ใหม่ ไปที่หน้านี้ในหน้านักพัฒนา Twitter เพื่อสร้าง ป้อนรายละเอียดที่จำเป็นทั้งหมด คล้ายกับที่ฉันมีในภาพหน้าจอด้านล่าง

วิธีใช้ OmniAuth-Twitter ในแอปพลิเคชัน Rails วิธีใช้ OmniAuth-Twitter ในแอปพลิเคชัน Rails วิธีใช้ OmniAuth-Twitter ในแอปพลิเคชัน Rails

สำหรับ URL โทรกลับ ให้ป้อนที่อยู่เว็บไซต์ของคุณพร้อม "auth/twitter/callback" หากคุณอยู่ในเครื่องท้องถิ่น URL โทรกลับของคุณควรเป็นดังนี้:http://127.0.0.1:3000/auth/twitter/callback .

คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าข้อมูลของแอพบน Twitter ไปที่ คีย์และโทเค็นการเข้าถึง เพื่อรับกุญแจของคุณ คัดลอกรหัสผู้บริโภคและข้อมูลลับของผู้บริโภค และวางไว้ในที่ปลอดภัย เราจะนำไปใช้ในไม่ช้า

URL โทรกลับคือ URL ที่ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังภายในแอปหลังจากตรวจสอบสิทธิ์สำเร็จและให้สิทธิ์ที่ได้รับอนุมัติแล้ว (คำขอจะมีข้อมูลและโทเค็นของผู้ใช้ด้วย) กลยุทธ์ OmniAuth ทั้งหมดคาดว่า URL การโทรกลับจะเท่ากับ “/auth/:provider/callback” :provider ใช้ชื่อของกลยุทธ์ ในกรณีนี้ กลยุทธ์จะเป็น "twitter" ตามที่คุณระบุไว้ในตัวเริ่มต้น

เปิด Gemfile . ของคุณ เพื่อเพิ่ม omniauth - twiiter พลอย

#Gemfile
...

gem 'omniauth-twitter'

ตอนนี้สร้างตัวเริ่มต้นสำหรับ OmniAuth ในไดเร็กทอรี config/initializers ของคุณ ซึ่งจะเก็บการกำหนดค่าสำหรับ 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'

คุณต้องเพิ่มลิงก์สำหรับการลงชื่อเข้าใช้ Twitter ในการนำทางของคุณ เปิดไฟล์การนำทางแล้วปรับแต่งให้มีลักษณะดังนี้

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

จากด้านบนนี้ คุณต้องการแสดงลิงก์เพื่อเข้าสู่ระบบด้วย Twitter เฉพาะเมื่อผู้ใช้ไม่ได้ลงชื่อเข้าใช้

การสร้างเซสชัน

คุณจะต้องมีตัวควบคุมเซสชันเพื่อจัดการการเข้าสู่ระบบของผู้ใช้ สร้างไฟล์สำหรับสิ่งนั้นในไดเร็กทอรีคอนโทรลเลอร์ของคุณ หน้าตาก็จะประมาณนี้

การดำเนินการสร้างช่วยสร้างเซสชันสำหรับผู้ใช้เพื่อให้สามารถเข้าสู่ระบบแอปพลิเคชันของคุณได้ หากไม่มีสิ่งนี้ ผู้ใช้จะไม่สามารถเข้าสู่ระบบได้

#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

รหัสด้านบนเก็บข้อมูลบางอย่างที่เป็นของผู้ใช้ ซึ่งรวมถึงชื่อ profile_image โทเค็น และข้อมูลลับของผู้ใช้ หากแอปพลิเคชันของคุณต้องการมากกว่านี้ คุณสามารถตรวจสอบหน้า OmniAuth-Twitter

การลบเซสชัน

ในแอปพลิเคชันของคุณ คุณต้องการให้ผู้ใช้สามารถออกจากระบบได้ คุณจะต้องมี destroy การกระทำใน SessionsController . ของคุณ เพื่อให้สิ่งนี้ได้ผล จากนั้นระบบจะเพิ่มลิงก์ไปยังการนำทางของคุณ

เพิ่ม destroy การดำเนินการกับ SessionsController . ของคุณ .

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

เปิดเซิร์ฟเวอร์ Rails ของคุณและเปิดเบราว์เซอร์ไปที่ http://localhost:3000 เพื่อดูว่าคุณมีอะไรบ้าง

บทสรุป

ในบทช่วยสอนนี้ คุณได้เรียนรู้วิธีเปิดใช้งาน OmniAuth-Twitter ในแอปพลิเคชัน Rails ของคุณ คุณเห็นวิธีรับข้อมูลของผู้ใช้โดยใช้ OmniAuth-Twitter ซึ่งคุณทำในรูปแบบผู้ใช้ของคุณ คุณสามารถสร้าง SessionControllers เพื่อจัดการการเข้าสู่ระบบและออกจากระบบของผู้ใช้จากแอปพลิเคชันของคุณ

ฉันหวังว่าคุณจะสนุกกับมัน ในอนาคต คุณจะเห็นวิธีทำเช่นเดียวกันกับ Facebook, Google และ LinkedIn