Facebookのアカウントでログインする

Sponsored Link
ロリポップ!レンタルサーバー

Facebookアカウントによるログインを試してみましたのでメモしておきます。

すでにとても多くの記事がありますが、特にFacebookのAPIは知らない間にバージョンアップされていたりするので、新しい日付で動作確認する事は無駄ではないかなと思っています。。。

Facebook PHP SDKについて

PHP SDK - ドキュメンテーション - Facebook for Developers
PHP SDK - ドキュメンテーション - Facebook for Developers developers.facebook.com
PHP SDK - ドキュメンテーション - Facebook for Developers

インストールは上のページのスタートガイドにあるGitHubから入手できます。

GitHub - facebookarchive/php-graph-sdk: The Facebook SDK for PHP provides a native interface to the Graph API and Facebook Login. https://developers.facebook.com/docs/phpThe Facebook SDK for PHP provides a native interface to the Graph API and Facebook Login. https://developers.facebook.com/docs/php - GitHub - facebookarchive/php-graph-sdk: The Facebook SDK for PH...
GitHub - facebookarchive/php-graph-sdk: The Facebook SDK for PHP provides a native interface to the Graph API and Facebook Login. https://developers.facebook.com/docs/php github.com
GitHub - facebookarchive/php-graph-sdk: The Facebook SDK for PHP provides a native interface to the Graph API and Facebook Login. https://developers.facebook.com/docs/php

現在のバージョンは5.7.0になります。

ダウンロードしたら、srcディレクトリにあるFacebookディレクトリをWebページで利用可能な場所に設置しましょう。

Sponsored Link

Facebook Developerでやること

以下、開発用の最低限の設定となります。

Facebookログインを実現する準備のため、Facebook Developerへログインします。

Facebook for DevelopersFacebook for Developersで人と人のつながりを広げましょう。AI、ビジネスツール、ゲーム、オープンソース、パブリッシング、ソーシャルハードウェア、ソーシャル統合、バーチャルリアリティを探求できます。開発者の学習と交流を促進するFacebookのグローバルプログラムをご確認ください。
Facebook for Developers developers.facebook.com
Facebook for Developers

恐らく初めてアクセスしたならばもう一度Facebookのログインを求められます。

ログイン後、右上のマイアプリをクリックして、アプリの作成を選択します。

Facebook Developer

新しいアプリの名前を入力。
この名前は、Facebookアカウントでログインする時に表示されます。(後から変更可能です。)

セキュリティチェックをチェックし、送信すると作成したアプリのダッシュボードが表示されます。

Facebookログインを追加します。Facebookログインの設定ボタンを押しましょう。

クイックスタートの画面になりますが今回は飛ばします。

Facebookログインの設定を開きます。

いくつかスイッチがありますが、そのままで問題ありません。
”HTTPSを強制”、”リダイレクトURIに制限モードを使用”は変更できませんが、どちらも重要なので対応できる環境を用意しましょう。”リダイレクトURIに制限モードを使用”することで、リダイレクトURIに完全一致するURIしか許可されないので、ハイジャックなどを防ぐ事ができます。

”有効なOAuthリダイレクトURI”にFacebookからのトークンを受け取るURIを入力します。

次にアプリの設定→ベーシック画面でアプリIDとapp secretを確認。

表示されているアプリIDとapp secret(表示ボタンを押すと表示される)をメモしておきましょう。

開発用ではこれだけで動作します。

 

Facebookログインの流れ

今回実装したフローです。

Facebookログインのフロー

いろいろとサンプルなどを参考に実装しました。

順を追って説明します。

ログイン画面とログイン実行

ログイン画面では、単純にログインを実行するPHPへのリンクだけです。

これは、サンプルを実装したところアプリIDなどが簡単に見えてしまうので、FacebookへのログインURLを生成してリダイレクトさせています。

//snslogin.php
<?php
  echo '<a href="FBLogin.php">Facebookでログイン</a>';
?>
//FBLogin.php
<?php
require_once("./Facebook/autoload.php");
session_start();
$fb = new Facebook\Facebook([
  'app_id' => 'XXXXXXXXXXXXXXXXX', // Replace {app-id} with your app id
  'app_secret' => 'XXXXXXXXXXXXXXXXX' ,
  'default_graph_version' => 'v4.0',
  ]);
   
$helper = $fb->getRedirectLoginHelper();
$permissions = ['email']; // Optional permissions アクセスしたいユーザ情報を記載
//コールバックURIを追加して、ログインURLを取得します。
$loginUrl = $helper->getLoginUrl('https://example.com/callback.php', $permissions);

header('Location: '.$loginUrl);
?>

FBLogin.php'app_id''app_secret'は、先ほど記録しておいたアプリIDとapp secretに書き換えます。

Facebookログイン

Facebookのログイン画面が表示されるので、アカウント情報を入力してログインします。

(画像無しですみません・・・)

この画面で、アプリの名前(Webログインのテスト)とアクセスする情報(公開プロフィールとメールアドレス)が表示されます。

Callback(トークンの取得と判定)

ログイン結果がcallback.phpに渡されます。

//callback.php(抜粋)

require_once("./Facebook/autoload.php");
session_start();
$fb = new Facebook\Facebook([
  'app_id' => 'XXXXXXXXXXXXXXXXX', // Replace {app-id} with your app id
  'app_secret' => 'XXXXXXXXXXXXXXXXX' ,
  'default_graph_version' => 'v4.0',
  ]);
   
$helper = $fb->getRedirectLoginHelper();

//アクセストークンを取得する。トークンが取得できれば基本的にログイン成功。
$accessToken = $helper->getAccessToken();

//トークンが取得できているか判定
if (! isset($accessToken)) {
  if ($helper->getError()) {
    header('HTTP/1.0 401 Unauthorized');
    echo "Error: " . $helper->getError() . "\n";
    echo "Error Code: " . $helper->getErrorCode() . "\n";
    echo "Error Reason: " . $helper->getErrorReason() . "\n";
    echo "Error Description: " . $helper->getErrorDescription() . "\n";
  } else {
    header('HTTP/1.0 400 Bad Request');
    echo 'Bad request';
  }
  //トークン取得が失敗またはログインキャンセルのため、ログアウトページへ。
  header('Location: logout.php');
  exit;
}

//トークンが取得出来ていればmypageへリダイレクト。
if (isset($accessToken)) {
	//アクセストークンをセッションに保存
	$_SESSION['facebook_access_token'] = (string) $accessToken;
	header('Location: mypage.php');
	exit();
}else{
	echo "<a href='logout.php'>ログアウト</a>";
}

MyPage(ユーザ情報の取得)

MyPageではユーザ情報を取得。

//mypage.php(抜粋)

require_once("./Facebook/autoload.php");
session_start();
$fb = new Facebook\Facebook([
'app_id' => 'XXXXXXXXXXXXXXXXX', // Replace {app-id} with your app id
'app_secret' => 'XXXXXXXXXXXXXXXXX' ,
'default_graph_version' => 'v4.0',
]);

//セッションからトークンを取得
if (isset($_SESSION['facebook_access_token'])) {
    $accessToken = $_SESSION['facebook_access_token'];
} else {
    //セッションにトークンがないので、強制ログアウト
    header('Location: logout.php');
	exit;
}

$fb->setDefaultAccessToken($accessToken);

//ユーザ情報の取得
$fbresponse = $fb->get('/me?fields=id,name,email');
$fbprofile = $fbresponse->getGraphUser();  
//ユーザ画像
$fbUserPicture = $fb->get('/me/picture?redirect=false&height=100');
$fbpicture = $fbUserPicture->getGraphUser();

//取得結果を変数に格納
$fbid=$fbprofile['id'];
$fbname=$fbprofile['name'];
$fbemail=$fbprofile['email'];
$fbpicture_url = $fbpicture['url'];

ユーザ情報は上記のように取得できます。

エラー処理など全く抜けておりますが、これでFacebookのログインとユーザ情報取得ができましたので、サイト側でどのようにユーザ管理を実装するか検討しましょう。


 

Sponsored Link

前の記事

Font Awesomeのメモ

次の記事

WordPress iframe プラグイン