TheLazy.Dev
Portfolio GitHub

Blog

ruby |rails |omniauth

Omniauth GitHub on Rails

yutagoto

Yuta Goto

Posted on May 5, 2020

Omniauth GitHub on Rails

omniauth-githubでRuby on Railsのログイン機構を作るときに何度も検索したりすることがあるので、ざっくりやりかたをまとめました。

作業リポジトリ

GitHub logo YutaGoto / rails_github_auth

README

This README would normally document whatever steps are necessary to get the application up and running.

Things you may want to cover:

  • Ruby version

  • System dependencies

  • Configuration

  • Database creation

  • Database initialization

  • How to run the test suite

  • Services (job queues, cache servers, search engines, etc.)

  • Deployment instructions

  • ...


View on GitHub


環境

  • Ruby: 2.6.5
  • Rails: 6.0.2.2
  • omniauth-github: 1.4.0

使用したGem

GitHub logo omniauth / omniauth-github

GitHub strategy for OmniAuth

Ruby

OmniAuth GitHub

This is the official OmniAuth strategy for authenticating to GitHub. To use it, you'll need to sign up for an OAuth2 Application ID and Secret on the GitHub Applications Page.

Installation

gem 'omniauth-github', github: 'omniauth/omniauth-github', branch: 'master'
Enter fullscreen mode Exit fullscreen mode

Basic Usage

use OmniAuth::Builder do
  provider :github, ENV['GITHUB_KEY'], ENV['GITHUB_SECRET']
end
Enter fullscreen mode Exit fullscreen mode

Basic Usage Rails

In config/initializers/github.rb

  Rails.application.config.middleware.use OmniAuth::Builder do
    provider :github, ENV['GITHUB_KEY'], ENV['GITHUB_SECRET']
  end
Enter fullscreen mode Exit fullscreen mode

Github Enterprise Usage

provider :github, ENV['GITHUB_KEY'], ENV['GITHUB_SECRET'],
    {
      :client_options => {
        :site => 'https://github.YOURDOMAIN.com/api/v3',
        :authorize_url => 'https://github.YOURDOMAIN.com/login/oauth/authorize',
        :token_url => 'https://github.YOURDOMAIN.com/login/oauth/access_token',
      }
    }
Enter fullscreen mode Exit fullscreen mode

Scopes

GitHub API v3 lets you set scopes to provide granular access to different types of data:

use OmniAuth::Builder
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

ざっくり手順

Gemfile に書き加える 

gem 'omniauth-github'
Enter fullscreen mode Exit fullscreen mode

bundle installする

GitHub Applicationを作る

https://github.com/settings/apps

上記リンクにアクセスして新規で作成する。

ぎてゅｂ

ざっくり編集する

開発用で設定するときは Homepage URLを http://localhost:3000、User authorization callback URLを http://localhost:3000/auth/github/callback にする。

Permissionの設定はユーザ登録だけであれば、User permissionsのEmail AddressesをRead-onlyにする

ぎっとはぶ

作成し終えたら Client IDとClient secretを控える

環境変数にセットする 

EDITOR="vim" bin/rails credentials:edit
Enter fullscreen mode Exit fullscreen mode 
github_omniauth:
  client_id: hoge
  client_secret: hogehoge
Enter fullscreen mode Exit fullscreen mode

yaml形式で設定する。実際に反映されるているか確認するときは、 rails console を使用する

$ rails c
Loading development environment (Rails 6.0.2.2)
irb(main):001:0> Rails.application.credentials.github_omniauth
=> {:client_id=>"hoge", :client_secret=>"hogehoge"}
Enter fullscreen mode Exit fullscreen mode

Userモデルを作る 

rails g model user name:string provider:string uid:text oauth_token:string
rails db:create
rails db:migrate
Enter fullscreen mode Exit fullscreen mode 
# app/models/user.rb
class User < ApplicationRecord
  def self.find_or_create_with_omniauth!(auth)
    user = find_by(uid: auth['uid'])
    return user if user.present?
    create! do |user|
      user.provider = auth['provider']
      user.uid = auth['uid']
      user.name = auth['info']['nickname']
      user.oauth_token = auth['credentials']['token']
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

Routingを設定する 

# config/routes.rb
Rails.application.routes.draw do
  get 'auth/github/callback', to: 'sessions#callback'
  get '/sign_out', to: 'sessions#destroy'

  root 'homes#top'
end
Enter fullscreen mode Exit fullscreen mode

SessionsControllerを作る 

rails g controller sessions
Enter fullscreen mode Exit fullscreen mode 
# app/controllers/sessions_controller.rb
class SessionsController < ApplicationController
  def callback
    user = User.find_or_create_with_omniauth!(request.env['omniauth.auth'])
    session[:user_id] = user.id
    redirect_to root_path
  end

  def destroy
    reset_session # セッションをリセットする
    redirect_to root_path
  end
end
Enter fullscreen mode Exit fullscreen mode

HelperMethodを作る 

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  helper_method :current_user, :logged_in?

  private

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

  def logged_in?
    !!session[:user_id]
  end

  def authenticate
    return if logged_in?
    redirect_to root_path, alert: 'ログインしてください'
  end
end
Enter fullscreen mode Exit fullscreen mode

Viewを作る 

<%# app/views/homes/top.html.erb %>
<% if logged_in? %>
  <%= link_to 'Sign out', '/sign_out' %>
  <ul>
    <li>ID: <%= current_user.id %></li>
    <li>NAME: <%= current_user.name %></li>
    <li>PROVIDER: <%= current_user.provider %></li>
  </ul>
<% else %>
  <%= link_to 'Githubアカウントでサインイン', '/auth/github' %>
<% end %>
Enter fullscreen mode Exit fullscreen mode

Omniauthの設定ファイルを作成する 

touch config/initializers/omniauth.rb
Enter fullscreen mode Exit fullscreen mode 
# config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :developer unless Rails.env.production?
  provider :github, Rails.application.credentials.github_omniauth[:client_id], Rails.application.credentials.github_omniauth[:client_secret], scope: "user"
end
Enter fullscreen mode Exit fullscreen mode

実際に確認する 

rails s
Enter fullscreen mode Exit fullscreen mode

サインイン前

ro-karu

サインイン後

login

テストコード

途中

https://github.com/omniauth/omniauth/wiki/Integration-Testing

これを参考にすすめると良さそう

💖 💪 🙅 🚩
yutagoto
Yuta Goto

Posted on May 5, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

[AI] Setting up omni-auth in rails
ruby [AI] Setting up omni-auth in rails

December 11, 2022

Omniauth + Devise + Rails Tutorial
ruby Omniauth + Devise + Rails Tutorial

October 4, 2021

Setting up OmniAuth 2.0 in rails
undefined Setting up OmniAuth 2.0 in rails

April 18, 2021

Plan My MD Visit Part 1
ruby Plan My MD Visit Part 1

January 19, 2021

Omniauth GitHub on Rails
ruby Omniauth GitHub on Rails

May 5, 2020