Tích hợp Facebook Graph APIs vào Rails app

Trong bài viết này, chúng ta sẽ tìm hiểu làm thế nào để sử dụng facebook graph API, tích hợp chúng vào 1 ứng dụng Rails. Chúng ta sẽ dùng 2 gem là omniauth-facebook và koala.

Omniauth-Facebook và Koala

Omniauth-facebook là gem cho phép chúng ta thực hiện việc xác thực người dùng trên facebook. Koala là 1 thư viện của facebook dành cho ruby, hỗ trợ facebook graph API. Với Koala ta có thể làm rất nhiều việc, koala cũng cung cấp unit test cho những phương thức của nó.

Chúng ta sẽ đi qua 2 bước được giải thích kỹ bên dưới:

1. Đăng kí một ứng dụng mới tại https://developers.facebook.com/ để gọi API từ ứng dụng của mình. 2. Thêm và thiết lập omniauth-facebook và koala trực tiếp vào ứng dụng.

Bước 1: Đăng kí ứng dụng với Facebook

Follow những bước cần thiết bên dưới để đăng kí mới 1 ứng dụng.

1. Đăng nhập vào facebook, click link https://developers.facebook.com/
2. Click vào Apps, Add a new app
3. Điền các thông tin cần thiết nhưng App name, category... Chọn platform là website.
4. Điền URL là http://localhost:3000/, server local mặc định.
5. Ở mục Settings, điền email và click Save changes.
6. Mục Review, click YES ở mục " Do you want to make this app and all its live features available to the general public?"

Bước 2: Thêm và thiết lập omniauth-facebook và koala

Tạo một ứng dụng Rails mới rails new sample_app. Đầu tiên, thêm 2 gem cần thiết vào Gemfile:

gem 'omniauth-facebook' # Facebook authentication
gem "koala", "~> 1.10.0rc" # Facebook API

Riêng với Koala, chúng ta phải thêm config để sử dụng version 2, nên ở trong file /config/application.rb thêm dòng Koala.config.api_version = 'v2.0' vào:

require File.expand_path('../boot', __FILE__)

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module SampleApp
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.

    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
    # config.time_zone = 'Central Time (US & Canada)'

    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
    # config.i18n.default_locale = :de
    Koala.config.api_version = 'v2.0'
  end
end

Lúc đăng kí ứng dụng trên facebook, ta đã có App ID và App Secret, giờ tạo thêm file facebook.yml để lưu id và secret lại. Và đừng quên thêm file này vào .gitignore /config/facebook.yml

development:
  app_id: Enter App ID here
  secret: Enter App Secret here

Chúng ta cần load /config/facebook.yml khi ứng dụng khởi động, nên ở đây ta có thể tạo thêm file facebook.rb và add thêm các dòng code sau vào . File này được đặt tại folder inittilazer

/config/initializers/facebook.rb

FACEBOOK_CONFIG = YAML.load_file("#{::Rails.root}/config/facebook.yml")[::Rails.env]

Tạo thêm 1 file initializer nữa để config omniauth-facebook. Đặt tên file là omniauth.rb.

/config/initializers/omniauth.rb

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, FACEBOOK_CONFIG['app_id'], FACEBOOK_CONFIG['secret'], {:scope => 'user_about_me'}
end

Ở đây ta đã thêm Omniauth vào Rack middleware và config. Việc passing App ID và App Secret thông qua các biến môi trường và các scope liên quan cũng đã thực hiện xong. Nên việc xác thực coi như trơn tru rồi nhé.

Giờ ta cần model, view và controller cho ứng dụng. Hãy tạo model trước. Tạo một file user.rb trong thư mục model. Các bạn có thể dùng scaffold cho nhanh. Ở đây mình không lưu data nào nên việc build database là ko cần thiết.

/app/models/user.rb

class User < ActiveRecord::Base
  def self.koala(auth)
    access_token = auth['token']
    facebook = Koala::Facebook::API.new(access_token)
    facebook.get_object("me?fields=name,picture")
  end
end

Ở đây ta đã định nghĩa method koala mà ta sẽ gọi bên controller. User.koala lấy chứng chỉ xác thực sử thông qua omniauth-facebook, sau đó sử dụng koala method để bắt data từ facebook graph Api. facebook.get_object("me?fields=name,picture") sẽ lấy tên và ảnh đại diện của user đang loggin hiện hành.

/app/controller/users_controller.rb

class UsersController < ApplicationController
  def index
  end

  def login
    @user = User.koala(request.env['omniauth.auth']['credentials'])
  end
end

login là method/action mà chúng ta đã định nghĩa để gọi method koala và hiển thị kết quả trong file login.html.erb.

/app/views/users/index.html.erb

<%= link_to "Facebook Login", '/auth/facebook' %>

Root page được trỏ đến /auth/facebook để lo việc xác thực.

/app/views/users/login.html.erb

<%= image_tag @user['picture']['data']['url'].to_s %>
<%= @user['name'] %>

Đây là trang hiển thị kết quả. Cuối cùng, ta cần config route cho hợp lí: /config/routes.rb

Rails.application.routes.draw do
  root to: 'users#index', via: :get
  get 'auth/facebook', as: "auth_provider"
  get 'auth/facebook/callback', to: 'users#login'
end

OK xong rồi, test thử xem nào:

1. Chạy bundle, rake db:create, sau đó chạy server rails s. Ngon rồi đấy.
2. Vào http://localhost:3000 và click Facebook Login

Các lỗi có thể xảy ra

• Nếu bạn lần đầu dùng facebook graph API có thể dính vài lỗi chưa gặp bao giờ thì có thể tham khảo thêm phần documentation này của facebook, có thể sẽ hữu ích cho bạn.
• Nếu trường hợp bạn deploy ứng dụng lên prod thì có thể phải thay đổi các settings trên facebook (callback_url...) và setup app id & secret vaò môi trường production

Kết luận

Social logins (đặc biệt là facebook login) đang được sử dụng rộng rãi trên các ứng dụng web. Chúng ta đã đi qua phần cơ bản làm thế nào để tích hợp facebook vào một ứng dụng. Vui lòng tham khảo thêm koala và facebook documentation để hiểu chi tiết hơn.

Các nguồn tham khảo liên quan

• Omniauth Facebook
• Koala
• Facebook API documentation