Facebook アカウントとの連携

Facebook アカウントを用いたユーザー作成・ログインは、開発者ポータル上でアプリケーションの設定を行い、コードに数行追加するだけで簡単に実現できます。

Facebook との連携設定

Facebook アプリの作成

まずは、Facebook アプリを作成し、Facebook アプリ ID とアプリシークレットを取得する必要があります。取得方法については Facebook の公式ドキュメント を参照してください。

Facebook アプリ作成の際には、以下の情報が必要です。"サイト URL" は開発者ポータルにて指定したサーバー設定場所に対応する値を指定します。なお、${your-app-id} にはご利用の AppID を入力してください。

  • Display Name
  • Namespace
  • カテゴリー
  • サイト URL(アプリの作成後、Settings の Add Platform から Website を追加して指定)
    • アメリカ合衆国:https://${your-app-id}.us.kiiapps.com
    • 日本:https://${your-app-id}.jp.kiiapps.com
    • シンガポール:https://${your-app-id}.sg.kiiapps.com
    • ヨーロッパ:https://${your-app-id}.eu.kiiapps.com

Kii アプリケーションの設定

次の手順に従い、開発者ポータルより Facebook アプリ ID とアプリシークレットの登録を行います。

  1. アプリケーションコンソール上で "Edit" ボタンをクリックします。

  2. "SOCIAL NETWORKS" をクリックします。

  3. "Facebook" をクリックし Facebook の設定画面を開きます。

  4. "Social Network Connector" セクションに Facebook アプリ ID とアプリシークレットを設定します。

Facebook アカウントによるログイン

Facebook アカウントを用いて Kii Cloud にログインする例を以下に挙げます。

  • // Set a Facebook access token.
    var options = {
      access_token: __obtained_access_token__
    };
    
    // Authenticate the user to Kii Cloud with the Facebook access token.
    KiiSocialConnect.logIn(KiiSocialNetworkName.FACEBOOK, options, {
      success: function(user, network) {
        // Do something.
      },
      failure: function(user, network, errorString) {
        // Handle the error.
      }
    });
  • // Set a Facebook access token.
    var options = {
      access_token: __obtained_access_token__
    };
    
    // Authenticate the user to Kii Cloud with the Facebook access token.
    KiiSocialConnect.logIn(KiiSocialNetworkName.FACEBOOK, options).then(
      function(params) {
        var user = params[0];
        var network = params[1];
        // Do something.
      }
    ).catch(
      function(error) {
        // Handle the error.
        var errorString = error.message;
        var network = error.network;
      }
    );

基本手順は以下のとおりです。

  1. Facebook のアクセストークンを取得します。取得方法については、下記の 設定と実装の例 を参考にするか、Facebook の公式ドキュメント を参照してください。

  2. Facebook のアクセストークンを、optionsaccess_token パラメーターに設定します。

  3. logIn() メソッドでログイン処理を実行します。メソッドの引数に、対象のソーシャルネットワークとして KiiSocialNetworkName.FACEBOOK を指定します。指定されたアカウントが新規の場合、ログイン処理に先立ちユーザー作成処理も同時に行われます。

Kii Cloud は Facebook 側に登録されているメールアドレスを取得し、既存 Kii アカウントとの紐付けを試みます。取得したメールアドレスと一致する Kii アカウントが存在し、さらにこのメールアドレスが認証済みの場合、ユーザー作成処理は行わずにこの Kii アカウントとのリンクを行います。

ログインに成功すると、ユーザーに関する情報は SDK 内部にキャッシュされます。キャッシュされた情報は KiiUser.getCurrentUser() メソッドで取得できます。

Kii アカウントと Facebook アカウントのリンク

すでに存在する Kii Cloud ユーザーを Facebook アカウントとリンクできます。リンクを行うと、このユーザーは Facebook アカウント認証経由で Kii Cloud にログインできるようになります。

以下に、アカウントのリンク処理を行う例を示します。linkCurrentUserWithNetwork() メソッドを実行するだけでアカウントがリンクされます。

なお、この例では Facebook のアクセストークンを取得済みであると仮定しています。取得方法については、下記の 設定と実装の例 を参考にするか、Facebook の公式ドキュメント を参照してください。

  • // Assume that a user has logged in.
    
    // Set a Facebook access token.
    var options = {
      access_token: __obtained_access_token__
    };
    
    // Link the Facebook account with the currently logged-in Kii user.
    KiiSocialConnect.linkCurrentUserWithNetwork(KiiSocialNetworkName.FACEBOOK, options, {
      success: function(user, network) {
        // Do something.
      },
      failure: function(user, network, errorString) {
        // Handle the error.
      }
    });
  • // Assume that a user has logged in.
    
    // Set a Facebook access token.
    var options = {
      access_token: __obtained_access_token__
    };
    
    // Link the Facebook account with the currently logged-in Kii user.
    KiiSocialConnect.linkCurrentUserWithNetwork(KiiSocialNetworkName.FACEBOOK, options).then(
      function(params) {
        var user = params[0];
        var network = params[1];
        // Do something.
      }
    ).catch(
      function(error) {
        // Handle the error.
        var user = error.target;
        var errorString = error.message;
        var network = error.network;
      }
    );

Kii アカウントと Facebook アカウントのリンク解除

Kii Cloud のユーザーアカウントと Facebook アカウントのリンクを解除する例を以下に示します。unLinkCurrentUserFromNetwork() メソッドを実行するだけでアカウントのリンクが解除されます。

  • // Assume that a user has logged in.
    
    // Unlink the Facebook account from the currently logged-in Kii user.
    KiiSocialConnect.unLinkCurrentUserFromNetwork(KiiSocialNetworkName.FACEBOOK, {
      success: function(user, network) {
        // Do something.
      },
      failure: function(user, network, errorString) {
        // Handle the error.
      }
    });
  • // Assume that a user has logged in.
    
    // Unlink the Facebook account from the currently logged-in Kii user.
    KiiSocialConnect.unLinkCurrentUserFromNetwork(KiiSocialNetworkName.FACEBOOK).then(
      function(params) {
        var user = params[0];
        var network = params[1];
        // Do something.
      }
    ).catch(
      function(error) {
        // Handle the error.
        var user = error.target;
        var errorString = error.message;
        var network = error.network;
      }
    );

設定と実装の例

ここでは、Facebook との連携方法を簡単に示します。

Facebook のアクセストークンの取得方法は Kii Cloud の仕様外ですが、ここでは、参考のため 2017 年 10 月現在の連携手順を簡単にまとめています。より詳細な手順や、最新バージョンで動作させる方法などは、Web 上の技術情報をご確認ください。

以下の手順を実行すると、Web ブラウザーで Facebook のサンプルアプリを実行し、Facebook のユーザー名とパスワードを入力して認証できるようになります。認証に成功すると、そのユーザーに対する Facebook のアクセストークンが取得できるため、上記に示した Kii Cloud のログイン機能やリンク機能を利用できます。

なお、Web 上の記事には自動投稿などの目的で、自分のアクセストークンを取得するものがあるためご注意ください。Kii Cloud との連携では、エンドユーザーのアクセストークンを取得する必要があります。

開発環境の準備

Facebook との連携機能を使用するには、開発中の Web アプリを Web サーバー経由で表示する必要があります。

Web サーバーは、ローカルホスト上での運用(http://localhost:XXX/)で問題ありませんが、ファイルプロトコルを使って Facebook の認証を行うことはできません。

Web サーバーを導入していない場合は、インストールして設定してください。

Facebook の管理画面の操作

開発者向け Facebook で設定を行います。

  1. Web ブラウザーで 開発者向け Facebook を開いてログインします。

  2. Facebook アプリを新規に作成するか、既存の Facebook アプリを選択します。

  3. Facebook アプリで "ウェブサイト" の "クイックスタート" を実行します。

    ウェブサイトを未設定の場合は、"ダッシュボード" 画面から Facebook SDK の "クイックスタート" を実行し、プラットフォームとして "ウェブサイト" を選択します。

    ウェブサイトを設定済みの場合は、"設定" - "ベーシック" 画面の "ウェブサイト" から "クイックスタート" を実行します。

  4. ウェブサイトの URL を入力します。

    この手順ではサンプルコードをまとめて実装するため、初期化コードの実装は省略します。

    画面を下にスクロールし、"Site URL" にウェブサイトの URL を指定します。ローカルホストで開発中の場合は、http://localhost:8080/ などを指定できます。

  5. Facebook アプリ ID とアプリシークレットを確認し、Kii Cloud の 開発者ポータルに設定 します。

サンプルアプリの作成

Facebook for developers のドキュメントサイトには、JavaScript SDK を使用したウェブ向けの Facebook ログイン を扱った説明ページがあります。

このページの最後に記載されている "詳細なコードサンプル" をコピーすれば、Facebook へのログイン機能を実装できます。コピー後、FB.init() メソッドの appId に Facebook アプリ ID を指定してください。

Facebook のアクセストークンを取得するには、サンプルコードの statusCheangeCallback() メソッドを以下のように変更します。

function statusChangeCallback(response) {
  // ......
  if (response.status === 'connected') {
    var accessToken = response.authResponse.accessToken;
    // Add Kii Cloud login process here.
  }

// Add Kii Cloud login process here. の箇所に Kii Cloud のログイン処理やリンク処理を記述します。この際、Facebook のアクセストークン accessToken を利用できます。

実装後、Web ページを表示します。ログインボタンをクリックすると、Facebook のログイン画面がポップアップし、ログイン成功後に statusChangeCallback() メソッドが呼び出されるはずです。

今回示した方法では、アクセストークンを利用するための最低限の機能範囲を実装しています。より完全な実装方法は Facebook のドキュメントを参照してください。