Facebook認証を用いたカスタム認証

このチュートリアルでは、Photon Custom Authenticationを使ってFacebook認証からPhoton Cloudアプリケーション内でユーザを認証する方法を説明します。

概要

Photon Cloud Custom Authenticationでは外部サービス（Authentication Provider）を呼び出してユーザの認証を確認します。
認証のフローの概要はドキュメントをご確認ください。

認証が必要なサービスによって異なりますが、通常、認証の確認には複数のパラメータが必要です。これはPhoton Cloud Applicationで設定されている静的パラメータと、Photon Cloud JavaScript Client APIコールでパスされる動的パラメータです。このチュートリアルではクライアントサイドのFacebook Login pluginプラグインを使用してユーザのFacebookトークンを取得し、https://customauth.photonengine.com/facebook からAuthentication Providerを得て、トークンの有効性をマスタサーバサイドで確認します。Facebookの認証の場合、Authentication Providerにappid, secret 及び tokenパラメータが必要です。Facebookにて、AppIDのアプリケーションに対してトークンが有効か確認されます。

実装

既存のアプリケーションでCustom Authenticationを有効にするステップは以下のとおりです：

1. Facebook App設定

Facebook Appの設定に関する詳細はFacebookドキュメントをご確認ください。このチュートリアルではFacebook App IDとApp Secretが必要です。

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

Photon Cloud Dashboardからアプリケーションの詳細ページに移行してください。Custom Authenticationセクションを拡張してください。Facebook認証に使うAuthentication URLはExit Gamesが設定します。

以下2つのパラメータの値を設定してください：

appid = あなたの Facebook App ID
secret = あなたの Facebook App Secret

変更を保存して下さい。

3. HTML5/JavaScript クライアント

クライアントはAdd a Facebook Loginボタンdivをhtmlドキュメントの本体のどこかに設置する必要があります。

HTML

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

Facebook JavaScript SDK読み込み, Facebook Login ボタン作成, Facebook認証ステータス処理のコードを追加してください。<body>開始タグの直後が理想的です。

HTML

    <div id="fb-root"></div>
    &lt;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'));
    &lt;/script>

このコードはFacebook JavaScript SDKを非同期的に読み込んでFacebook Loginボタンを作成します。読み込み完了後にwindow.fbAsyncInit関数が呼ばれます。Facebookのauth.authResponseChangeイベントでハンドラーをサブスクライブします。ユーザがFacebookログインに成功した後response.status = "connected"になり、auth.authResponseChangeは終了します。ユーザのトークンはパラメータとしてハンドラーにパスされます。トークンを取得したハンドラーはクライアントをCustom Authenticationモードに設定して、認証URLにtokenパラメータを追加します。その後、ハンドラーがマスタサーバと通信を開始します。

4. デプロイと実行

Facebook App設定で指定されたApp DomainにHTML5 / JavaScriptクライアントコードを設置してください。これは、Facebook Loginボタンを正常に機能させるために必要です。

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

概要
実装

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