이 자습서에서는 애플리케이션 사용자가 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 개발자 페이지에서 이 페이지로 이동하여 계정을 만드세요. 아래 스크린샷에 있는 것과 유사하게 필요한 모든 세부정보를 입력하세요.
콜백 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에서 동일한 작업을 수행하는 방법을 알게 될 것입니다.