Tạo google app để login google bằng gem devise

1. Giới thiệu

  • Gem Devise là thư viện khá phổ biến trong lập trình ruby on rails. Việc sử dụng gem devise cho chức năng login, logout, signup ... được hỗ trợ gần như đầy đủ.
  • Việc login bằng tài khoản google hay facebook đã trở nên quá phổ biến, 2 ông lớn này cũng cung cấp khá đầy đủ api hỗ trợ để làm việc này, và sau đây mình sẽ hướng dẫn tạo chức năng login bằng google từ việc code cho đến create google app phục vụ cho login.
  • Về mặt logic code, ở bài viết này chỉ khái quát qua bởi vì document của gem đã viết khá rõ ràng. Bài viết sẽ đi tập trung nói về cách tạo google app để chức năng này có thể hoạt động.

1. Gem Devise và omniauth

  • Ta đã có model User và sử dụng gem devise and omniauth để login google
  • Cài đặt gem:
gem "devise"
gem "omniauth"
gem "omniauth-google-oauth2"
  • bundle sau đó tiến hành cấu hình cho file config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET'],
    {
      name: 'google',
      scope: 'email, profile, plus.me, http://gdata.youtube.com',
      prompt: 'select_account',
      image_aspect_ratio: 'square',
      image_size: 50
    }
end

Phần lấy google_client_id và google_client_secret sẽ được viết rõ hơn ở phần dưới.Tiếp theo chúng ta custom controller omniauth_callbacks_controller.rb

# controllers/user/omniauth_callbacks_controller.rb
class User::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def google_oauth2
    @user = User.from_omniauth(request.env['omniauth.auth'])
    if @user.nil?
      flash[:notice] = 'có lỗi'
    else
      flash[:notice] = 'login thành công'
    end
    redirect_to users_path
  end
end

routes:

Rails.application.routes.draw do
  devise_for :users, controllers: {
    omniauth_callbacks: 'channel/omniauth_callbacks'
  }

model của user

class User < ApplicationRecord
  devise :omniauthable, omniauth_providers: %i[google_oauth2]

  def self.from_omniauth(auth)
    user = where(uid: auth.info["email"]).first
    return nil if user.present?
    User.create(
                refresh_token: auth.credentials.refresh_token,
                token: auth.credentials.token,
                expires_at: Time.at(auth.credentials.expires_at),
                uid: auth.uid,
                email: "#{auth.uid}@gmail.com",
                user_id: user.id,
                name: name,
                google_app_id: google_app_id,
                channel_id: channel_id
              )

  end

view

<p class="text">viblo</p>
<ul>
  <li>
    <%= link_to user_google_oauth2_omniauth_authorize_path do  %>
      <i class="fa fa-google-plus" aria-hidden="true"></i>
    <% end %>
  </li>
</ul>

ta được view thế này: Nhưng nếu chỉ làm đến đây thì chức năng này vẫn chưa thể chạy được đâu, bởi vì cái quan trọng là ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET'] thì chúng ta vẫn chưa có. Vậy phần dưới đây sẽ là các bước để lấy google_id, google_sercret.

2.Tạo Google App

trước hết chúng ta phải đăng nhập đường dẫn https://console.developers.google.com/apis/dashboard Ấn create project để tạo project, tạo project_test như dưới đây

Sau khi đã có project chúng ta lựa chọn api để đăng nhập trên web của mình, ở đây lựa chọn là gmail

Sau đó chúng ta vào tab credentials để tạo credentials oauth client id Sử dụng Web application, để đường dẫn authorized ridirec urls là đường dẫn login google của gem devise create, và vào lại tab credentials, click vào phần edit để lấy thông tin key Và đây là kết quả

Với clien ID và client secret này ta có thể điền vào file .env để có thể sử dụng việc login bằng google api

3. Kết luận

Qua bài viết, mình đã hướng dẫn các bước để có thể login bằng google thông qua gmail. Và cũng dựa vào đó, chúng ta có thể không chỉ login bằng gmail mà có thể bằng youtube hoặc những api do google cung cấp.

4.Tài liệu tham khảo

https://github.com/plataformatec/devise