Computer >> 컴퓨터 >  >> 프로그램 작성 >> Ruby

Rails 애플리케이션에서 OmniAuth-Twitter를 사용하는 방법

이 자습서에서는 애플리케이션 사용자가 Twitter 계정을 사용하여 로그인하도록 허용하는 방법을 배웁니다. OAuth와 같은 도구를 사용하면 이 작업을 쉽게 수행할 수 있습니다.

OmniAuth에 대한 Twitter 전략이 포함된 OmniAuth-Twitter를 사용하게 됩니다.

뛰어들자!

시작하기

Rails 애플리케이션을 생성하여 시작합니다. 터미널에서 다음 명령을 실행하여 수행하십시오.

rails new Tuts-Social -T 

Gemfile을 열고 부트스트랩 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 설명서에서 자세히 알아볼 수 있습니다.

경로 파일을 열어 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 설정

새로운 트위터 애플리케이션을 만들어야 합니다. Twitter 개발자 페이지에서 이 페이지로 이동하여 계정을 만드세요. 아래 스크린샷에 있는 것과 유사하게 필요한 모든 세부정보를 입력하세요.

Rails 애플리케이션에서 OmniAuth-Twitter를 사용하는 방법 Rails 애플리케이션에서 OmniAuth-Twitter를 사용하는 방법 Rails 애플리케이션에서 OmniAuth-Twitter를 사용하는 방법

콜백 URL의 경우 웹사이트 주소와 "auth/twitter/callback"을 입력합니다. 로컬 컴퓨터에 있는 경우 콜백 URL은 다음과 같아야 합니다. https://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'

이제 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을 다시 열고 아래에 gem을 추가하십시오. 다음과 같이 Gemfile에 추가하십시오:

#Gemfile

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

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'

탐색에 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 서버를 시작하고 브라우저에서 https://localhost:3000을 가리키도록 하여 현재 가지고 있는 것을 확인하십시오.

결론

이 튜토리얼에서는 Rails 애플리케이션에서 OmniAuth-Twitter를 활성화하는 방법을 배웠습니다. 사용자 모델에서 수행한 OmniAuth-Twitter를 사용하여 사용자 데이터를 가져오는 방법을 보았습니다. SessionControllers를 생성할 수 있었습니다. 애플리케이션에서 사용자의 로그인 및 로그아웃을 처리합니다.

당신이 그것을 즐겼기를 바랍니다. 앞으로 Facebook, Google, LinkedIn에서 동일한 작업을 수행하는 방법을 알게 될 것입니다.