JSでのFacebook認証

こちらは、Photon Custom Authenticationを使ってFacebookの認証情報を用いてPhoton Cloudアプリケーションのユーザーを認証する方法の解説です。

概要

Photon Cloudカスタム認証は、外部の認証提供者（Authentication Provider）にユーザー認証のチェックを依頼する仕組みです。

認証フローの概要については、一般ドキュメントを参照してください。

通常、認証を行うサービスによって必要なパラメータは複数あります。

これらは、Photon Cloudアプリケーションの設定で静的に設定されるパラメータと、Photon Cloud JavaScriptクライアントAPI呼び出し時に渡される動的なパラメータです。

このチュートリアルでは、クライアント側で Facebook Loginプラグインを使用し、ユーザーのFacebookトークンを取得します。そして、そのトークンの有効性をPhotonサーバー側で当社のFacebook認証プロバイダーを利用して確認します。

Facebook認証の場合、認証プロバイダーは appid、secret、および token パラメータを必要とし、渡されたトークンが指定したアプリIDのFacebookアプリで有効であるかどうかをチェックします。

実装

既存のアプリケーションのためのカスタム認証有効化は、数ステップの簡単な手順で行えます。

1. Facebook Appセットアップ

Facebookのアプリ設定の詳細については、Facebookのドキュメントを参照してください。
このチュートリアルでは、 Facebook App ID および App Secretが必要です。

2. Photon Cloudアプリケーション

Photon Cloud DashboardからアプリケーションのDetails（詳細）へ移動します。
Custom Authenticationセクションを広げます。
Facebook認証のAuthentication URLによって設定されています。

以下の2つのパラメータに値を設定します。

appid = お持ちのFacebook App ID
secret = お持ちのFacebook App Secret

変更を保存します。

3. HTML5 / JavaScriptクライアント

クライアントは受け渡しが必要です
htmlドキュメントの本文内の任意の個所にFacebook Loginボタンのdivを追加します。

HTML

<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" data-registration-url=""></div>

Add code for Facebook JavaScript SDK loading, Facebook Login button creation and Facebook authentication status handling.
Ideally right after the opening <body> tag.

HTML

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function () {
        FB.Event.subscribe('auth.authResponseChange', function (response) {
            if (response.status === "connected") {
                chatClient.setCustomAuthentication("token=" + response.authResponse.accessToken, 2);
                chatClient.connect(true);
            }
        });
    };

    (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 = "https://connect.facebook.net/en_US/all.js#xfbml=1&appId=" + "<YOUR_APP_ID>";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

このコードはFacebook JavaScript SDKを非同期的に読み込み、Facebook Loginボタンを作成します。
読み込みが完了すると、window.fbAsyncInit関数が呼び出されます。
Facebook auth.authResponseChangeイベントでハンドラーがサブスクライブされ、ユーザーが無事にFacebookにログインした後、response.status = "connected"で起動します。
ユーザーのトークンがパラメーターとしてハンドラーに受け渡されます。
このトークンがあることで、ハンドラーがクライアントにCustom Authentcationモードを設定し、認証URLに追加のパラメータトークンを追加します。
その後、ハンドラーがMaster Serverへの接続を開始します。

4. デプロイと実行

Facebook App設定で指定されたApp Domainの1つにHTML5 / JavaScriptクライアントコードを入れます。
Facebook Loginボタンが正常に機能するために必要な手順です。

アプリケーションページにアクセスするユーザーは、Facebookログインボタンを押し、ユーザー名/パスワードを入力するとPhoton Cloudにログインします。Facebookにすでにログインしていた場合は、すぐにPhoton Cloudへサインインします。

概要
実装

1. Facebook Appセットアップ
2. Photon Cloudアプリケーション
3. HTML5 / JavaScriptクライアント
4. デプロイと実行