Computer >> Máy Tính >  >> Lập trình >> Ruby

Cách sử dụng OmniAuth-Twitter trong ứng dụng Rails

Trong hướng dẫn này, bạn sẽ học cách cho phép người dùng ứng dụng của bạn đăng nhập bằng tài khoản Twitter của họ. Thực hiện điều này dễ dàng với các công cụ như OAuth.

Bạn sẽ sử dụng OmniAuth-Twitter, chứa chiến lược Twitter cho OmniAuth.

Hãy đi sâu vào!

Bắt đầu

Bắt đầu bằng cách tạo ứng dụng Rails của bạn. Từ thiết bị đầu cuối của bạn, hãy chạy lệnh để làm như vậy:

rails new Tuts-Social -T

Mở Gemfile của bạn và thêm đá quý bootstrap. 

#Gemfile
...

gem 'bootstrap-sass'

Cài đặt đá quý bằng cách chạy lệnh:

bundle install

Đổi tên app/assets/stylesheets/application.css tới app/assets/stylesheets/application.scs .

Khi hoàn tất, hãy thêm các dòng mã sau để nhập bootstrap. 

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

Tạo một phần có tên _navigation.html.erb để giữ mã điều hướng của bạn; phần này phải được đặt trong app/views/layouts thư mục.

Nhập mã bên dưới vào IDE. Nó sử dụng Bootstrap để tạo thanh điều hướng cho ứng dụng của bạn. 

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

Để điều hướng được sử dụng, bạn cần kết xuất nó trong bố cục ứng dụng của mình. Chỉnh sửa bố cục ứng dụng của bạn để trông giống như những gì tôi có bên dưới. 

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

Tạo PagesController với hành động lập chỉ mục bằng cách nhập lệnh bên dưới vào thiết bị đầu cuối của bạn. 

rails generated controller Pages index

Trong các chế độ xem chỉ mục được tạo, hãy chỉnh sửa nó để trông giống như thế này. 

#app/views/pages/index.html.erb 

<div class="jumbotron">
  <h1>Welcome to Tuts Social!</h1>
  <p>Thanks for checking us out!</p>
</div>

Trong đoạn mã trên, chúng tôi sử dụng một lớp có tên là jumbotron —Đây là một thành phần Bootstrap cho phép chúng tôi mở rộng khung nhìn để giới thiệu thông điệp tiếp thị. Bạn có thể tìm thêm về nó từ tài liệu Bootstrap.

Mở tệp tuyến đường của bạn để thêm root_path của bạn . 

#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

Thiết lập OmniAuth-Twitter

Bạn cần tạo một ứng dụng Twitter mới. Truy cập trang này trong trang Twitter Developer để tạo một trang. Nhập tất cả các chi tiết cần thiết, tương tự như những gì tôi có trong ảnh chụp màn hình bên dưới.

Cách sử dụng OmniAuth-Twitter trong ứng dụng Rails Cách sử dụng OmniAuth-Twitter trong ứng dụng Rails Cách sử dụng OmniAuth-Twitter trong ứng dụng Rails

Đối với URL gọi lại, hãy nhập địa chỉ trang web của bạn cùng với "auth / twitter / callback". Nếu bạn đang sử dụng một máy cục bộ, URL gọi lại của bạn phải là:https://127.0.0.1:3000/auth/twitter/callback .

Bạn sẽ được chuyển hướng đến trang thông tin của ứng dụng trên Twitter. Điều hướng đến Chìa khóa và Mã thông báo truy cập tab để lấy chìa khóa của bạn. Sao chép Khóa người tiêu dùng và Bí mật người tiêu dùng và dán chúng vào một nơi an toàn — chúng tôi sẽ sớm sử dụng chúng.

URL gọi lại là URL mà người dùng sẽ được chuyển hướng đến bên trong ứng dụng sau khi xác thực thành công và ủy quyền được phê duyệt (yêu cầu cũng sẽ chứa dữ liệu và mã thông báo của người dùng). Tất cả các chiến lược OmniAuth đều mong đợi URL gọi lại bằng “/ auth /:nhà cung cấp / gọi lại”. :provider lấy tên của chiến lược. Trong trường hợp này, chiến lược sẽ là "twitter" như bạn sẽ liệt kê trong trình khởi tạo.

Mở Gemfile của bạn để thêm omniauth - twiiter đá quý. 

#Gemfile
...

gem 'omniauth-twitter'

Bây giờ, hãy tạo trình khởi tạo cho OmniAuth trong thư mục config / initializers của bạn. Thao tác này sẽ giữ cấu hình cho OmniAuth. Làm cho nó giống như những gì tôi có bên dưới. 

#config/initializers/omniauth.rb

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET']
end

Tại thời điểm này, bạn sẽ cần sử dụng các khóa và mã thông báo truy cập mà bạn đã lưu trữ một cách an toàn. Bạn cần giữ chúng an toàn vì bạn không muốn đẩy chúng vào kho lưu trữ công khai khi bạn cam kết mã của mình.

Bạn sẽ sử dụng một viên đá quý cho việc này. Mở lại Gemfile của bạn và thêm đá quý bên dưới. Thêm nó vào Gemfile của bạn như sau:

#Gemfile

...
group :development, :test do
  ...
  gem 'dotenv-rails'
...

Để cài đặt gem, hãy chạy. 

bundle install

Trong thư mục chính của ứng dụng của bạn, hãy tạo một tệp có tên .env .

Mở nó và thêm các khóa và mã thông báo của bạn như sau:

#.env

TWITTER_KEY=xxxxxxxxxxxxxx
TWITTER_SECRET=xxxxxxxxxxxxxx

Mở .gitignore và thêm tệp bạn vừa tạo. 

#.gitignore

...
# Ignore .env used for storing keys and access tokens
.env

Khi điều này được thực hiện, các khóa và mã thông báo truy cập của bạn sẽ an toàn! Để tìm hiểu thêm về cách sử dụng dotenv -rails , tham khảo trang GitHub.

Thời gian để làm việc trên tuyến đường của bạn. Mở tệp tuyến đường của bạn và thêm tuyến đường bên dưới. 

#config/routes.rb

...
  get '/auth/:provider/callback', to: 'sessions#create'

Bạn cần thêm liên kết đăng nhập Twitter vào điều hướng của mình. Mở tệp điều hướng của bạn và chỉnh sửa nó để trông giống như thế này. 

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

Từ phần trên, bạn chỉ muốn hiển thị liên kết để đăng nhập bằng Twitter khi người dùng chưa đăng nhập.

Tạo phiên

Bạn sẽ cần một bộ điều khiển phiên để xử lý việc đăng nhập của người dùng. Tạo một tệp cho tệp đó trong thư mục bộ điều khiển của bạn; đây là cách nó sẽ trông.

Hành động tạo giúp tạo phiên cho người dùng để họ có thể đăng nhập vào ứng dụng của bạn. Nếu không có điều này, người dùng không có phương tiện đăng nhập. 

#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

Bạn sẽ cần một current_user tại điểm này. Điều này sẽ giúp bạn kiểm tra xem người dùng đã đăng nhập hay đăng xuất.

Mở app/controllers/application_controller.rb và thêm phần sau. 

#app/controllers/application_controller.rb

...
  def current_user
    @current_user ||= User.find(session[:user_id]) if session[:user_id]
  end
  helper_method :current_user
...

Mô hình người dùng

Bây giờ tạo một mô hình cho Người dùng của bạn. Chạy lệnh để làm như vậy. 

rails generated modoel User provider:string uid:string name:string token:string secret:string profile_image:string

Điều đó sẽ tạo ra một tệp di chuyển trông giống như thế này. 

#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

Bây giờ di chuyển cơ sở dữ liệu của bạn bằng cách chạy:

rake db:migrate

Mở mô hình Người dùng của bạn và làm cho nó trông giống như sau:

#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

Đoạn mã trên lưu trữ một số thông tin thuộc về người dùng. Điều này bao gồm tên, profile_image, mã thông báo và bí mật của người dùng. Nếu ứng dụng của bạn yêu cầu nhiều hơn mức này, bạn có thể xem trang OmniAuth-Twitter.

Xóa phiên

Trong ứng dụng của mình, bạn muốn cung cấp cho người dùng khả năng đăng xuất. Bạn sẽ cần một destroy hành động trong SessionsController của bạn để điều này hoạt động. Sau đó, một liên kết sẽ được thêm vào điều hướng của bạn.

Thêm destroy hành động với SessionsController của bạn . 

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

Sau đó, thêm liên kết này để đăng xuất khỏi điều hướng của bạn, để điều hướng của bạn trông giống như thế này. 

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

Mở config / lines.rb của bạn để cập nhật các tuyến đường của bạn với hành động bạn vừa tạo. 

#config/routes.rb

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

Khởi động máy chủ rails của bạn và trỏ trình duyệt của bạn đến https:// localhost:3000 để xem những gì bạn có.

Kết luận

Trong hướng dẫn này, bạn đã học cách bật OmniAuth-Twitter trong ứng dụng Rails của mình. Bạn đã thấy cách lấy dữ liệu của người dùng bằng OmniAuth-Twitter mà bạn đã làm trong mô hình Người dùng của mình. Bạn có thể tạo SessionControllers để xử lý việc đăng nhập và đăng xuất của người dùng từ ứng dụng của bạn.

Tôi hy vọng bạn thích nó. Trong tương lai, bạn sẽ thấy cách làm tương tự cho Facebook, Google và LinkedIn.