アクセストークンを取得する (User Login Client-side Flow)

Facebookの認証後に発行されるアクセストークンを取得するには、複数の方法があります。
(いずれもOAuthの仕組みが使われています)

「User Login Client-side Flow」は、

  1. クライアントサイドからGraph APIをコールする。
  2. Facebookのアカウントで認証を行う。
  3. 認証後にアクセストークンが発行される。
フローでアクセストークン取得を行います。

アクセストークン取得の流れ

  1. Graph API "https://www.facebook.com/dialog/oauth" に、GETパラメータを付加してコールする。
    <script type='text/japascript'>
    
    ////////// ↓ 解説を参照 //////////
    
    // 【client_id】を参照
    var client_id = '...';
    // 【redirect_uri】を参照
    var redirect_uri = window.location;
    // 【response_type】を参照
    var response_type = 'token';
    
    ////////// ↑ 解説を参照 //////////
    
    
    // Graph APIをコール
    var url = 'https://www.facebook.com/dialog/oauth'
            + '?client_id=' + client_id
            + '&redirect_uri=' + redirect_uri
            + '&response_type=' + response_type;
    
    location.href = url;
    
    </script>
    

    解説

    【client_id】

    FacebookアプリのアプリケーションID(App ID/API Key)を指定。 確認方法

    【redirect_uri】

    Facebookの認証後のリダイレクト先URLを指定。
    リダイレクト先でアクセストークンの取得を行う。
    指定するURLはFacebookアプリの設定の、 「サイトURL」で設定したURLに含まれるパスであること。

    例:
    サイトURLに
    "http://www.example.com/facebook/"
    を設定している場合、リダイレクト先に指定できるURLは
    "http://www.example.com/facebook/authorize.php"
    等になる。

    サイトURLの確認・設定方法

    【response_type】

    Facebook認証後のリダイレクトで返される値を指定。

    • token : アクセストークンを返す。
    • code : authorization codeを返す(デフォルト)。
      ※authorization codeはServer-side Flowで使用する。
    • code token : アクセストークン、authorization code双方を返す。

    ※この他にオプションのパラメータがあるが、詳細は後述のオプションパラメータを参照。

  2. Facebook未ログインの場合、ログイン画面が表示されるのでログインを行う。

    画像クリックで拡大

  3. (対象のアプリが未設定であった場合は、ログイン後に以下のような画面が表示される)

    画像クリックで拡大

    パーミッションを指定している場合)

    画像クリックで拡大

  4. 認証後のリダイレクト先に指定したURLに "#access_token=...(&expires_in=...)" のような形でアクセストークンが付加され、リダイレクトされる。
    ※ "expires" はアクセストークンの有効な時間(秒)。
  5. オプションパラメータ

    アクセストークンの取得処理では、いくつかのオプションを指定することができる。
    最初にコールするGraph API "https://www.facebook.com/dialog/oauth" に、以下のようなパラメータをオプションとして付加する。

    <script type='text/japascript'>
    
    // ※「アクセストークン取得までの流れ」での解説を参照
    var client_id = '...'; // 【client_id】
    
    ////////// ↓ 解説を参照 //////////
    
    // 【scope】
    var scope = 'publish_stream,read_stream';
    // 【display】
    var display = 'popup';
    
    /////////// ↑ 解説を参照 //////////
    
    
    var url = 'https://www.facebook.com/dialog/oauth'
            + '?client_id=' + client_id
            + '&redirect_uri=' + window.location
            + '&response_type=token'
            + '&scope=' + scope
            + '&display=' + display;
    
    location.href = url;
    
    </script>
    

    解説

    【scope】

    Facebookアプリに付与する権限を指定。
    付与可能な権限の一覧は下記を参照。
    Facebook Developeres - Permissions - Extended Permissions

    例:

    • read_stream : ニュースフィードへのアクセス権限。
    • publish_stream : 自身の名前でのFacebook投稿権限。
    • offline_access : 常時情報アクセス権限。

    複数の権限を「read_stream,offline_access」のように、カンマ区切りで指定することが可能。

    【display】

    ログイン画面の表示方法を指定。 表示方法の一覧は下記を参照。
    Facebook Developeres - Dialogs Overview - Display Modes

    例:

    • page : PCのWebブラウザでログイン画面を表示させる場合に使用(デフォルト)。
    • popup : Webページのポップアップで表示させるような場合に使用。

    サンプルコード

    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script type='text/javascript'> 
    
    // ※「アクセストークン取得までの流れ」での解説を参照
    var client_id = '...'; // 【client_id】
    
    if (window.location.hash.length == 0) {
        
        // Facebook認証後のリダイレクトによるアクセスではない場合
        // (= URLに "#" がない場合)
        
        // Facebook認証に遷移
        // 例;
        // Facebook未ログインの場合 → Facebookログイン画面を表示
        // Facebookログイン済 + アプリを許可済の場合
        // → "redirect_uri" に指定したURLに、"#" + アクセストークンが
        // 付加されてリダイレクトされる
        var url = 'https://www.facebook.com/dialog/oauth'
                + '?client_id=' + client_id
                + '&redirect_uri=' + window.location
                + '&response_type=token'
                + '&scope=publish_stream,read_stream'
                + '&display=popup';
        location.href = url;
        
    } else {
        
        if (window.location.search.length == 0) {
            
            // Facebook認証成功の場合
            
            // "redirect_uri" に指定したURLに、"#" + アクセストークンが
            // 付加されてリダイレクトされる
            alert(window.location.hash.substring(1));
            
        } else {
        
            // アクセス拒否の場合
            
            // Facebookアプリのインストール / 権限許可の画面で
            // "キャンセル" ボタンを押す等した場合、
            // "redirect_uri" に指定したURLにGETパラメータ
            // "error" "error_reason" "error_description"
            // が付加されてリダイレクトされる
            alert(window.location.search.substring(1));
        }
    }
    </script> 
    </head>
    <body>
    </body>
    </html>
    

    参考サイト