CoComina– Web design and Programing –

Facebook for Developersでアプリを作成

まずは、これがないと始まりません。Facebook for Developersにてアプリを作成します。

Facebook Developersに登録して「新しいアプリを追加」を選択します。

作成するアプリ名（32文字まで）、連絡用メールアドレスなどを記載して次に進みます。

※ アプリ名は表示されますので使用するWebサービスと違和感ない名前をつけましょう

このアプリで使用する機能を「プロダクト設定」の中から選びます。今回はOAuth認証を使用しますので、
「Facebookログイン」の横の「スタート」をクリックします。

ここまで行うとサイドバーの「プロダクト」にFacebook ログインが追加されているはずです。

次にこのアプリの設定を行います。

アプリドメインを設定して公開する

アプリを作成したら次にこのアプリを使用するドメインとプラットフォームを設定します。

サイドバー → 設定 → ベーシックを開きアプリドメインとプラットフォームを設定します。
※URL入力する箇所がない場合は「+プラットフォームを追加」をクリックして「ウェブサイト」を選択してください。

次にアプリを公開します。デフォルトでは非公開となっていてこのままではメールアドレスを取得できません。
サイドバー → アプリレビューを選択してこのアプリを公開します。これでメールアドレスを取得できるようになりました。

公開後に取得できるFacebook情報は下記の5つです。その他の情報はFacebookにレビュー申請し審査が必要です。

• Facebook ID
• User Name
• E-mail
• Public Profile
• User Friends

注意：Facebook IDは大切な情報ですので表示しないようにしてください。

ログイン用URLの設定

ここまできたら後は簡単です。先ほど作成したアプリのIDをまず、メモしておきます。

次に下記のコードを使ってログイン用リンクを設定します。

<a href="//www.facebook.com/dialog/oauth?client_id=[Facebook APP ID]&redirect_uri=[Redirect URI]&auth_type=rerequest&scope=email">Facebookでログイン</a>

見てすぐにわかるかと思いますがパラメータの説明です。

• Facebook APP ID : アプリケーション ID
• Redirect URI : ログイン後のリダイレクト先のURL
• auth_type : rerequest（そのままでOK）
• scope : メールアドレスを取得したいのでemailを指定する

Facebook アプリはユーザが一度メールアドレスの認証などを拒否した場合などを記録します。そのためauth_type=requestを指定して一度認証を拒否したユーザにも再度リクエストを投げるように設定しておきましょう。

ここまで設定したら一度動きを確認してみましょう。下記の流れの通りに動いていればOKです。

• ログインボタンをクリック（ブラウザで既にログインしている場合はそのままリダイレクトする）
• Facebokのログイン画面が表示
• ログインする
• 指定したページにリダイレクトされる

Example Link

Facebookアカウント情報を表示

Facebookにログインできましたら、JavascriptでFacebookのアカウント情報を表示します。

今回はjQueryを使って「ID・User Name・E-mail」の3つをコンソールに表示してみたいと思います（先にjQueryを読み込んでおいてください）

$(document).on('ready', function(){
    (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 = '//connect.facebook.net/ja_JP/sdk.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

	window.fbAsyncInit = function(){
        FB.init({
            appId: 286053681840101, // アプリ ID
            xfbml: true,
            version: 'v2.9'
        });
        
        FB.getLoginStatus(function(response){
            if(response.status === 'connected'){
				FB.api('/me', {fields: 'id', 'name, email'}, function(response){
					console.log(response.id);    // ID
					console.log(response.name);  // 名前
					console.log(response.email); // メールアドレス
				});
            }
        });
    };
});

たったこれだけでFacebookの情報を取得して利用することができます（簡単ですね！）
22行目の「fields: ‘id, name, email’」で取得したい情報をカンマ区切りで指定することができます。

ちなみにアプリ公開後にデフォルトで取得できる情報は下記のリストをご参考ください。

• ID
• Full Name
• First Name
• Last Name
• E-mail
• Gender
• Link
• Locale
• timezone
• update_time
• verified

まとめ&所感

少し前に比べてかなり楽に実装することができるようになってありがたいです。
この機能を使えばフォームに名前やメールアドレスを自動入力させたりとサイトのフォームなどのユザービリティを少し向上できるかもしれません。ただ、Facebook、Twitter、Google+など様々なソーシャルネットワークサービスがある昨今、導入方法やログイン後の動きなどをある程度統一して欲しいと感じた今日この頃です。（OAuth.ioという有料サービスを使えば簡単ですが。。。）

最後まで読んでくれてありがとうございますー。