IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

自作Webアプリ「IT勉強会用 名刺ジェネレーター」を公開しました!ぜひご活用ください😀

https://it-benkyoukai-meishi.herokuapp.com/

devise + omniauth-github を使ってみる

はじめに

ここでは以下の記事を参考にして、omuniauth-github を使ってみることにする。

 

使ってみる

サンプル用のプロジェクトを作成する。

 

gem をインストールする。

  • echo 'gem "devise"' >> Gemfile
  • echo 'gem "omniauth-github"' >> Gemfile
  • echo 'gem "figaro"' >> Gemfile
  • bundle

 

devise の初期設定をする。

 

app/models/user.rb で omniauthable を有効化する。

f:id:matt-note:20190708135946p:plain

 

User モデルに provider と uid 属性を追加する。また、login と name 属性を追加する。

  • bin/rails g migration AddOmniauthToUsers provider:string uid:string
  • bin/rails g migration AddNameToUsers login:string name:string
  • bin/rails db:migrate

 

GitHub でアプリの登録を行う。

 

上記の URL をクリックして、右上の「New OAuth App」をクリックして、3つの項目を入力する。

f:id:matt-note:20190708144718p:plain
 

これで ID と Secret を取得できる。

f:id:matt-note:20190708143131p:plain

 

figaro を使って環境変数の管理を行う。

  • bundle exec figaro install

 

config/application.yml に GitHub の ID と Secret を記述する。

f:id:matt-note:20190708143428p:plain

 

config/initializers/devise.rb で omniauth の設定を作成する。

f:id:matt-note:20190708145223p:plain

 

GitHub認証を扱うコントローラを作成する。

  • mkdir app/controllers/users
  • touch app/controllers/users/omniauth_callbacks_controller.rb

 

公式チュートリアルを参考にして、GitHub認証用の omniauth_callbacks_controller.rb を作成する。

f:id:matt-note:20190708140714p:plain


app/models/user.rb で認証後に取得した値を User の属性に設定するメソッドを作成する。

f:id:matt-note:20190708142435p:plain

 

ログイン用にホーム画面を作成する。

  • bin/rails g controller Home index

 

config/routes.rb でルーティングの設定を追加する。

f:id:matt-note:20190708144344p:plain

 

app/views/layouts/application.html.erb にログインのリンクを作成する。

f:id:matt-note:20190708144122p:plain

 

サーバーを起動して、リンクをクリックしてみる。

f:id:matt-note:20190708144850p:plain

 

ログインしたら、コンソールを起動して User を確認してみる。

f:id:matt-note:20190708145700p:plain

-> login と name が設定された User を作成することができた。

 

取得できる情報を確認してみる

app/models/user.rb で auth の情報を出力してみる。

f:id:matt-note:20190708152352p:plain

 

GitHub で登録した情報は、「Revoke all user tokens」ボタンで削除できる。

f:id:matt-note:20190708152553p:plain

 

サーバーを起動して、「GitHubログイン」をクリックして、ターミナルで出力を確認してみる。

f:id:matt-note:20190708152809p:plain

-> GitHub のログイン名を取得する場合は、auth.info.nickname で取得できることがわかる。

 

ログアウト機能を作る

明示的にログアウト用のパスを作成する場合は、config/routes.rb で以下のようにする。

f:id:matt-note:20190708162621p:plain

 

app/views/layout/application.html.erb にログアウトのリンクを作成する。

f:id:matt-note:20190708180301p:plain

 

これでログアウト機能を作成できた。

f:id:matt-note:20190708180141g:plain