2019年12月19日木曜日

Ruby で Facebook の Graph API をコールしてみた

概要
環境
Facebook アプリの作成
Facebook OAuth の実装
サンプルアプリの作成
ビューの作成
動作確認
Tips: Instagram の Graph API をコールするには
- Instagram Graph API を追加する
参考サイト

概要

Facebook の Graph API を Ruby からコールしてみました
Facebook Graph API をコールするために OAuth によって取得できたアクセストークの取得が必要になるので Web アプリとして作成しています

環境

macOS 10.15.2
Ruby 2.6.2p47
koala 3.0.0

Facebook アプリの作成

過去に Facebook Developer のページでアプリの作成方法を紹介しているのでそちらを参考にして事前に作成しておいてください

Facebook OAuth の実装

Facebook の OAuth は JavaScript 側で行います
Facebook の OAuth の方法も過去の記事で紹介しているのでそれを参考にします

JavaScript 側で取得したアクセストークンを Web アプリ側に渡して Facebook Graph API をコールしていきます

サンプルアプリの作成

冒頭紹介した通り Web アプリ (Sinatra) として作成します
JavaScript 側で取得したセッショントークンを使ってコールします
また Facebook Graph API は koala というライブラリを使います

vim Gemfile

gem "koala"

bundle install --path vendor
vim app.rb

require 'sinatra/base'
require 'sinatra/cookies'
require 'koala'

class App < Sinatra::Base
  helpers Sinatra::Cookies

  get '/' do
    if cookies.has_key?(:fb_access_token)
      graph = Koala::Facebook::API.new(cookies[:fb_access_token])
      profile = graph.get_object("me")
      @id = profile['id']
    end
    erb :index
  end
end

cookies にセッショントークンがある場合は Graph API をコールします
今回はユーザ ID を取得しているだけです

ビューの作成

Facebook Graph API をコールして取得できた情報を HTML として表示するビューを作成します

vim views/index.erb

<html>
<head>
  <title></title>
</head>
<body>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'xxxxxxxxxxxxxxx',
        cookie     : true,
        xfbml      : true,
        version    : 'v5.0'
      });
      FB.AppEvents.logPageView();   
      FB.getLoginStatus(function(response) {
        console.log(response);
        if (response.status === 'connected') {
          console.log(response.authResponse.accessToken);
          document.cookie = 'fb_access_token=' + response.authResponse.accessToken;
        }
      });
    };
    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    function checkLoginState() {
      FB.getLoginStatus(function(response) {
        console.log(response);
        if (response.status === 'connected') {
          console.log(response.authResponse.accessToken);
          document.cookie = 'fb_access_token=' + response.authResponse.accessToken;
        }
      });
    }
  </script>
  <fb:login-button 
    scope="public_profile,email"
    onlogin="checkLoginState();">
  </fb:login-button>
  <div><%= @id %></div>
</body>
</html>

ログインしている状態でページにアクセスするとユーザ ID が表示されます
ログインしていない場合はログインボタンを押してログインするとユーザ ID が表示されるようになります

動作確認

bundle exec rackup config.ru -o 0.0.0.0

localhost:9292 にアクセスしてログインして動作確認しましょう

Tips: Instagram の Graph API をコールするには

どうやら Instagram の Graph API も同じエンドポイントでコールできるようです
が、Instagram ビジネスアカウントの作成と Facebook ページの作成が必須なので少し勝手が違うようです
当然ですが API のスコープも違います (instagram_basic, pages_show_list が必須？)
詳しくはチュートリアルの手順を御覧ください

また Instagram API は廃止になり Instagram Graph API を使うようになっているので後者を使いましょう

Instagram Graph API を追加する

Facebook アプリはコールされる API をプロダクトとして追加します
左メニューにあるプロダクトから「Instagram」を追加しましょう (スクリーンショットは追加後の状態)

hawksnowlog