1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Rails/LINEログイン]簡単LINEログイン実装方法

Last updated at Posted at 2026-01-29

はじめに

完全未経験からエンジニア転職を目指しているものです。
今回LINEログインを初めて実装したので、復習がてらまとめていきたいと思います!

環境

  • Rails: 7.2.3
  • Ruby: 3.3.6
  • PostgreSQL: 18
  • デプロイ先: Render
    補足:
    • Rails new等の環境構築済みを想定しています。
    • 今回は単体での実装のため、Devise等のログイン方法と連動させる方は少しやり方が違います。

LINEログインとは

LINEログインは、LINEアカウントを利用して外部のWebサービスやアプリに簡単に会員登録・ログインできる「ソーシャルログイン」機能です。IDやパスワードを入力する手間が省け、LINEの友だち追加や個人情報を連携させることで、ユーザー・企業双方にメリットがある仕組みです。

ログイン時にメアドやパスワードを使用しなくていいので、ユーザーが手軽に始められるのもいいですね!

今回は、こちらの公式ドキュメントに従って作成していきたいと思います!

LINE Developers設定

まずは、LINE Developers consoleでチャネル作成し、チャネルIDチャネルシークレットキーを取得します。

Step 1 LINE Developersにログイン

任意のログイン方法で、LINE Developersにログインします。

スクリーンショット 2026-01-29 9.39.00.png

Step 2 チャネルを作成

プロバイダー名を入力し、チャネル設定画面から、LINEログインをクリック。

スクリーンショット 2026-01-29 9.49.15.png

各必須項目を入力し作成。

ちなみに各項目の意味はこちら↓

Step 3 コールバックURL登録

LINEログイン設定から、赤枠で囲んでいるウェブアプリでLINEログインを利用するの欄に、URLを設定します。
ここでは、このチャネルで設定したLINEログイン機能を使用するURLを設定します。

行ごとに読み込んでくれるので、複数設定する場合は必ず行を変えて入力してください!

スクリーンショット 2026-01-29 9.55.05.png

Step 4 公開設定

チャネル基本設定から、チャネルIDチャネルシークレットキーをメモしたら、下記画像で赤枠で囲っている公開設定を、公開に変更する。
(これをしないと管理者以外にログイン許可が無いとエラーになります)

スクリーンショット 2026-01-29 10.04.16.png

これでLINE Developers consoleでの設定は以上!
ここからはRails側の設定をしていきます。

Rails側の設定

Rails側では、必要gemの導入と、ログインに関わるコントローラーの設定、ビューでログインボタンを配置していきます。

Step 1 gemの導入

gem "omniauth-line"
gem "omniauth-rails_csrf_protection"

Gemfileに記述して

docker compose exec web bundle install

でインストールします。

Step 2 Controller設定

ログイン設定をしているControllerで以下の設定を記述。

def create
  auth = request.env["omniauth.auth"]
  
  # LINEから渡ってきたprovider("line")とuidを使ってユーザーを探すか作成する
  user = User.find_or_create_by!(provider: auth.provider, uid: auth.uid) do |u|
    u.name = auth.info.name
    u.email = auth.info.email
  end

  # ログイン状態の保持
  session[:user_id] = user.id
  cookies.permanent.signed[:user_id] = user.id

  # 遷移と通知
  redirect_to recipes_path, notice: "LINEでログインしました!"
end

Step 3 View作成(追記)

ログイン画面のViewで以下のように記述。

<%= button_to "/auth/line", 
    method: :post, 
    data: { turbo: false }, 
    class: "group relative flex items-center justify-center gap-3 w-full py-4 px-4 bg-[#06C755] border-2 border-[#06C755] rounded-2xl hover:bg-[#05b34c] hover:border-[#05b34c] text-white font-black shadow-sm transition-all hover:shadow-md active:scale-[0.98]" do %>
  <%= image_tag "btn_base.png", class: "w-6 h-6" %>
  LINEでログイン
<% end %>

LINEのアイコンは、

からダウンロードできます。

Step 4 チャネルID・シークレットキー格納

LINE Developers consoleで作成した、チャネルIDシークレットキーを格納します。

パターン1 config/credentials.yml.encに暗号化格納

docker compose exec web env EDITOR=vi bin/rails credentials:edit

でvimを開き、下記のように記述する。

line:
  channel_id: xxxxxxxxx
  channel_secret: xxxxxxxxx

(xxxxxxxxxのところはあなたの取得したキーを入れてください)

次にconfig/initializers/omniauth.rb

  # LINEの設定
  Rails.application.config.middleware.use OmniAuth::Builder do
   provider :line,
    Rails.application.credentials.dig(:line, :channel_id),
    Rails.application.credentials.dig(:line, :channel_secret)

と記述し、読み込ませる。

パターン2 ENVに格納

.envに下記のように記述。

LINE_CHANNEL_ID=xxxxxxxxx
LINE_CHANNEL_SECRET=xxxxxxxxx

(xxxxxxxxxのところはあなたの取得したキーを入れてください)

次に、config/initializers/omniauth.rb

# LINEの設定
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :line,
    ENV['LINE_CHANNEL_ID'],
    ENV['LINE_CHANNEL_SECRET']

のように記述し、読み込ませる。

Railsを再起動して、LINEログインが機能するか確認してみてください!

Render(デプロイ先)の設定

最後に、ENVを使用している場合は、今回のデプロイ先であるRenderへ環境変数を追加しましょう!

読み込ませたい対象のプロジェクトを選び、Environmentから環境変数を追加します。
環境変数は、先ほど「Rails側の設定・Step4」で格納したキーと同じものになるので、タイポ対策でコピペを推奨します!

スクリーンショット 2026-01-29 12.48.40.png

追加できたら保存してデプロイすれば本番環境での実装も完成です!

[⚠️注意点] emailが nil でも大丈夫?

今回の私の実装では、DBのemailカラムにnull: falseの制約をつけていないため、scope 設定なし(メアドなし)でもログイン可能です。

ただし、Deviseなどで「メールアドレスを必須(null: false)」にしている場合は、以下の対応をしないとログイン時にエラーになります。
対応としては、
1, LINE Developersコンソールで「メールアドレス取得権限」を申請する
チャネル基本設定の最後の方にあるメールアドレス取得権限を申請する。

スクリーンショット 2026-01-29 13.16.29.png

2, omniauth.rbのscopeにemailを追加する
下記のようにconfig/initializers/omniauth.rbにscopを追加する。

# config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :line,
    ENV['LINE_CHANNEL_ID'],
    ENV['LINE_CHANNEL_SECRET'],
    {
      scope: 'profile openid email' 
    }
end

これで、emailの情報もください!というリクエストが送れます。

自分のアプリのDB設計に合わせて調整してみてください!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?