Facebookでログイン機能を実装してみる

スポンサーリンク

業務で使う機会があったので備忘録として残します。
Facebookでログイン機能を使えばFacebookの会員情報を使ってサイトのログインシステムを構築・管理することができます。かなり便利です。

Facebook開発者の登録

Facebookでログインをさせる為には、開発者登録をしないといけません。開発者登録は下記から出来ます。
https://developers.facebook.com/

ページに遷移したら、「Log in」をクリックします。
スクリーンショット_2016-02-01_17_36_16

「電話番号orメールアドレス」、「パスワード」を入力します。
スクリーンショット_2016-02-01_17_38_21

これで開発者登録は完了です。

Facebookアプリケーションの作成

Facebook開発者ページ( https://developers.facebook.com/ )に戻って、ログイン出来ている事を確認します。
スクリーンショット_2016-02-01_17_41_15

右上の「My Apps」をクリックしてメニューを表示させ、「Add a New App」をクリックします。
スクリーンショット_2016-02-01_17_44_13

アプリケーションの種類を選択します。現在は下記4種類があるようです。
iOS
Android
Facebookキャンバス
ウェブサイト
ここではwebアプリケーションとしてFacebookログイン機能を作成していきます。右の「ウェブサイト」をクリックします。
スクリーンショット_2016-02-01_17_49_34

今から作成するFacebookアプリケーションにアプリケーションID名をつけます。好きなID名を入力します。ここではテストとして「hogehogehoge」と入力します。入力したら「Create New Facebook App ID」をクリックします。
スクリーンショット_2016-02-01_17_57_15

作成するFacebookアプリケーションの設定を行います。
別のアプリケーションのテストバージョンではないので「いいえ」を選択します。カテゴリーは皆さんのサイトにあわせて選択してください。ここでは「コミュニケーション」を選択します。問題なければ「アプリIDを作成」をクリックします。
スクリーンショット_2016-02-01_18_03_20

アプリIDを作成をクリックすると、下記画面が出てきます。下記に表示されたJavaScriptをサイトのタグ直下に入れます。
スクリーンショット_2016-02-02_12_19_03

このような感じ。コードを入れた場所がタグ直下であることに注目。
スクリーンショット_2016-02-02_12_24_02

コードを入れたら、先ほどJavaScriptのコードが表示されていたページに戻って下にスクロールします。すると、URLを入力するテキストフォームがあるのでサイトのURLを入力します。入力後、「Next」をクリックします。
スクリーンショット_2016-02-02_12_29_34

サイトのURLの入力が完了すると下記画面が表示されます。これは実際にサイトに「Like Button」を設置するテストです。コードをコピーして実際にサイトに貼り付けてみましょう。
スクリーンショット 2016-02-02 12.32.22

私は下記のような感じで貼り付けてみました。
スクリーンショット 2016-02-02 12.46.19

実際に表示を確認してみると、、、
スクリーンショット 2016-02-02 12.47.57
ばっちり表示されました。問題はなさそうです。

最後に「Skip to Developer Dashboard」リンクをクリックします。
スクリーンショット_2016-02-02_12_49_33

Facebookアプリケーション(hogehogehoge)のダッシュボードが表示されます。
スクリーンショット_2016-02-02_12_57_29

これでFacebookアプリケーションの作成は完了です。

Facebookアプリケーションの設定

作成したFacebookアプリケーションの詳細設定をします。
引き続きダッシュボード画面の左メニューにある「Settings」をクリックします。クリック後、Contact EmailにEmailアドレスをSite URLにサイトのURLを入力します。入力後「Save Changes」をクリックして保存します。
スクリーンショット_2016-02-02_13_04_44

左メニューにある「App Review」をクリックします。右に表示されるスライダーボタンを「Yes」にして公開し、アクティブ化します。
スクリーンショット_2016-02-02_13_14_59

これでアクティブ化されました。
スクリーンショット_2016-02-02_13_15_21

これでFacebookアプリケーションの設定は完了です。

Facebook SDK(php)をダウンロード・デプロイ

Facebook APIを使いやすくしたSDKがあるので是非使いましょう。下記からダウンロードできます。言語はPHPのものをダウンロードします。
https://github.com/facebookarchive/facebook-php-sdk

githubのページに遷移して、「Download ZIP」をクリックします。
スクリーンショット_2016-02-02_13_26_59

Downloadされた圧縮フォルダーを解凍すると下記のファイル郡が展開されます。使用するファイルは「src」フォルダーに入ってある「base_facebook.php」と「facebook.php」と「fb_ca_chain_bundle.crt」です。このファイルを同階層でサーバーにアップロードします。
スクリーンショット_2016-02-02_13_32_08

私はサーバーに「src」のフォルダーをまるごとアップロードしました。
スクリーンショット_2016-02-02_13_43_06

これで準備が整いました。

Facebookでログインを試してみる

Facebookでログイン機能を実装するために今度はソースを書いていきます。まずログインページは下記のように書きました。

<?php
    // アップロードしたFacebook SDKのfacebook.phpまでのパス
    require_once("../src/facebook.php");
    // appIdとsecretを入力。appIdとsecretはDashboardで確認できます。
    $config = array(
        'appId' => '◯●◯●◯●◯●◯●◯●◯●◯●', 
        'secret' => '◯●◯●◯●◯●◯●◯●◯●◯●◯'
    );
    // 下記の様に$configを引数に持たせて、インスタンス化させます
    $facebook = new Facebook($config);
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?php // $facebook->getLoginUrl()でログインのURLを生成します。?>
        <a href="<?php echo $facebook->getLoginUrl();?>">ログイン</a>
    </body>
</html>

上記PHPファイルをアップロードしてアクセスすると下記のようにブラウザに表示されます。
スクリーンショット 2016-02-02 14.15.52

すると、facebookにリダイレクトされ認証がはじまります。「OK」をクリックします。
スクリーンショット_2016-02-02_14_18_41

何も表示されませんがログインリンクをクリックしたユーザの情報は返ってきています。
スクリーンショット 2016-02-02 14.15.52

実際に帰ってきたユーザ情報を取得してみましょう。上記のソースに少し処理を加えます。

<?php
    // アップロードしたFacebook SDKのfacebook.phpまでのパス
    require_once("../src/facebook.php");
    // appIdとsecretを入力。appIdとsecretはDashboardで確認できます。
    $config = array(
        'appId' => '◯●◯●◯●◯●◯●◯●◯●◯●', 
        'secret' => '◯●◯●◯●◯●◯●◯●◯●◯●◯'
    );
    // 下記の様に$configを引数に持たせて、インスタンス化させます
    $facebook = new Facebook($config);
    
    // ユーザIDの取得
    $user = $facebook->getUser();
    
    if($user){
        // ユーザの情報を取得
        $userStatus = $facebook->api('/me','GET');
        var_dump($userStatus);
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="<?php echo $facebook->getLoginUrl();?>">ログイン</a>
    </body>
</html>

追加したコードは、13〜19行目です。
13行目では、FacebookログインしたユーザのIDを取得します。
15行目でユーザのIDが空でない場合は、$facebook-api(‘/me’, ‘GET’);でユーザの情報を取得します。
18行目で取得した情報を展開しています。

phpファイルを更新してアクセスして最ログインすると、、、
スクリーンショット_2016-02-02_14_36_02

ばっちりfacebookで使っている名前を取得することができました。

もちろん、名前だけでなく他の情報も取得することも可能です。
※ログインするユーザが許可した場合のみ。

例えば、ユーザ名とEmailアドレスを取得したい場合は下記のように書きます。

<?php
    // アップロードしたFacebook SDKのfacebook.phpまでのパス
    require_once("../src/facebook.php");
    // appIdとsecretを入力。appIdとsecretはDashboardで確認できます。
    $config = array(
        'appId' => '◯●◯●◯●◯●◯●◯●◯●◯●', 
        'secret' => '◯●◯●◯●◯●◯●◯●◯●◯●◯'
    );
    // 下記の様に$configを引数に持たせて、インスタンス化させます
    $facebook = new Facebook($config);
    
    // ユーザIDの取得
    $user = $facebook->getUser();
    
    if($user){
        // ユーザの情報を取得
        $userStatus = $facebook->api('/me?fields=name,email','GET');
        var_dump($userStatus);
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="<?php echo $facebook->getLoginUrl();?>">ログイン</a>
    </body>
</html>

変更した箇所は17行目のみです。Facebookでログインでユーザの情報を取得する方法が、2015年7月9日以降変更になったようなので注意です。

$userStatus = $facebook->api(‘/me’,’GET’);
の/meの後に欲しいパラメータを追加するだけです。
$facebook->api(‘/me?fields=name,email’,’GET’);

なので欲しいパラメターを
/me?fields=
の後に「,」区切りで追加する感じです。

実際に取得してみると、、、
スクリーンショット_2016-02-02_15_11_10
バッチリ「名前」と「メールアドレス」が取得できました。

「名前」や「メールアドレス」以外に取得できるパラメターは下記のデバッグページで確認できます。
https://developers.facebook.com/tools/explorer/145634995501895/?method=GET&path=me

後は、取得したIDやメールアドレスをコチラ側のサーバーのDBに保存するとそれだけで管理が出来ますね。素晴らしいです。

参考文献

PHP で「Login with Facebook」を実装する基本的な方法まとめ

スポンサーリンク
スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク

コメント

  1. […] 参考サイト:Facebookでログイン機能を実装してみる http://iwasakiyouhei.com/post-3935/#Facebook-2 その際に ・アプリID ・app secret ・APIバージョン を記録しておく […]