【開発メモ】RailsアプリにTwitterログイン認証機能を実装する方法

Sponsored Link

RailsアプリにTwitterログイン機能を実装したい!

どうも、Linです。トイレ、磨いてます。

 

Railsアプリを自作したらやりたいこと。

それは、

Twitterログイン機能をつける

ということではないでしょうか??

ユーザー登録の手順が楽になり、より多くの方がサービスに登録してくれるかもしれません。

 

ようやく、24時間ぐらいかけて、RailsアプリにTwitterログイン機能をつけることに成功しました。

今日はその方法を忘れないうちにメモしておこうと思います。

執筆にあたり、こちらの神記事を参考にさせていただきました。

 

 

Twitterログイン機能をRailsアプリに実装する前の3つの事前準備

まずは事前準備から。

  1. deviseのログイン機能をつけたRailsアプリを作成
  2. userカラムに追加
  3. Twitterアプリ設定

 

deviseアプリ作成

deviseのログイン機能を実装したRailsアプリを作成します。

アプリの作り方はこちらを参照してください。

 

userテーブルにカラム追加

deviseで取得できるのは、

  1. メールアドレス
  2. パスワード

の2つのカラムのみ。

 

ってことで、Twitterログインで取り出したい値のカラムを追加しておく必要があるのです。

今回は、

  • ユーザーID(uid)
  • プロバイダー(provider)
  • 名前(name)
  • ニックネーム(nickname)
  • 場所(location)
  • 画像(image)

の4つのカラムをdeviseのuserテーブルに追加していきます。

マイグレーションを作成したら、

を忘れずに。

 

Twitterアプリ作成

続いては、Twitter側での設定。

こちらのリンクから、アプリを作成し、

  1. API Key
  2. Secret Key

の2つをゲットしていきます。

 

まずは、「Create New App」でアプリを新規作成。

 

twitter rails

 

すると、次のようなアプリ設定画面に遷移することでしょう。

 

twitter rails

 

これらの項目は必須なので、下のように残さず埋めていきます。

 

Name アプリ名。適当でいいが、他人とかぶるとNG
Description アプリの説明。英単語10文字以上
Website サービスのURL。適当でいい
Callback URL コールバックURL。適当でいい

 

アプリの設定が完了したら、管理画面から「Keys and Access Tokens」と進んで、

  1. API Key
  2. Secret Key

の2つを取得しちゃいましょう。

 

twitter rails

これでアプリ側の準備完了です。

 

 

RailsアプリにTwitterログイン機能を実装する方法

Twitterログイン機能を実装させていきますよ。

 

gemファイル編集

まずは、gemファイルの編集。

の2つを追記して、

 

2つのKeyを設定

先ほどのアプリ設定で取得した、

  1. API Key
  2. Secret Key

を設定していきましょう。

config/initializer/devise.rbを、下記のように編集します。

 

 

deviseメソッドの追加

続いては、デフォルトで用意されているdeviseメソッドに認証用のメソッドを追加。

app/model/user.rbを下記のように編集。

 

userモデル編集

続いては、userモデルの編集し、app/model/user.rbを下記を追記。

これより、Twitter認証でうけとったデータからUserテーブルに記録していきます。

ここでの注意点は、メールアドレスはTwitterログインでは取得できないという点です。

 

かといって、deviseで用意してしまっているemailカラムに何もデータを取得しないと、

ActionDispatch::Cookies::CookieOverflow

というエラーが出現しますので、ダミーのemailを登録するように設定しておきます。

ぼくはこのエラーに6時間ぐらい悩まされましたが、ようやくスッキリしました笑

 

 

コールバック設定

app/controllers/usersという階層に、

omniauth_callbacks_controller.rb

というファイルを追加。

内容は、

です。

 

ルーティング設定

あとはコールバック用のルーティング設定。

config/routes.rbを下記のように編集していきます。

 

 

あとはビューファイルで表示してみよう!

それではTwitterログインで取得したユーザーのデータをビューファイルで取得してみましょう。

コントローラとビューファイル追加。

 

生成されたapp/home/index.html.erbを下記の編集します。

 

 

すると、ルートパスに、

  • 名前(name、Twitterのアカウント名)
  • ニックネーム(nickname、TwitterのID名)
  • 場所(location、場所)
  • 画像(image、画像の格納先パス)

が表示されると思います。

 

いやああああああ疲れた!

半日がかりでTwitterログインをマスターできました。

ぜひ、皆さんもチャレンジしてみてくださいね^^

 

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

3件のコメント

コメントはこちらからお願いします!



もう1本読んでみる