Facebook認証コンポーネント

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

手順1：
コンポーネントの概要

→

手順2：
コンポーネントを追加または削除する

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

Facebook認証のユーザーエクスペリエンス
構成の概要
手順1：FacebookアプリIDとクライアントトークンを取得する
手順2：アプリを構成する
手順3：FacebookアプリIDとトークンの値を暗号化する
手順4：ユーザーにログインを求めるタイミングを決定する
手順5：UIテキストをカスタマイズする
ユーザーがログインを延期できないようにする方法
Facebook認証コンポーネントのアクションをログで確認する方法

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

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

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

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

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

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

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

構成の概要

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

手順1：FacebookアプリIDとクライアントトークンを取得する
手順2：アプリを構成する
手順3：FacebookアプリIDとトークンの値を暗号化する
手順4：ユーザーにログインを求めるタイミングを決定する
手順5：UIテキストをカスタマイズする

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

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

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

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

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

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

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

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

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

注：読み込むことができるコンポーネントは、インターフェイスごとに1つだけです。たとえば、Adobe Pass認証コンポーネントとパススルーログインコンポーネントは、どちらも同じIAuthenticationインターフェイスを使用するため、両方を同時に読み込むことはできません。インターフェイスごとのコンポーネント一覧は、コンポーネントの概要を参照してください。

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

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

FacebookAuthComponent > res > valuesフォルダを展開し、strings.xmlファイルを開きます。
次の文字列をコピーし、アプリの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>
```
ヒント： ベストプラクティスとして、更新を取り入れるときは、常にコンポーネントのXMLファイルからアプリのカスタムcustom.xmlファイルに値をコピーします。そうすることで、アプリのXML値によってコンポーネントのXMLファイルの値が上書きされます。

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

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>

[Android] ビューで、Utils > java > com > amazon > utils > securityフォルダを展開し、ResourceObfuscationStandaloneUtilityクラスを開きます。
getRandomStringsForKey()メソッドに、fb_key_1、fb_key_2、fb_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として使用した値です。
getRandomStringsForIv()メソッドに、fb_key_4、fb_key_5、fb_key_6として使用した値をそれぞれ入力します。以下に例を示します。
```
    private static String[] getRandomStringsForIv() {

        return new String[]{
                "latinusOdysseusson332",
                "calypsoIslandShipBLLd99",
                "athenazeusEPICodysseY77"
        };
    }
}
```
この例の値はそれぞれ次のとおりです。
- latinusOdysseusson332は、fb_key_4として使用した値です。
- calypsoIslandShipBLLd99は、fb_key_5として使用した値です。
- athenazeusEPICodysseY77は、fb_key_6として使用した値です。
getPlainTextToEncrypt()メソッドで、Encrypt_this_textの代わりにFacebookクライアントトークンを入力します。
```
 private static String getPlainTextToEncrypt() {
        return "Encrypt_this_text";
    }
```
ResourceObfuscationStandaloneUtility.javaファイルを右クリックし、[Run 'ResourceObfusc…main()] を選択します。
暗号化された結果がコンソールに出力されていることを確認します。これは次のようになります。
```
Encrypted version of plain text 123456789 is mTWxLhZeHslQFwpN3irjfQ==
```
暗号化されたアプリ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>
```
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>
```
ヒント： ランダムキーは、必要時にすぐに参照できるように、社内のwikiなどの安全な場所に保管してください。これらのキーは、値を復号化するために必要です。

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

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

Navigator.jsonファイル（アプリのassetsフォルダ内）を開きます。
ユーザーにログインを求める画面について、verifyScreenAccessの値をtrueに設定します。たとえば、メディアの再生前にユーザーにログインを求める場合は、次のようにPlaybackActivityで画面へのアクセスを検証します。
```
  "com.amazon.android.uamp.ui.PlaybackActivity": {
  "verifyScreenAccess": true,
  "verifyNetworkConnection": true,
  "onAction": "CONTENT_RENDERER_SCREEN"
}
```
これで、ユーザーがアプリを起動してメディアを視聴しようとすると、ログインが求められます。

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

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

ContentBrowser > res > valuesに移動し、strings.xmlファイルを開きます。

次の文字列を、アプリの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>

文字列の値をカスタマイズします。

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

FacebookAuthComponent > res > valuesフォルダを展開し、custom.xmlファイルを開きます。
次の文字列を、アプリのcustom.xmlファイル（res > values内）にコピーします。
```
<bool name="is_authentication_can_be_done_later">true</bool>
```
文字列の値をfalseに変更します。