現在表示中:

ソーシャルログインとは、サイト訪問者に対して、自分の Facebook または Twitter アカウント(AEM メンバープロファイル内の許可されている Facebook または Twitter データを含む)を使用してサインインするオプションを表示する機能です。

ソーシャルログインの概要

ソーシャルログイン機能を含めるには、カスタムの Facebook アプリケーションや Twitter アプリケーションを作成する必要があります。

Geometrixx のサンプルでは、Facebook および Twitter のサンプルアプリとクラウドサービスを使用できますが、これらは実稼動環境の Web サイトでは使用できません。

必要な手順は以下のとおりです。

  1. すべての AEM パブリッシュインスタンスで OAuth 認証を有効にします。
    • OAuth が有効でないと、ログインの試行が失敗します。
  2. ソーシャルアプリとクラウドサービスを作成します。
  3. コミュニティサイトに対してソーシャルログインを有効にします。

以下の 2 つの基本的概念があります。

  1. 範囲(権限)
    • アプリがリクエストできるデータを指定します。
    • Facebook と Twitter の Adobe Granite OAuth Application and Provider インスタンスは、デフォルトで、それぞれの範囲内に基本的なアプリ権限を含んでいます。
  2. フィールド(パラメーター)

Facebook ログイン

Facebook API バージョン

ソーシャルログインと Geometrixx の Facebook アプリのサンプルは、Facebook Graph API 1.0 バージョンで開発されたものです。

AEM 6.2 GA の時点で、ソーシャルログインは新しい Facebook Graph API 2.5 バージョンと連携するように更新されました。

AEM 6.2 Communities FP1 の時点で、ソーシャルログインはデフォルトでさらに新しいバージョンまでサポート対象が広がり、より多くのカスタマイズが可能になりました。 

Facebook Graph API のバージョンについて詳しくは、Facebook API 変更ログを参照してください。

Facebook アプリの作成

Facebook ソーシャルログインを有効にするには、適切に設定された Facebook アプリが必要です。 

新しい Facebook アプリケーションを作成するには、Facebook の https://developers.facebook.com/apps/ の手順に従ってください。この手順に変更が加えられた場合は、以下の情報が最新のものではなくなっている可能性があります。

一般的な手順(Facebook API v2.7 の時点):

  • 新しい Facebook ログインアプリを追加します。
    • 「Platform」で、「Website」を選択します。
      • 「Site URL」に、「http://<server>:<port>」と入力します。
    • 「Display Name」に、Facebook 接続サービスのタイトルとして使用するタイトルを入力します。
    • 「Category」では「Apps for Pages」を推奨しますが、どれを選択しても構いません。
    • 「valid OAuth redirect URIs」に、「http://<server>:<port>」と入力します。

注意:開発時には、http://localhost:4503 を使用できます。

アプリケーションを作成したら、App IDApp Secret を確認します。この情報は、Facebook クラウドサービスの設定で必要になります。

Facebook Connect クラウドサービス

クラウドサービス設定を作成することで、Adobe Granite OAuth Application and Provider インスタンスが作成されます。このインスタンスが、Facebook アプリケーションと新しいユーザーの追加先のメンバーグループを識別します。

  • オーサーインスタンスで、管理者権限でサインインします。
  • グローバルナビゲーションから、ツール/導入/クラウドサービスを選択します。
  • サードパーティのサービス」で「Facebook Connect」を見つけます。
  • 「設定を表示」を選択します。
  • 利用可能な設定の右側の [+] アイコンを選択します。
  • 親設定
    デフォルト設定の /etc/coudservices/facebookconnect のままにします。
  • タイトル
    (必須)Facebook アプリを識別する表示タイトルを入力します。Facebook アプリの「Display Name」に入力したものと同じ名前を使用することを推奨します。
  • 名前
    (オプション)保存したクラウドサービス設定の名前を入力します。名前を入力しなかった場合は、「タイトル」に基づいて有効なノード名が生成されます。
  • テンプレート
    Facebook Connect 設定
  • 作成」を選択します。

作成した Facebook アプリの識別子の入力を求める、次のようなダイアログが表示されます。

設定」タブで、次のように設定します。

  • App ID / API Key
    (必須)Facebook アプリの App ID を入力します。これが、ダイアログで作成した Adobe Granite OAuth Application and Provider インスタンスを識別する ID になります。
  • アプリケーションの秘密鍵
    (必須)Facebook アプリの App Secret を入力します。
  • ユーザーを作成
    オンにすると、Facebook アカウントでログインしたときに AEM ユーザーエントリが作成され、選択されたユーザーグループのメンバーとして追加されます。初期設定はオンです(強く推奨)。
  • ユーザー ID をマスク
    オフのままにします。
  • ユーザーグループに追加
    ユーザーグループに追加」を選択し、コミュニティサイトのユーザー追加先のメンバーグループを 1 つ以上選択します。
    注意:グループはいつでも追加または削除できます。
  • OK」を選択します。

結果として作成される Adobe Granite OAuth Application and Provider インスタンスは、さらに範囲(権限)を追加しない限り、これ以上変更する必要はありません。デフォルトの範囲は、Facebook にログインするための標準的な権限です。追加の範囲が必要な場合は、OSGI 設定を直接編集する必要があります。

このダイアログ内のその他のタブは、現在は使用されていません。これらのタブは、範囲とフィールドを設定するためのものでしたが、Facebook API v1.0 で利用できる権限を基にしています。使用されていないタブは、「ユーザー権限」、「友人の権限」、「拡張権限」、「URL パラメーター」です。

AEM Communities Facebook OAuth Provider

AEM Communities プロバイダーは、Adobe Granite OAuth Application and Provider インスタンスを拡張するものです。

以下の機能を実現するには、このプロバイダーを編集する必要があります。

  • タグの無効化
  • ユーザー更新の許可
  • 範囲内のフィールドの追加
    • デフォルトで許可されるフィールドが、すべてデフォルトで含まれているわけではありません。

編集が必要な場合は、それぞれの AEM パブリッシュインスタンスで次の設定をします。

  • 管理者権限でサインインします。
  • Web コンソールに移動します。
    例:http://localhost:4503/system/console/configMgr
  • AEM Communities Facebook OAuth Provider を見つけます。
  • 鉛筆アイコンを選択して編集用に開きます。
  • OAuth Provider ID
    (必須)デフォルト値は soco-facebook です。編集しないでください。
  • Cloud Service Config
    デフォルト値は /etc/cloudservices/facebookconnect です。編集しないでください。
  • OAuth Provider Service Config
    デフォルト値は /apps/social/facebookprovider/config/ です。編集しないでください。
  • Enable Tags
    オフにすると、Facebook タグは生成されず、すべての複雑なデータプロパティが無視されます。
    ただし、AEM は基本的なプロファイルプロパティはユーザーの Facebook ノードに引き続き保存します。初期設定はオンです。
  • User Path
    ユーザーデータを格納するリポジトリの場所です。コミュニティサイトでは、メンバーがお互いのプロファイルを閲覧できる権限を確保するために、パスをデフォルトの /home/users/community にする必要があります。
  • Enable fields
    オンにすると、その下にリストされているフィールドが、ユーザー認証およびユーザー情報を求める Facebook へのリクエストに指定されます。 初期設定はオンです。
  • Fields
    「Enable fields」をオンにした場合は、Facebook Graph API の呼び出し時に以下のフィールドが含まれます。これらのフィールドは、クラウドサービス設定で定義された範囲内で許可されている必要があります。追加のフィールドを使用するには、Facebook の承認が必要な場合があります。Facebook ドキュメントの Facebook ログイン権限の節を参照してください。パラメーターとして追加されるデフォルトのフィールドは次のとおりです。
    • id
    • name
    • first_name
    • last_name
    • link
    • locale
    • picture
    • timezone
    • updated_time
    • verified
    • email
  • Update User
    オンにすると、ログインするたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。初期設定はオフです。

次の手順

続いて以下の手順をおこないますが、この手順は Facebook でも Twitter でも共通です。

Twitter ログイン

Twitter アプリの作成

Twitter ソーシャルログインを有効にするには、適切に設定された Twitter アプリが必要です。

新しい Twitter アプリケーションを作成するには、https://apps.twitter.com/ の最新の手順に従ってください。

一般的な手順:

  1. 「Name」に Twitter アプリケーションを識別する名前を入力します。
  2. 「Description」に入力します。
  3. 「WebSite」に、「http://<server>/」と入力します。
  4. 「Callback URL」に、「http://<server>/」と入力します。

注意:ポートを指定する必要はありません。
            開発時には、http://127.0.0.1/ を使用できます。

アプリケーションを作成したら、Consumer(API)KeyConsumer(API)Secret を確認します。この情報は、Twitter クラウドサービスの設定で必要になります。

権限

Twitter アプリケーション管理の権限のセクションで、次の設定をします。

  • 「Access」で、「Read only」を選択します。
    • その他のオプションはサポートされません。
  • 「Additional Permissions」で、必要に応じて「Request email addresses from users」を選択します。
    • Twitter の説明に、追加でおこなう手順が示されています。
    • 選択しなかった場合は、ユーザーの AEM のプロファイルに電子メールアドレスが含まれなくなります。

ソーシャルログインのために実行される REST リクエストは、GET account/verify_credentials だけです。

Twitter Connect クラウドサービスの作成

クラウドサービス設定を作成することで、Adobe Granite OAuth Application and Provider インスタンスが作成されます。このインスタンスが、Twitter アプリケーションと新しいユーザーの追加先のメンバーグループを識別します。

  • オーサーインスタンスで、管理者権限でサインインします。
  • グローバルナビゲーションから、ツール/導入/クラウドサービスを選択します。
  • サードパーティのサービスで「Twitter Connect」を見つけます。
  • 「設定を表示」を選択します。
  • 利用可能な設定の右側の [+] アイコンを選択します。
  • 親設定
    デフォルト設定の /etc/coudservices/twitterconnect のままにします。
  • タイトル
    (必須)Twitter アプリを識別する表示タイトルを入力します。
  • 名前
    (オプション)保存したクラウドサービス設定の名前を入力します。名前を入力しなかった場合は、「タイトル」に基づいて有効なノード名が生成されます。
  • テンプレート
    Twitter Connect 設定
  • 作成」を選択します。

作成した Twitter アプリの識別子の入力を求める、次のようなダイアログが表示されます。

設定」タブで、次のように設定します。

  • 消費者キー
    (必須)Twitter アプリConsumer(API)Key を入力します。
  • 消費者の秘密鍵
    (必須)Twitter アプリの Consumer(API)Secret を入力します。
  • ユーザーを作成
    オンにすると、Twitter アカウントでサインインしたときにユーザーが作成され、選択したユーザーグループのメンバーとして追加されます。初期設定はオンです(強く推奨)。
  • ユーザー ID をマスク
    オフのままにします。
  • ユーザーグループに追加
    ユーザーグループに追加」を選択し、コミュニティサイトのユーザー追加先のメンバーグループを 1 つ以上選択します。
    注意:グループはいつでも追加または削除できます。
  • OK」を選択します。

結果として作成される Adobe Granite OAuth Application and Provider インスタンスは、これ以上変更する必要はありません。デフォルトの範囲には、Twitter にログインするための標準的な権限が含まれています。

このダイアログにある「URL パラメーター」タブは、現在使用されていないので、空のままにします。

AEM Communities Twitter OAuth Provider

AEM Communities の設定は、Adobe Granite OAuth Application and Provider インスタンスを拡張するものです。

以下の機能を実現するには、このプロバイダーを編集する必要があります。

  • ユーザー更新の許可
  • 電子メールアドレスのリクエスト

編集が必要な場合は、それぞれの AEM パブリッシュインスタンスで次の設定をします。

  • 管理者権限でサインインします。
  • Web コンソールに移動します。
    例:http://localhost:4503/system/console/configMgr
  • AEM Communities Twitter OAuth Provider を見つけます。
  • 鉛筆アイコンを選択して編集用に開きます。
  • OAuth Provider ID
    (必須)デフォルト値は soco-twitter です。編集しないでください。
  • Cloud Service Config
    デフォルト値は /etc/cloudservices/twitterconnect です。編集しないでください。
  • OAuth Provider Service Config
    デフォルト値は /apps/social/twitterprovider/config/ です。編集しないでください。
  • User Path
    ユーザーデータを格納するリポジトリの場所です。コミュニティサイトでは、メンバーがお互いのプロファイルを閲覧できる権限を確保するために、パスをデフォルトの /home/users/community にする必要があります。
  • Enable Params
    オンにすると、その下に指定されている URL パラメーターが、デフォルトの URL パラメーター(リストされていない場合)と共に、ユーザー認証およびユーザー情報を求める Twitter へのリクエストに含まれます。初期設定はオンです。
  • URL Parmeters
    「Enable Params」をオンにした場合は、Twitter API の呼び出し時に以下のパラメーターが追加で含まれます。これらのパラメーターは「key=value」という形式をとり、その権限は Twitter アプリ用に取得されています。例えば、ユーザーの電子メールアドレス(デフォルトでは含まれていない情報)をリクエストするには、以下のようにパラメーターを設定します。
    • include_email=true
  • Update User
    オンにすると、ログインするたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。初期設定はオフです。

次の手順

続いて以下の手順をおこないますが、この手順は Facebook でも Twitter でも共通です。

クラウドサービスの公開

Twitter Connect および Facebook Connect クラウドサービスは、コミュニティサイトが公開されると、自動的に公開されます。

クラウドサービスが公開されているかを確認するには、

  • 管理者権限を使用して、
  • グローバルナビゲーションから、ツール/運営/設定を選択します。
    • http://localhost:4502/miscadmin で、ツールのクラシック UI を開きます。
  • 左側のパネルで、
    • Tools / Cloud Services Configurations フォルダーを見つけます。
    • Facebook Connect または Twitter Connect を選択します。
  • 右側のパネルで、
    • Engagement Community Facebook App」などの設定を選択します。
    • アクティベート」を選択します。

クラウドサービスの変更

Facebook または Twitter クラウドサービスを変更する場合は、OSGI 設定をすべてのパブリッシュインスタンスで適切に更新するために、アクティベートを解除してから再びアクティベートする必要があります。

ソーシャルログインの有効化

AEM Communities サイトコンソール

クラウドサービスが設定されると、コミュニティサイトを作成または管理するとき表示される「ユーザー管理」設定で、コミュニティサイトの適切なソーシャルログイン設定に対してクラウドサービスを選択できるようになります。

注意:

Geometrixx のサンプルがある場合は、以下のサンプルクラウドサービスでソーシャルログインを設定できます。

  • Geometrixx Outdoors Facebook App
  • Geometrixx Outdoors Twitter App

実稼動サーバーでは、これらのサンプルクラウドサービスは存在しません。実稼動環境の AEM インスタンスは nosamplecontent 実行モードで起動する必要があり、このときは Geometrixx Outdoors クラウドサービスは存在しません。

すべての AEM パブリッシュインスタンスで必ず OAuth 認証を有効にしてください。

AEM サイトコンソール

AEM サイトコンソールを使用し、以下の手順を実行して、設定済みの Facebook または Twitter クラウドサービス設定をターゲット Web サイトのルートに適用します。

  • AEM サイトをオーサリング編集モードで開きます。
  • ページ情報アイコンを選択します。
  • プロパティを開く」を選択します。
  • クラウドサービス」タブを選択します。
  • クラウドサービス設定で「設定を追加」を選択します。
  • Facebook Connect」または「Twitter Connect」を選択します。
  • 設定の参照」のドロップダウンリストを使用して、設定したクラウドサービスの名前を選択します。
    • 例えば「Engagement Community Facebook App」などです。
  • 確認アイコンを選択します。

ソーシャルログインのテスト

  • Adobe Granite OAuth Authentication Handler がすべてのパブリッシュインスタンスで有効になっているかを確認します。
  • クラウドサービスが公開されているかを確認します。
  • コミュニティサイトが公開されているかを確認します。
  • ブラウザーで公開済みサイトを開きます。
        例:http://localhost:4503/content/sites/engage/en.html
  • ログイン」を選択します。
  • Facebook を使用してサインイン」または「Twitter を使用してサインイン」のどちらかを選択します。
  • Facebook または Twitter にまだログインしていない場合は、適切な資格情報を使用してログインします。
  • Facebook または Twitter アプリから表示されるダイアログの求めに応じて、権限を付与しなければならない場合があります。
  • ログインに成功すると、それを反映するようにページ上部のツールバーが更新されます。
  • プロファイル」を選択すると、プロファイルページにユーザーのアバター画像と姓名が表示されます。このページには、許可したフィールド/パラメーターに応じて、Facebook または Twitter のプロファイル情報も表示されます。

AEM プラットフォーム OAuth 設定

Adobe Granite OAuth Authentication Handler

Adobe Granite OAuth Authentication Handler は、デフォルトでは有効ではなく、すべての AEM パブリッシュインスタンスで有効にする必要があります

パブリッシュインスタンスで認証ハンドラーを有効にするには、以下のように OSGi 設定を開いて保存するだけです。

  • 管理者権限でサインインします。
  • Web コンソールに移動します。
    例:http://localhost:4503/system/console/configMgr
  • Adobe Granite OAuth Authentication Handler を見つけます。
  • 選択して編集のために設定を開きます。
  • Save」を選択します。

警告:

認証ハンドラーを Facebook または Twitter の Adobe Granite OAuth Application and Provider のインスタンスと混同しないよう注意してください。

Adobe Granite OAuth Application and Provider

Facebook または Twitter のクラウドサービスを作成すると、Adobe Granite OAuth Authentication Handler のインスタンスが作成されます。

Facebook または Twitter アプリ用に作成されたインスタンスを見つけるには:

  • 管理者権限でサインインします。
  • Web コンソールに移動します。
    例:http://localhost:4503/system/console/configMgr
  • Adobe Granite OAuth Application and Provider を見つけます。
    • Client IDApp ID と一致するインスタンスを見つけます。

ほとんどのプロパティは、変更せずそのままにする必要があります。以下は参考情報です。

  • Config ID
    (必須)OAuth 設定 ID は一意である必要があります。クラウドサービスを作成したときに自動生成されます。
  • Client ID
    (必須)クラウドサービスを作成したときに与えられるアプリケーション ID です。
  • Client Secret
    (必須)クラウドサービスを作成したときに与えられるアプリケーションの秘密鍵です。
  • Scope
    (オプション)プロバイダーからのリクエストを受けることを許可する追加の範囲です。デフォルトで、ソーシャル認証とプロファイルデータの提供に必要な権限が範囲に含まれています。
  • Provider ID
    (必須)AEM コミュニティのプロバイダー ID は、クラウドサービスを作成したときに設定されます。編集しないでください。Facebook Connect では、値は soco-facebook となります。Twitter Connect では、値は soco-twitter となります。
  • Groups
    (推奨)1 つ以上の作成されたユーザーの追加先のメンバーグループです。AEM Communities では、コミュニティサイトのメンバーグループをリストすることを推奨します。
  • Callback URL
    (オプション)OAuth プロバイダーで設定される、クライアントをリダイレクトして戻すための URL です。元のリクエストのホストを使用するには、相対 URL を使用します。最初にリクエストされた URL を代わりに使用するには、空のままにします。この URL には、「/callback/j_security_check」というサフィックスが自動的に追加されます。注意:このコールバックドメインはプロバイダー(Facebook または Twitter)に登録されている必要があります。

OAuth ユーザーのトラバーサルパフォーマンス

何十万ものユーザーが Facebook または Twitter ログインを使用して登録することがあるコミュニティサイトでは、サイト訪問者がソーシャルログインを使用するときに実行されるクエリのトラバーサルパフォーマンスを、以下の Oak インデックスを追加することで改善できる場合があります。 

ログにトラバーサル警告が記録されている場合は、このインデックスを追加することを推奨します。

オーサーインスタンスで、管理者権限でサインインします。

  1. グローバルナビゲーションから、ツール/CRXDE Liteを選択します。
  2. 以下の手順で、ntBaseLucene のコピーから ntBaseLucene-oauth という名前のインデックスを作成します。
    • ノード /oak:index に移動します。
    • ノード ntBaseLucene を選択します。
    • コピー」を選択します。
    • /oak:index を選択します。
    • 貼り付け」を選択します
    • ntBaseLucene のコピー」という名前を「ntBaseLucene-oauth」に変更します。
  3. ノード ntBaseLucene-oauth のプロパティを以下のように変更します。
    • indexPath/oak:index/ntBaseLucene-oauth
    • nameoauthid-123*
    • reindextrue
    • reindexCount1
  4. ノード /oak:index/ntBaseLucene-oauth/indexRules/nt:base/properties に移動します。
    • cqTags を除いてすべての子ノードを削除します。
    • cqTags」という名前を「oauthid-123*」に変更します。
    • ノード oauthid-123* のプロパティを以下のように変更します。
      • nameoauthid-123*
  • すべて保存」を選択します。

 * nameoauthid-123 については、123 を、Adobe Granite OAuth Application and Provider 設定の Client ID の値である Facebook の App ID または Twitter の Consumer(API)Key に置き換えます。

さらなる情報とツールについては、Oak のクエリとインデックス作成を参照してください。

Dispatcher 設定

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー