facebookのアカウントでログイン

はじめた

少し前からSymfonyでサービスを作ってて、
facebookのアカウントでログインできるようにしたいんだけどやり方がわからない。
ネットで調べても情報が古いし、
公式のドキュメントは英語なのでさっぱりだ。
やりたいことはこんな感じ。

1.facebookアカウントでログインボタンをクリック
↓
2.このアプリが基本情報にアクセスすることを許可しますか？みたいな画面
↓
3.許可するを選ぶとfacebookのアカウントを使用してログインが完了。自サービスにリダイレクト
↓
4.ログイン後はfacebookのプロフィール写真やユーザー名を表示して自サービス内で使用

よく見る流れだから簡単でしょ？と思ってたら全然わからない。
とりあえずやったことは、
facebook開発者の登録をしてアプリを制作するところまで。
App IDが準備できてるので、
JavaScript SDKでやってみることに。
Facebook for Websites - Facebook開発者
こちらを参考にして、
以下のサンプルコードを使う。

 <html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID',
            status     : true, 
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });
        };
        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>
      <div class="fb-login-button">Login with Facebook</div>
    </body>
 </html>

YOUR_APP_IDのところを自分のApp IDに変更。
サーバーにあげてブラウザでアクセス。
すると解説のようにログインボタンがでる。
なのでクリックするんだけど、
そこからどうしたらいいのやら。
これとは別に

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

というコードもあり
こちらはJavaScript SDKの初期化をするコードらしい。
YOUR_APP_IDとWWW.YOUR_DOMAIN.COMを自分の環境に置き換えて、
クロスドメイン対応用のChannel Fileも置いた。
でもこっちもこの後どうしたらいいのやら。
やりたいことは、
ここにサンプルがあるんだけど、
ここのコードと上記2つのコードをどう組み合わせればやりたいことができるのかわかんない。
うーん。難しい！