「php」カテゴリーアーカイブ

今更ながらPHPでFacebook API でログイン処理を書いてみた(v2.8)

【MacOS X 10.11.6 + Facebook API v2.8 + Facebook SDK for PHP v5.0】
必要があってFacebookのログイン処理をPHPで書いてみたので、そのメモです。

1.Facebookに開発者登録してサイトをアプリとして登録

Facebook APIを使うには、Facebookに開発者登録してサイトをアプリとして登録する必要があります。その辺はここでは割愛するので、ご存じない方は下記を参照のこと。
Facebook開発者登録の方法とアプリ作成方法の手順

※この辺の説明はたくさんありますが、サイトによってはキャプチャ画面が古いものもあるので、適宜読み替えが必要。

2.Facebook SDK for PHP v5.0 のインストール

以下から、手動インストール。
facebook for developers | スタートガイド – ウェブSDK
解凍後、サイトのルートに「php-graph-sdk-5.0.0/src/Facebook」をフォルダごとコピーする。

3.PHPでのログイン処理

下記のサイトを参考にしました。コールバックのURLもパス付きで書いてあって、わかりやすいです。
[Facebook SDK for PHP v5.0]を利用してログイン認証をおこなう[Oauth]

ざっと図解すると、こんな感じ。

FacebookAPIの画面遷移

以下、各phpの概要です。

・config.php

Facebook APIで使用する、アプリID,app secret,APIのバージョンを定義。実際にAPIを使用するphpに、require_onceで読み込ませるために共通化。各設定項目とダッシュボードとの対応は、以下の通り。

app_id:アプリID
app_secret:app secret
default_graph_version:APIバージョン

アプリのダッシュボード画面

・index.php

Facebook APIでアプリにログインさせる。実際にはAPI側で、Facebookのログイン及びアプリの認証の可否を確認する画面が表示されるため、ユーザーの意に反してログインされることはない。

・callback.php

Facebook APIからのコールバックを受け取るphp。ここでアクセストークンを取得し、ログインしたユーザー情報を取得する。ユーザーがログインしない/アプリを許可しない場合、取得できないのでindex.phpへのリンクを表示。取得できた場合は、member.phpへ。

・member.php

ログインしたユーザー情報を表示する。

・logout.php

アプリからログアウトする。クッキーを削除して、セッションを破棄することでログアウトになる。

4.コールバックURLをアプリの管理画面に登録

コールバックURLはアプリの管理画面に登録する。左メニューから「プロダクト」>「+製品を登録」>「Facebookログイン」選ぶ。「クライアントOAuth設定」の「有効なOAuthリダイレクトURI」にコールバックURLをフルパスで指定し、右下の「変更を保存」ボタンを押す。

Facebookログインの画面でコールバックURLを指定して、保存する。

4.アクセストークン取得にはコールバックURLの指定が必要

参考サイトのコードをそのまま使ったら、「URLを読み込めません: このURLのドメインはアプリのドメインに含まれていません。このURLを読み込むには、アプリ設定のアプリドメインにすべてのドメインとサブドメインを追加してください。」というエラーが出た。

以下のサイトを参考に、アクセストークン取得のところにコールバックのURIを指定してエラーを解消。

【PHP】 Facebook APIのOauthのエラー解決「URLを読み込めません」「Can’t Load URL」 | codechord

実際にはこんな感じに書き換える。

//アクセストークンを取得する
$accessToken = $helper->getAccessToken('https://c-geru.sakura.ne.jp/c-geru/fb_test/callback.php');

5.デモ

実際の動作デモは、こちらからどうぞ。

6.各ソース

上記4.で述べたように、アクセストークン取得(callback.php)とログイン(index.php)の2箇所でコールバックURLが必要になるため、このサンプルでは、config.phpにコールバックURLを定義して、各phpではセッションから値を取得するようにしました。

・config.php

<?php 
session_start(); 
require_once("Facebook/autoload.php"); 
//コールバックURLをセッションに保存 
$_SESSION['fb_callback_ulr'] = 'https://c-geru.sakura.ne.jp/c-geru/fb_test/callback.php'; 
$fb = new Facebook\Facebook([
  'app_id' => '○○○○○○○○○',
  'app_secret' => '△△△△△△△△△△△△△',
  'default_graph_version' => 'v2.8',
]);

・index.php

<?php 

session_start(); 
header("Content-type: text/html; charset=utf-8"); 

//設定ファイルを読み込み 
require_once("config.php"); 

//コールバックURLの取得 
$callcak_url = $_SESSION['fb_callback_ulr']; 
$helper = $fb->getRedirectLoginHelper();

//オプションによって認証画面の文言が変わる
//$permissions = ['email', 'user_likes','user_posts']; //あなたの公開プロフィール、メールアドレス、タイムライン投稿、いいね!。
//$permissions = ['email', 'user_likes']; //あなたの公開プロフィール、メールアドレス、いいね!。
//$permissions = ['email', 'user_posts'];//あなたのタイムライン投稿。
//$permissions = ['email','user_friends'];//あなたの公開プロフィール、友達リスト、メールアドレス。
//$permissions = ['email'];//あなたの公開プロフィール、メールアドレス。
$permissions = [];//あなたの公開プロフィール。
$loginUrl = $helper->getLoginUrl($callcak_url, $permissions);

echo '<a href="' . $loginUrl . '">ログインする</a>';

・callback.php

<?php 

session_start(); 

header("Content-type: text/html; charset=utf-8"); 

//設定ファイル 
require_once("config.php"); 

//コールバックURLの取得 
$callcak_url = $_SESSION['fb_callback_ulr']; 

//タイムゾーンの設定 
date_default_timezone_set('asia/tokyo'); 

$helper = $fb->getRedirectLoginHelper();

try {
	if (isset($_SESSION['facebook_access_token'])) {
		$accessToken = $_SESSION['facebook_access_token'];
	} else {
		//アクセストークンを取得する
		$accessToken = $helper->getAccessToken($callcak_url);
	}
} catch(Facebook\Exceptions\FacebookResponseException $e) {
	// When Graph returns an error
	echo 'Graph returned an error: ' . $e->getMessage();
	exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
	// When validation fails or other local issues
	echo 'Facebook SDK returned an error: ' . $e->getMessage();
	exit;
}

if (isset($accessToken)) {
	//アクセストークンをセッションに保存
	$_SESSION['facebook_access_token'] = (string) $accessToken;
	
	header('Location: member.php');
	exit();
}else{
	echo "<a href='index.php'>はじめのページへ</a>";
}

・member.php

<?php 

session_start(); 
header("Content-type: text/html; charset=utf-8"); 
//設定ファイル 
require_once("config.php"); 

if (isset($_SESSION['facebook_access_token'])) { 
$accessToken = $_SESSION['facebook_access_token']; 
$fb->setDefaultAccessToken($accessToken);
	
	try {
		//取得するユーザ情報の指定
		$response = $fb->get('/me?fields=id,name,first_name,last_name,email,gender');
		$profile = $response->getGraphUser();
		
		//ユーザ画像取得
		$UserPicture = $fb->get('/me/picture?redirect=false&height=200');
		$picture = $UserPicture->getGraphUser();
		
	} catch(Facebook\Exceptions\FacebookResponseException $e) {
		// When Graph returns an error
		echo 'Graph returned an error: ' . $e->getMessage();
		exit;
	} catch(Facebook\Exceptions\FacebookSDKException $e) {
		// When validation fails or other local issues
		echo 'Facebook SDK returned an error: ' . $e->getMessage();
		exit;
	}
	
	$id=$profile['id'];
	$name=$profile['name'];
	$first_name=(isset($profile['first_name'])) ? $profile['first_name'] : '';
	$last_name=(isset($profile['last_name'])) ? $profile['last_name'] : '';
	$email=$profile['email'];
	$gender=(isset($profile['gender'])) ? $profile['gender'] : '';
	$picture_url = $picture['url'];
    
   
	echo "アクセストークン:".$accessToken."";
	echo "ID:".$id."";
	echo "名前:".$name."";
	echo "性別:".$gender."";
	echo "ファーストネーム:".$first_name."";
	echo "ラストネーム:".$last_name."";
	echo "メール:".$email."";//ユーザが未公開・未設定の場合は表示されない
	echo "<img src=".$picture_url.">";
	echo "<a href='logout.php'>ログアウト</a>";

}else{
	header('Location: index.php');
	exit();
}
?>

<!--#_=_を排除する-->
<script type="text/javascript">
if (window.location.hash && window.location.hash == '#_=_') {
  if (window.history && history.pushState) {
      window.history.pushState("", document.title, window.location.pathname);
  } else {
    // Prevent scrolling by storing the page's current scroll offset
    var scroll = {
        top: document.body.scrollTop,
      left: document.body.scrollLeft
    };
    window.location.hash = '';
    // Restore the scroll offset, should be flicker free
    document.body.scrollTop = scroll.top;
    document.body.scrollLeft = scroll.left;
  }
}
</script>

・logout.php

<?php
session_start();
 
header("Content-type: text/html; charset=utf-8");

//セッション変数を全て解除
$_SESSION = array();
 
//セッションクッキーの削除
if (isset($_COOKIE["PHPSESSID"])) {
    setcookie("PHPSESSID", '', time() - 1800, '/');
}
 
//セッションを破棄する
session_destroy();
 
echo "ログアウトしました。"; 
echo "<a href='index.php'>はじめのページへ</a>";

Facebook Messenger Platform でメッセージbot作成(v2.7)

【Facebook Messenger Platform beta + Facebook SDK v2.7】

前回のブログにFacebook SDKでメッセージ送信する記事を書きましたが、モバイルで使える方法はないのかなと調べていたら、Facebook Messenger Platformなるものを発見。

これでモバイルでもメッセージ送信できるんじゃないのかと調べてみたら、基本的にアプリやFacebookページ内でのメッセージ送信(チャット)に関するAPIのようです。

FacebookアプリやFacebookページを作って、そこにメッセージが送信されたときにコールバックを受け取る処理を組み込んでおいて反応させるもののようです。

JSで使用するにはNode.jsが必要


他のAPIと同じように、JavaScriptでもPHPでも書けるようですが、JavaScriptの場合はNode.jsが必要になるようです。Node.jsをインストール済の外部サーバがないので、今回はPHPでテストしてみました。

PHPはSSL配下で動作させる必要がある


今回はレンタルサーバ(さくらのレンタルサーバ)についている共有SSL機能を使いました。

大まかな手順は、上のGetting Started – Messenger Platformに書いてありますが、実際にテストしてみた手順をメモしておきます。

1. Create a Facebook App and Page(FacebookアプリとFacebookページを作成)


Quick Starts – 開発者向けFacebookを開いて、Facebookアプリを作成します。ここでは「testMessenger2」という名前で作成しました。アプリ名を入力して、「新しいFacebookアプリIDを作成」ボタンを押します。
bot01

開かれたポップアップで、メールアドレスを入力してカテゴリを選択します。ここでは「コミュニケーション」を選択しました。
bot02

アプリの設定画面に切り替わります。ページの内容は無視して、右上の「Skip Quick Start」ボタンを押します。
bot03

作成したFacebookアプリの管理画面が表示されます。
bot04

次にFacebookページを作成ページを開いて、Facebookページを作成します。ここでは会社・団体カテゴリからこのサイト名と同じ「As blind side」の名前で作成しました。
bot05

Facebookページの設定画面が表示されます。今回は全てスキップを選択します。
bot06

Facebookページが表示されます。
bot07

2. Setup Webhook(Webhookを設定)


Webhookを設定します。Webhookとはざっくりいうと、イベントに対するコールバックのことです。詳しくは下記を。

【参考】
Webhookとは? | ブログ | SendGrid
アプリのおしらせ作業を楽にするプッシュ通知の3つのポイント | BACKEND AS A SERVICE mbaas BLOG

ここでは「FacebookのMessengerにメッセージが送信されたときのコールバック」を指す、と考えていいと思います。

Facebookアプリのコールバック用PHPを作成します(ここではcallback2.phpという名前で作成)。「$access_token」には任意のトークンを設定します(ここでは”testmesenger”)。このPHPとトークンは、Facebookにコールバックphpを認証させるためのものです。

<?php
$hub_verify_token = "testmesenger"; // 任意のトークンを自分で作成
if($_GET['hub_verify_token'] == $hub_verify_token) {
    echo $_GET["hub_challenge"];
} else {
    echo 'error';
}

次にコールバック用PHPを外部サーバにアップします。アップするサーバはSSLでなければなりません。

まずFacebookアプリの管理画面から、プロダクト>製品を追加を選び、表示された中から「Messenger」のところにある「スタート」ボタンを押します。
bot08

Messengerの設定画面で「Set Webhooks」ボタンを押すと、下記のポップアップが表示されます。フォロー入力欄の全ての項目にチェックを入れ、「コールバックURL」に先程サーバに上げたPHPのURL、「トークンを確認」にPHPで設定したトークン(ここでは”testmesenger”)を入力して「確認して保存」ボタンを押します。
bot11

コールバック用PHPが正しく確認されると、Facebookアプリ管理画面のWebhooks欄に完了のマークが表示されます。
bot12

3. Get a Page Access Token(ページアクセストークンの取得)


Facebookアプリ(callback2.php)がFacebookページ(As blind side)にアクセスするためのトークンを取得します。

Messengerの設定画面で「トークン生成」の「Facebookページ」から先程作成したFacebookページ(As blind side)を選択して、ページアクセストークンを生成します。
bot10

ページアクセストークン欄に表示された文字列をコピーします。

4. Subscribe the App to the Page(Facebookページにアプリを登録する)


ターミナルから以下のコマンドを入力してBOTを起動します。Facebookページとアプリは、ページアクセストークンで紐付けされます。

curl -X POST “https://graph.facebook.com/v2.7/me/subscribed_apps?access_token=**********”

※**********には、ページアクセストークンを設定する。

正しく起動されると {“success”: true} と表示されます。
bot13

Botを使ってみる


これでBotの準備が出来ました。

Facebookアプリのコールバック用PHP(callback2.php)を書き換えて、受け取ったメッセージに対して返信するようにします。「$access_token」には上でコピーしたページアクセストークンを設定します。

<?php
$access_token = "*******************";
$json_string = file_get_contents('php://input');
$json_object = json_decode($json_string);
$messaging = $json_object->entry{0}->messaging{0};

if(isset($messaging->message)) {
    $id = $messaging->sender->id;
    $rcv_msg = $messaging->message->text;

    $message = '「';
    $message .=$rcv_msg;
    $message .= '」ってなんですか?';

    $post = <<< EOM
    {
        "recipient":{
            "id":"{$id}"
        },
        "message":{
            "text":"{$message}"
        }
    }
EOM;

    api_send_request($access_token, $post);
}

function api_send_request($access_token, $post) {
    error_log("api_get_message_content_request start");
    $url = "https://graph.facebook.com/v2.6/me/messages?access_token={$access_token}";
    $headers = array(
            "Content-Type: application/json"
    );

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $output = curl_exec($curl);
}
?>

コード内容については、この辺を見るといいかも。
Webhook Reference – Messenger Platform

書き換えたコールバック用PHPをアップロードして上書きします。

Botのテストをしてみます。Fcebookページ(As Blind side)からメッセージ送信すると、こんなかんじになります。
bot14

モバイルのMessengerアプリからメッセージ送信すると、こんな感じ。
bot15

これで完成です。いろいろ処理を書き込めば、ある程度メッセージは自動応答化できるのかなと思います。

【補足】
これはあくまでテスト用に作ったページとアプリなので、開発モードになっているため開発者権限でしか動作しません(作った本人しか使えない)。実際に稼働させるには、Facebookアプリ管理画面のアプリレビューで、「アイテムを審査に送信」を行って、公開設定する必要があります。
bot16

【参考】
Facebook Messenger Platform + さくらのレンタルサーバ + RapidSSL + PHP で BOT作成 – Qiita
Facebook、Messengerをプラットフォーム化、APIを公開 – iPhone Mania
Heroku+Railsで動かすFacebook Messengerのオウム返しBot – Qiita
Messengerで簡単なBotつくる(Facebook Messenger Platform from F8) – Qiita
FacebookGraphAPIを使った投稿パターンと見え方まとめ

Twitterで特定期間のツイートを検索する

先日、Twitterについて調べていたときに、こんな記事を見つけました。

・Twitterで期間を限定して検索する方法&ヘルプに載ってない裏技テク – 聴く耳を持たない(片方しか)
・Twitterの新機能! 過去のツイートを検索する方法 | iPhoneひとすじ! かみあぷ速報

試してみると、コレ、公式サイトの検索窓を使わずにブラウザで直接URL叩いても動くんですね。Twitterにログインしてなくても表示されます。例えば、こんな感じ

で、フォローしている鍵アカも検索できるように、twitterアカウントでOAuth認証を通すようにして、ひとネタページを作ってみました(下の画像からリンクしてます)。

thum_fb_2tones
【twitter】○○年の今頃何してた? | 2tones-dev.net

やってることは基本的に、入力したアカウントと選択した年と現在の日付から前後一日を取得して、JavascriptでURL生成してwindow.open()してるだけです(笑)。あとアカウントのデフォルトは、OAuth認証で返ってくる情報から自分のアカウントを自動入力しています。

まあ検索するなら公式サイトの検索窓使うかURL直打ちすればいいんですが、いちいちキーワード入力するのも面倒だし(ライトユーザーはそんなことしなさそうだし)、ふと「去年の今頃何してたっけ?」みたいなことを思ったりすることもたまにあるので、ネタとしてはいいかなと思いまして(笑)。

ちなみに検索に前後一日ずつの幅を持たせているのは、なるべく検索にヒットするようにです。みんながみんな、毎日ツイートしてるわけじゃないと思うので。

APIでも過去検索できればアプリに組み込んだりできるんですが、そこはまあ負荷の問題なんですかね。制限があるのは。

ちなみにOAuth認証はこの辺を参考にPHPで書いています。

・【PHP】2015春版!TwitterOAuthでログイン機能を実装する – Qiita
・PHP と Twitter API V1.1 で OAuth 認証を行う 「タイムライン取得」「呟き(つぶやき)投稿」「ログイン」(API V 1.1)

twitterでリンクにサムネイル設定するには「Twitter Cards」というのを使うんですね。この辺も普段あまり自分で書かないのでしりませんでした。

・すぐにできるTwitter Cards設定 – E-riverstyle Vanguard

FacebookのOPG用画像をチェックするのに、こんなサイトがありました。フルサイズでも小さい表示でもうまく表示されるよう確認するのに便利です。

・OGP画像シミュレータ | og:image Simulator

Twitterに限らずAPI周りの情報はたくさんありますが、古いAPIの情報だったり、Developersページのデザインが変わってたりするので、その辺が注意点かと。

【補足】
・当初iPhoneのSafariでURLを叩いてみたら、Safariで未ログインだと検索結果が表示されませんでした。iPhoneだとモバイル用のページが開くので、その辺の仕様に違いがあるのかなと。また最初は別ウィンドウで表示するようにしていたのですが、iPhoneだと別タブで公式サイトを開いていると、そちらに結果が表示されてしまいました。

・上記の現象があったのでtwitterのOAuth認証を組み込んだのですが、このブログ書くために再度テストしたら未ログインでも結果表示されていました。キャッシュの問題なのか、再現しないのでちょっとわからないですが。。。