[Facebook SDK for PHP v5.0]を利用してログイン認証をおこなう[Oauth]

Facebook SDK for PHP v5.0（記事作成時）を利用して、Facebookでログインができる認証機能を作成します。

Facebook SDK for PHPは公式に用意されたライブラリで、Graph API（FacebookのソーシャルグラフAPI）を利用することによってユーザの様々な情報を取得し、また投稿などの機能を自分のウェブページに実装することができます。

Facebook SDK for PHPはComposerで管理することができますが、今回はManually installingから直接ファイルをダウンロードして利用します（記事作成時：facebook-php-sdk-v4-5.0.0ファイル）。

※下記デモ画面はHTTPS化に伴い現在利用できません。

デモ画面

※デモは名前、性別などを表示させているだけで、投稿したり、ユーザ情報をデータベースには保存したりすることはございません。

今回作成したアプリケーション（デモ画面）は、Facebookの名前・性別などのユーザ情報を取得する部分までを実装しました。

プログラミングの前にまずは以下のリンク先ページにてアプリの申請登録（Add a New App）をおこない、「App ID」と「App Secret」を取得しておきます。またSettings画面の「Client OAuth Settings」項目にある「Valid OAuth redirect URIs」の部分には、のちに説明するcallback.phpを、自分でアップした先のURLを登録しておいて下さい。

facebook for developers

Valid OAuth redirect URIsにcallback.phpのURLを登録しておく

OAuth自体の詳しい説明はしませんが、今回作成するFacebook SDK for PHPによる認証部分の流れは、以下の様になります。

認証フロー

1. 利用しているブラウザでFacebookにログインしていない場合は、一旦Facebookのログイン画面が表示されます。

2. ウェブアプリケーションに初めて登録しようとすると表示されます。

3. 2の画面で「OK（ユーザがアプリに対して個人情報の使用を許可する）」をクリックすると、「Valid OAuth redirect URIs」で指定したファイル（callback.php）にリダイレクトされます。

4. アクセストークンを取得したら、member.phpへリダイレクトさせます。（callback.php）

5. アクセストークンを元にユーザ情報を取得します。（member.php）

以上が大まかな流れですが、OAuthを利用するプログラミングにおいて、アクセストークンを取得することがの第一の目的だと考えても良いでしょう。

ディレクトリ構成

ダウンロードしたファイルの facebook-php-sdk-v4-5.0.0 > src > Facebook　が実際に利用するライブラリです。

config.php（設定ファイル）

<?php
require_once("Facebook/autoload.php");

$fb = new Facebook\Facebook([
  'app_id' => '◯◯◯◯◯',
  'app_secret' => '◯◯◯◯◯',
  'default_graph_version' => 'v2.5',
]);

<?php

require_once("Facebook/autoload.php");

$fb = new Facebook\Facebook([

'app_id' => '◯◯◯◯◯',

'app_secret' => '◯◯◯◯◯',

'default_graph_version' => 'v2.5',

]);

5・6行目

「App ID」と「App Secret」を設定します。

index.php

<?php
session_start();

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

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

$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('https://noumenon-th.net/programming/sample/php/facebook/callback.php', $permissions);

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

<?php

session_start();

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

//設定ファイル

require_once("config.php");

$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('https://noumenon-th.net/programming/sample/php/facebook/callback.php', $permissions);

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

17行目

ウェブアプリケーションに初めて登録しようとすると、以下のような認証画面が表示されます。その際にユーザに対してどのような情報を取得するのかを文言で喚起させます。オプションの内容によって「あなたの〜」以降の文言が変わります。

アプリ認証

18行目

引数に、アプリのSettings画面の「Client OAuth Settings」>「Valid OAuth redirect URIs」で設定したURLと、認証内容のオプションを設定します。

callback.php

<?php
session_start();

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

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

//タイムゾーンの設定
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();
	}
} 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>";
}

<?php

session_start();

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

//設定ファイル

require_once("config.php");

//タイムゾーンの設定

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();

}

} 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>";

}

初めてウェブアプリケーションに登録する時にユーザが「OK（もしくはキャンセル）」をクリック、またはindex.phpからログインした際に呼ばれるファイルです。19行目にてアクセストークンを取得して、33行目にてそのアクセストークンをセッションに保存しています。

アクセストークンを取得すれば、実質的にログイン状態となります。このファイルでは35行目にてmember.phpへと画面遷移させています。

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 "<p>アクセストークン：".$accessToken."</p>";
	echo "<p>ID：".$id."</p>";
	echo "<p>名前：".$name."</p>";
	echo "<p>性別：".$gender."</p>";
	echo "<p>ファーストネーム：".$first_name."</p>";
	echo "<p>ラストネーム：".$last_name."</p>";
	echo "<p>メール：".$email."</p>";//ユーザが未公開・未設定の場合は表示されない
	echo "<p><img src=".$picture_url."></p>";
	
	echo "<p><a href='logout.php'>ログアウト</a></p>";

}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>

<?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();

}

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>

ログイン後の画面です。アクセストークンを保持していれば、常にユーザ情報を取得することが可能です。アクセストークンは、一ユーザに対して一意的に与えられるので、この値（もしくは34行目のID）をデータベースなどに格納しておけば、既存のユーザであるのかを判定することができます。

ただし、callback.phpの19行目（$helper->getAccessToken()）において取得するアクセストークンは、その都度新しいアクセストークンが生成されているのでデータベースの値も更新しておく必要があります（古いアクセストークンでもユーザ情報は取得できます）。

61〜77行目

このスクリプトが無いと、ログイン後のURLでmember.phpの後ろに #_=_ が付加されています。Facebook側の仕様のようですが、このスクリプトを記述しておけば取り除くことが可能です。

参照ページ

Facebook Callback appends ‘#_=_’ to Return URL

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 "<p>ログアウトしました。</p>";
 
echo "<a href='index.php'>はじめのページへ</a>";