Tích hợp đăng ký & đăng nhập bằng LINE trong ứng dụng Rails (Devise + OmniAuth)

1. Giới thiệu

Trong thời đại mà người dùng ngại nhập email và mật khẩu mỗi lần đăng ký, việc cho phép đăng nhập bằng mạng xã hội là cực kỳ quan trọng. Ngoài Google hay Facebook, LINE là một nền tảng phổ biến tại Nhật Bản, Đài Loan và Thái Lan.

Trong bài viết này, mình sẽ chia sẻ cách mình tích hợp đăng nhập bằng LINE vào ứng dụng Ruby on Rails 8 bằng cách sử dụng Devise và OmniAuth. Nếu bạn đang phát triển sản phẩm hướng đến thị trường có người dùng LINE, bài này sẽ rất hữu ích với mọi người.

2. Cài đặt gem cần thiết

Trong file Gemfile, mình thêm các gem sau:

gem "devise"
gem "omniauth"
gem "omniauth-line"
gem "dotenv-rails"

Sau đó chạy:

bundle install

Mình dùng thêm dotenv-rails để quản lý biến môi trường như LINE_CLIENT_ID, LINE_CLIENT_SECRET

3. Tạo ứng dụng trên LINE Developers Console

Truy cập https://developers.line.biz/console

Tạo một “Provider” và “Channel” (Loại: LINE Login)

Ghi lại các thông tin sau:

• Channel ID → dùng cho LINE_CLIENT_ID
• Channel Secret → dùng cho LINE_CLIENT_SECRET
• Trong phần Callback URL, thêm đường dẫn:

https://your-domain.com/users/auth/line/callback

Sau khi bạn đăng kí xong thành công xong thì bạn sẽ thấy Channel trong developers line

4. Cấu hình Devise và OmniAuth

Phần lưu thông tin và xác thực người dùng, thì mình dùng luôn gem devise, cũng rất quen với ae làm rails

Trong file config/initializers/devise.rb, thêm dòng cấu hình sau:

config.omniauth :line, ENV["LINE_CLIENT_ID"], ENV["LINE_CLIENT_SECRET"], scope: "profile openid"
OmniAuth.config.allowed_request_methods = [:get, :post]

lưu ý: nhớ thêm phần config OmniAuth.config.allowed_request_methods vô nữa nha, vì dòng này cấu hình phương thức yêu cầu HTTP mà OmniAuth sẽ chấp nhận khi giao tiếp với dịch vụ OAuth của LINE. Thông thường, OAuth yêu cầu sử dụng phương thức GET để bắt đầu quy trình xác thực và POST để trao đổi mã truy cập sau khi xác thực.

Tạo file .env

LINE_CLIENT_ID=xxxxxxxxxxxxxxxxx
LINE_CLIENT_SECRET=xxxxxxxxxxxxxxxxx

5. Cập nhật model User

Trong model user.rb:

class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :omniauthable, omniauth_providers: [:line]

  def self.from_omniauth(auth)
    user = find_by(provider: auth.provider, uid: auth.uid)

    unless user
      email = auth.info.email.presence || "line_user_#{auth.uid}@example.com"
      while exists?(email: email)
        email = "line_user_#{auth.uid}_#{rand(1000)}@example.com"
      end

      user = new(
        provider: auth.provider,
        uid: auth.uid,
        email: email,
        name: auth.info.name || "LineUser#{auth.uid}",
        image: auth.info.image,
        password: Devise.friendly_token[0, 20]
      )

      user.save!
    end

    user
  end
end

Hàm from_omniauth sẽ tự động:

• Tìm user nếu đã tồn tại
• Nếu chưa có → tạo mới user bằng thông tin từ LINE
• Tạo email giả nếu LINE không trả về email

6. Router & Controller

Trong config/routes.rb:

devise_for :users, controllers: {
  omniauth_callbacks: "users/omniauth_callbacks"
}

Sau đó, tạo controller app/controllers/users/omniauth_callbacks_controller.rb:

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def line
    @user = User.from_omniauth(request.env["omniauth.auth"])

    if @user.persisted?
      sign_in_and_redirect @user, event: :authentication
      set_flash_message(:notice, :success, kind: "LINE") if is_navigational_format?
    else
      session["devise.line_data"] = request.env["omniauth.auth"].except(:extra)
      redirect_to new_user_registration_url, alert: "Login with LINE failed."
    end
  end

  def failure
    redirect_to root_path, alert: "Login failed, please try again."
  end
end

7. Giao diện đăng nhập

Trong viewapp/views/devise/sessions/new.html.erb

<%- if devise_mapping.omniauthable? %>
  <%= link_to "Login with LINE",
              user_line_omniauth_authorize_path,
              class: "py-2 px-4 bg-[#00C300] text-white rounded-md hover:bg-[#009900] focus:outline-none focus:ring-2 focus:ring-green-500 text-center w-full sm:w-auto" %>
<% end %>

Mọi người có thể dung bootstrap hay taiwind để css nhé

8. Chạy thử

rails s

Truy cập http://localhost:3000/users/sign_in → click “Login with LINE” → xác nhận quyền → bạn đã đăng nhập thành công bằng LINE!

Cùng xem thành quả nhé:

9. Kết Luận

Bằng vài bước cấu hình đơn giản, bạn đã có thể:

• Cho phép người dùng đăng ký/đăng nhập bằng tài khoản LINE
• Tích hợp hệ thống OAuth 2.0 một cách an toàn với Devise

LINE là lựa chọn tuyệt vời nếu bạn đang phát triển app tại Nhật, Đài Loan hoặc Thái Lan — nơi người dùng LINE rất phổ biến. Hi vọng bài viết này có thể giúp mọi người làm việc với line một cách dễ dàng hơn.