開発者コンソール

Facebook認証コンポーネント

Facebook認証コンポーネント

 IV: コンポーネントを追加して機能を強化する

Facebook認証コンポーネントを使用すると、ユーザーがメディアを視聴する(またはほかのアクションを実行する)前に、Facebookでログインするように求めることができます。

Facebook認証のユーザーエクスペリエンス

メディアを再生する前にユーザーにログインを要求する場合、コンテンツの詳細画面でユーザーが [今すぐ観る] をクリックすると、次のプロンプトが表示されます。

PlaybackActivityでverifyScreenAccessがtrueに設定されている場合のログインプロンプト

[後で] をクリックすると、Facebookにログインせずにメディアを視聴できます。ログインプロンプトが再度表示されることはありませんが、ユーザーはアプリの下部にある [ログイン] ボタンをクリックしていつでもログインできます。

[今すぐ] をクリックすると、コンピューターのブラウザでFacebookにログインするように求められます。

Facebookへのログインを求めるプロンプト

ログインすると、Facebookから次のスクリーンショットの画面が表示されます。

Facebookへのログインに成功したことを示すブラウザの画面

ユーザーは、ブラウザウィンドウで [Continue] をクリックしてから、Fire TV画面のFacebookログインプロンプトで [送信] をクリックします。

構成の概要

Facebook認証コンポーネントを構成するには、次の手順に従います。

手順1:FacebookアプリIDとクライアントトークンを取得する

アプリIDとクライアントトークンを取得するには、まず、Facebook対応アプリをセットアップする必要があります。設定したアプリ名は、ユーザーがコンピューターのブラウザでログインするときに表示されます。したがって、ユーザーに通知する名前(通常は作成するFire TV対応アプリの名前)を選択してください。

これらの手順は、2016年6月に作成されたものです。それ以降、Facebookによってボタン名、手順、ワークフローの一部が変更されている可能性があります。

Facebook対応アプリを作成するには、次の手順を実行します。

  1. Facebook for Developersサイトのアプリの作成に移動し、Facebook対応アプリを作成します。必ず手順1、2、3に従ってください。
  2. 手順3で [新しいFacebookアプリを作成する] をクリックしたら、[Android] を選択します。
  3. [Quick Start for Android] 画面で、アプリの名前を入力します(Fire TV対応アプリと同じ名前を使用します)。[Create New Facebook App ID] をクリックします。
  4. 必須フィールドに入力して、Facebook対応アプリを作成します。[Tell us about your Android project] セクションでは、[Package Name][Default Activity Class Name] が必須ですが、これらのフィールドはGoogle Playに関連しているため、実際には使用されません。
  5. [Next] をクリックすると、[Google Play Package Name] ダイアログボックスが表示され、Google Playでパッケージ名が見つからないことが通知されます。[Use this package name] をクリックして、メッセージを無視します。
  6. 次に、 [Add your development and release key hashes] というセクションが表示されます。 このセクションの手順に従ってキーハッシュを生成し、[Key Hashes] フィールドに追加します。[Next] をクリックします。
  7. これでAndroid用クイックスタートが完了しました。画面の右上にある [My Apps] をクリックし、新しいアプリを選択します。
  8. 左側のサイドバーの [PRODUCTS] で、[+ Add Product] をクリックします。
  9. [Facebook Login] の横にある [Get Started] をクリックします。
  10. [Client OAuth Settings] セクションで、[Login from Devices] をオンにします。

    Facebook対応アプリの [Client OAuth Settings]
  11. [Save Changes] をクリックします。
  12. 左側のサイドバーで、[Settings] > [Basic] の順にクリックします。[App ID] を、後で参照しやすい場所にコピーします。
  13. 左側のサイドバーで、[Settings] > [Advanced] の順にクリックします。[Client Token] を、後で参照しやすい場所にコピーします。

手順2:アプリを構成する

  1. Facebook認証コンポーネントをアプリに読み込みます。アプリにコンポーネントを読み込む方法の詳細については、アプリ内のコンポーネントを追加または削除するを参照してください。

    アプリにほかの認証コンポーネント(AdobepassAuthComponent、PassThroughLoginComponent、LoginWithAmazonComponent)が読み込まれている場合は、すべて削除してください。

手順3:FacebookアプリIDとトークンの値を暗号化する

アプリには、暗号化されたバージョンのFacebookアプリIDとクライアントトークンを挿入する必要があります。アプリIDとクライアントトークンを暗号化するには、次の手順を実行します。

  1. FacebookAuthComponent > res > valuesフォルダを展開し、strings.xmlファイルを開きます。
  2. 次の文字列をコピーし、アプリのcustom.xmlファイルに貼り付けます。

    <string name="encrypted_fb_client_token">YOUR_ENCRYPTED_FB_APP_CLIENT_TOKEN</string>
    <string name="encrypted_fb_app_id">YOUR_ENCRYPTED_FB_APP_ID</string>
    
    <string name="fb_key_1">fb_random_key_1</string>
    <string name="fb_key_2">fb_random_key_2</string>
    <string name="fb_key_3">fb_random_key_3</string>
    <string name="fb_key_4">fb_random_key_4</string>
    <string name="fb_key_5">fb_random_key_5</string>
    <string name="fb_key_6">fb_random_key_6</string>
    

    encrypted_authentication_client_tokenは、Facebook対応アプリの作成時に生成したクライアントトークンの暗号化されたバージョンです。encrypted_authentication_app_idは、FacebookアプリIDの暗号化されたバージョンです。これらの値は、この後の手順で暗号化します。暗号化の作成にはランダムキーが使用されます。

  3. fb_key_[#]の値のそれぞれに、ランダムな英数字の文字列を入力します。以下に例を示します。

    <string name="fb_key_1">odysseusgrEEk2000bc</string>
    <string name="fb_key_2">helengreekFAce5000ships</string>
    <string name="fb_key_3">homer@1storyTllr20</string>
    <string name="fb_key_4">latinusOdysseusson332</string>
    <string name="fb_key_5">calypsoIslandShipBLLd99</string>
    <string name="fb_key_6">athenazeusEPICodysseY77</string>
    
  4. [Android] ビューで、Utils > java > com > amazon > utils > securityフォルダを展開し、ResourceObfuscationStandaloneUtilityクラスを開きます。
  5. getRandomStringsForKey()メソッドに、fb_key_1fb_key_2fb_key_3として使用した値をそれぞれ入力します。

    たとえば、これらの最初の3つのキーが前のコードサンプルに示した値である場合、次のように入力します。

    private static String[] getRandomStringsForKey() {
    
        return new String[]{
                "odysseusgrEEk2000bc",
                "helengreekFAce5000ships",
                "homer@1storyTllr20"
        };
    }
    

    この例の値はそれぞれ次のとおりです。

    • odysseusgrEEk2000bcは、fb_key_1として使用した値です。
    • helengreekFAce5000shipsは、fb_key_2として使用した値です。
    • homer@1storyTllr20は、fb_key_3として使用した値です。
  6. getRandomStringsForIv()メソッドに、fb_key_4fb_key_5fb_key_6として使用した値をそれぞれ入力します。以下に例を示します。

        private static String[] getRandomStringsForIv() {
    
            return new String[]{
                    "latinusOdysseusson332",
                    "calypsoIslandShipBLLd99",
                    "athenazeusEPICodysseY77"
            };
        }
    }
    

    この例の値はそれぞれ次のとおりです。

    • latinusOdysseusson332は、fb_key_4として使用した値です。
    • calypsoIslandShipBLLd99は、fb_key_5として使用した値です。
    • athenazeusEPICodysseY77は、fb_key_6として使用した値です。
  7. getPlainTextToEncrypt()メソッドで、Encrypt_this_textの代わりにFacebookクライアントトークンを入力します。

     private static String getPlainTextToEncrypt() {
            return "Encrypt_this_text";
        }
    
  8. ResourceObfuscationStandaloneUtility.javaファイルを右クリックし、[Run 'ResourceObfusc…main()] を選択します。

  9. 暗号化された結果がコンソールに出力されていることを確認します。これは次のようになります。

    Encrypted version of plain text 123456789 is mTWxLhZeHslQFwpN3irjfQ==
    
  10. 暗号化されたアプリIDをコピーし、アプリのcustom.xmlファイルにencrypted_fb_client_token文字列の値として貼り付けます。以下に例を示します。

    <string name="encrypted_fb_client_token">rneiu89EIxnk9489faoPoaQ</string>
    <string name="encrypted_fb_app_id">YOUR_ENCRYPTED_FB_APP_ID</string>
    
  11. getPlainTextToEncrypt()メソッドにFacebookアプリIDを入力し、(同じ乱数文字列を使用して)スクリプトを再度実行します。暗号化されたキーを、アプリのcustom.xmlファイルにあるencrypted_fb_app_id文字列の値にコピーします。以下に例を示します。

    <string name="encrypted_adobe_pass_public_key">gnobHJEIxnkBMobJk7mBaQ==</string>
    <string name="encrypted_adobe_pass_private_key">AQ/9Qtc26GzLVSHRe1ftPw==</string>
    

手順4:ユーザーにログインを求めるタイミングを決定する

ユーザーにFacebookへのログインを求める画面を構成できます。

  1. Navigator.jsonファイル(アプリのassetsフォルダ内)を開きます。
  2. ユーザーにログインを求める画面について、verifyScreenAccessの値をtrueに設定します。たとえば、メディアの再生前にユーザーにログインを求める場合は、次のようにPlaybackActivityで画面へのアクセスを検証します。

      "com.amazon.android.uamp.ui.PlaybackActivity": {
      "verifyScreenAccess": true,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_RENDERER_SCREEN"
    }
    

    これで、ユーザーがアプリを起動してメディアを視聴しようとすると、ログインが求められます。

手順5:UIテキストをカスタマイズする

ユーザーにログインを求めるダイアログボックスに表示されるテキストを変更するには、次の手順を実行します。

  1. ContentBrowser > res > valuesに移動し、strings.xmlファイルを開きます。
  2. 次の文字列を、アプリのcustom.xmlファイル(res > values内)にコピーします。

    <string name="optional_login_dialog_title">ログイン</string>
    <string name="optional_login_dialog_message">今すぐログインしてアプリを最大限にご活用ください。</string>
    <string name="now">今すぐ</string>
    <string name="later">後で</string>
    
  3. 文字列の値をカスタマイズします。

ユーザーがログインを延期できないようにする方法

デフォルトでは、Facebookログインを後にするオプションがユーザーに提供されます。この場合、ユーザーがログインのプロンプトで [後で] をクリックすると、[Login Settings] ボタンを使用して後からログインできます。

  1. FacebookAuthComponent > res > valuesフォルダを展開し、custom.xmlファイルを開きます。
  2. 次の文字列を、アプリのcustom.xmlファイル(res > values内)にコピーします。

    <bool name="is_authentication_can_be_done_later">true</bool>
    
  3. 文字列の値をfalseに変更します。

Facebook認証コンポーネントのアクションをログで確認する方法

ユーザーがいったんログインした後でFire TV対応アプリを再起動すると、Facebook認証コンポーネントは、ユーザーが既にログインしているかどうかを自動的に確認します。logcatにフィルターを適用して「facebook」だけを表示すると、ユーザーがログインしていない場合、次のようなログが表示されます。

06-24 17:39:18.602 29089-29089/com.amazon.android.calypso D/FacebookAuthenticationModuleInitReceiver: IAuthenticationModule initialized.
06-24 17:39:18.684 29089-29089/com.amazon.android.calypso D/FacebookAuthentication: Facebook configured and previous access token is:
06-24 17:39:43.566 29089-29089/com.amazon.android.calypso D/FacebookAuthentication: Checking if user is logged in
06-24 17:39:43.569 29089-29089/com.amazon.android.calypso D/FacebookAuthentication: Access token is null.User not logged in.
06-24 17:39:43.612 29089-29089/com.amazon.android.calypso D/Navigator: FacebookAuthenticationActivity onActivityCreated

この場合、ユーザーはログインしていないため、FacebookAuthenticationActivityが作成されます。

ユーザーがログインしている場合、logcatの表示は次のようになります。

06-24 17:46:27.933 29089-29148/com.amazon.android.calypso D/FacebookApi: Making http call to Facebook url: https://graph.facebook.com/v2.6/device/login_status
06-24 17:46:28.235 29089-29148/com.amazon.android.calypso D/FacebookApi: Response from HTTP call: {"access_token":"AAOA4zsiSjMBAJa42JB2LTTyIjq3hQTAl9RTq5FVA8QxKQFhhBlGlqGXpsqQYX9Puo5ZAZBW2eUgoyYquifpTaZAKS9SJhvJefv0hUMjGqAmjuOVNOxNjZCxQQmA23dc4Xcqhs8goZBIuYmbYKuJnltAopk5dQF4ZD","expires_in":5183946}
06-24 17:46:28.235 29089-29089/com.amazon.android.calypso D/com.amazon.android.auth.facebook.FacebookAuthentication: Storing access token: AAOA4zsiSjMBAJa42JB2LTTyIjq3hQTAl9RTq5FVA8QxKQFhhBlGlqGXpsqQYX9Puo5ZAZBW2eUgoyYquifpTaZAKS9SJhvJefv0hUMjGqAmjuOVNOxNjZCxQQmA23dc4Xcqhs8goZBIuYmbYKuJnltAopk5dQF4ZD
06-24 17:46:28.257 29089-29089/com.amazon.android.calypso D/Navigator: FacebookAuthenticationActivity onActivityPaused
06-24 17:46:28.257 29089-29089/com.amazon.android.calypso D/AnalyticsManager: FacebookAuthenticationActivity onActivityPaused, analytics tracking.

この場合、セッションはまだアクティブであるため、アクセストークンが取得されます。その結果、ユーザーは自動的にログインされます。

イベントがレポートされる形式を変更するには、FacebookAuthComponent > java > com.amazon.android.auth.facebook > FacebookApi.javaの文字列値を手動でカスタマイズします。たとえば、分析で「name」という用語を使用しないようにするには、次の文字列を別の値にカスタマイズします。

public static final String NAME = "name";

ログイン設定をクリアするには、Fire TV対応アプリで下にスクロールし、[ログアウト] ボタンをクリックします。