ドキュメントAEM 6.4Communities ガイド

Facebook と Twitter を使用したソーシャルログイン

最終更新日： 2023年5月4日
  • トピック：
  • Communities

作成対象：

  • Admin
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

ソーシャルログインは、サイト訪問者にFacebookまたはTwitterアカウントでログインするオプションを提示する機能です。 したがって、許可されたFacebookまたはTwitterのデータがAEMメンバープロファイルに含まれます。

socialloginweretail

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

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

we-retail のサンプルは、FacebookおよびTwitterのサンプルアプリとクラウドサービスを提供していますが、 実稼働用 web サイト.

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

  1. OAuth 認証を有効にする すべてのAEMパブリッシュインスタンス上。

    OAuth を有効にしない場合、はログインに失敗します。

  2. 作成 ソーシャルアプリとクラウドサービス。

    • facebookでのログインをサポートするには：

      • の作成 Facebookアプリ.
      • の作成と公開 Facebook Connect Cloud Service.

    • twitterでのログインをサポートするには：

      • の作成 Twitterアプリ.
      • の作成と公開 Twitter Connect Cloud Service.

  3. 有効にする ソーシャルログイン コミュニティサイト用。

次の 2 つの基本的な概念があります。

  1. 範囲 （権限）は、アプリがリクエストできるデータを指定します。

    • facebookとTwitter AdobeGranite OAuth Application and Provider インスタンスの場合は、デフォルトで、アプリの基本的な権限がその範囲に含まれます。

  2. フィールド (params) は、URL パラメーターを使用してリクエストされた実際のデータを指定します。

    • これらのフィールドは、 AEM Communities Facebook OAuth Provider および AEM Communities Twitter OAuth Provider.
    • ほとんどの使用例ではデフォルトのフィールドで十分ですが、変更できます。

Facebook Login

Facebook API バージョン

facebook Graph API がバージョン 1.0 のときに、ソーシャルログインと we-retail Facebookのサンプルが開発されました。
AEM 6.4 GA およびAEM 6.3 SP1 のソーシャルログインが更新され、新しいFacebook Graph API 2.5 バージョンと連携するようになりました。

NOTE
古いAEMバージョンの場合、ログで例外が発生する場合 ここからトークンを抽出できません、をそのAEMリリースの最新 CFP にアップグレードします。

facebook Graph API のバージョン情報については、 Facebook API 変更ログ.

facebookアプリの作成

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

facebookアプリケーションを作成するには、Facebookの手順 ( https://developers.facebook.com/apps/. 手順の変更は、次の情報には反映されません。

一般に、Facebook API v2.7 以降：

  • 新しいFacebookアプリの追加：

    • の場合 Platform、Web サイトを選択
      • の場合 サイトの URL ​を入力して、 https://<server>:<port>.
    • の場合 表示名」で、「 Facebook Connect サービスのタイトル」として使用するタイトルを入力します。
    • の場合 カテゴリ，推奨選択 ページのアプリ でも何でもいい。
    • 製品を追加：Facebook Login
      • の場合 有効な OAuth リダイレクト URI ​を入力して、 https://<server>:<port>.
NOTE
開発の場合、http://localhost:4503が機能します。

アプリケーションが作成されたら、 アプリ ID および App Secret 設定。 この情報は、 Facebook cloud service.

facebook ConnectCloud Serviceの作成

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

  1. AEMオーサーインスタンスで、管理者権限でログインします。

  2. グローバルナビゲーションから、 ツール/Cloud Services/ Facebook Social ログイン設定.

  3. 設定を選択 コンテキストパス.

    コンテキストパス は、コミュニティサイトの作成/編集時に選択したクラウド設定パスと同じである必要があります。

  4. コンテキストパスの下にクラウドサービスの作成が有効になっているかどうかを確認します。

  5. ツール／一般／設定ブラウザー ​に移動します。コンテキストを選択し、プロパティを編集します。 まだ有効になっていない場合は、クラウド設定を有効にします。

    config-propertiespng

    • 詳しくは、設定ブラウザーのドキュメントを参照してください。

  6. facebookクラウドサービス設定を作成または編集します。

    fbsocialloginconfigpng

    • タイトル (必須) Facebook App を識別する表示タイトルを入力します。 同じ名前を 表示名 facebookアプリ用。
    • アプリ ID/API キー (必須) アプリ ID (Facebook App 用 ) これは、 AdobeGranite OAuth Application and Provider ダイアログから作成されたインスタンス。
    • App Secret (必須) App Secret (Facebook App 用 )
    • ユーザーを作成 オンにすると、FacebookアカウントでログインしたときにAEMユーザーエントリが作成され、選択したユーザーグループにメンバーとして追加されます。 デフォルトはオンです（強く推奨）。
    • ユーザー ID をマスク:選択を解除したままにします。
    • スコープメール:ユーザーの電子メール id は、Facebookから取得する必要があります。
    • ユーザーグループに追加 「ユーザーグループの追加」を選択して、1 つ以上の メンバーグループ ユーザーを追加するコミュニティサイト用に作成されます。
    NOTE
    グループは、いつでも追加または削除できます。 ただし、既存のユーザーのメンバーシップには影響しません。 自動メンバーシップは、このフィールドの更新後に作成される新しいユーザーにのみ適用されます。 匿名ユーザーが無効になっているサイトの場合は、その非公開のコミュニティサイト向けに、対応するコミュニティメンバーグループにユーザーを追加するよう選択します。
    • 選択 保存.
    • 公開.

結果は AdobeGranite OAuth Application and Provider 追加の範囲（権限）を追加しない限り、追加の変更を必要としないインスタンス。 デフォルトの範囲は、Facebookログインの標準の権限です。 追加のスコープが必要な場合は、OSGi 設定を直接編集する必要があります。 システム/コンソールを介して直接変更がおこなわれる場合は、上書きを避けるために、タッチ UI からクラウドサービス設定を編集しないでください。

AEM Communities Facebook OAuth Provider

AEM Communitiesプロバイダーは、 AdobeGranite OAuth Application and Provider インスタンス。

このプロバイダーは次の操作を行うために編集が必要です：

  • ユーザーの更新を許可

  • フィールドを追加 範囲内

    • デフォルトで許可されているすべてのフィールドがデフォルトで含まれるわけではありません。

編集が必要な場合は、各AEMパブリッシュインスタンスで次の手順を実行します。

  1. 管理者権限でログインします。

  2. 次に移動： Web コンソール. 例：http://localhost:4503/system/console/configMgr

  3. AEM Communities Facebook OAuth Provider を見つけます。

  4. 編集用に開く鉛筆アイコンを選択します。

    fboauthprov_png

    • OAuth Provider ID

      (必須) デフォルト値は soco -facebook. 編集しないでください。

    • Cloud Service設定

      デフォルト値は /etc/ cloudservices / facebookconnect. 編集しないでください。

    • OAuth Provider Service Config

      デフォルト値は /apps/social/facebookprovider/config/. 編集しないでください。

    • タグを有効にする

      編集しないでください。

    • ユーザーパス

      リポジトリ内のユーザーデータが格納される場所。 コミュニティサイトでは、メンバーが互いのプロファイルを表示する権限を確保するために、パスをデフォルトにする必要があります /home/users/community.

    • フィールドを有効にする

      オンにすると、Facebookへのユーザー認証と情報のリクエストで、一覧表示されるフィールドが指定されます。 デフォルトはオフです。

    • フィールド

      フィールドが有効な場合、Facebook Graph API を呼び出す際に、次のフィールドが含まれます。 フィールドは、クラウドサービス設定で定義された範囲内で許可する必要があります。 追加のフィールドには、Facebookの承認が必要な場合があります。 facebookドキュメントの「 Facebookログイン権限」の節を参照してください。 パラメーターとして追加されるデフォルトのフィールドは次のとおりです。

      • id
      • name
      • first_name
      • last_name
      • リンク
      • locale
      • 画像
      • timezone
      • updated_time
      • 検証済み
      • email

    フィールドが追加または変更された場合は、対応するデフォルト同期ハンドラー設定を更新して、マッピングを修正します。

    • ユーザーを更新
      オンにすると、ログインのたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。 初期設定はオフです。

次の手順

次の手順は、FacebookとTwitterの両方で同じです。

  • クラウドサービス設定を公開する
  • コミュニティサイトに対して有効にする

Twitter Login

twitterアプリの作成

twitterソーシャルログインを有効にするには、設定済みのTwitterアプリケーションが必要です。

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

一般に、

  1. を入力します。 名前 これにより、web サイトのユーザーに対するTwitterアプリケーションが識別されます。

  2. を入力します。 説明。

  3. の場合 web サイト - https://と入力します。<server>/.

  4. の場合 コールバック URL - https://と入力します。<server>/.

    NOTE
    ポートを指定する必要はありません。
    開発の場合、https://127.0.0.1/が機能します。

  5. アプリケーションが作成されたら、 消費者 (API) キー および 消費者 (API) 秘密鍵. この情報は、 Twitter cloud service.

権限

twitterアプリケーション管理の権限セクションで、以下の操作をおこないます。

  • アクセス:選択 Read only.

    • その他のオプションはサポートされていません

  • 追加の権限:オプションで選択 Request email addresses from users.

    • 選択しない場合、AEMのユーザープロファイルには E メールアドレスが含まれません。
    • Twitterの手順には、追加の手順が記載されています。

ソーシャルログインに対しておこなわれる唯一の REST リクエストは、次のとおりです。 GETアカウント/認証情報の確認.

twitter ConnectCloud Serviceの作成

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

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

  2. グローバルナビゲーションから、 ツール/Cloud Services/ Twitter Social ログイン設定.

  3. を選択します。 コンテキストパス 設定。

    コンテキストパスは、コミュニティサイトの作成/編集時に選択したクラウド設定パスと同じにする必要があります。

  4. コンテキストパスの下にクラウドサービスの作成が有効になっているかどうかを確認します。

  5. ツール／一般／設定ブラウザー ​に移動します。コンテキストを選択し、プロパティを編集します。 まだ有効になっていない場合は、クラウド設定を有効にします。

    twitterconfigpropng

    • 詳しくは、設定ブラウザーのドキュメントを参照してください。

  6. twitterクラウドサービス設定を作成または編集します。

    twittersocialloginpng

    • タイトル (必須) Twitter App を識別する表示タイトルを入力します。 同じ名前を 表示名 twitterアプリ用。

    • 消費者キー (必須) 消費者 (API) キー twitterアプリ用。 これは、 AdobeGranite OAuth Application and Provider ダイアログから作成されたインスタンス。

    • 消費者の秘密鍵 (必須) 消費者 (API) シークレット (Twitter App 用 )

    • ユーザーを作成 オンにすると、TwitterアカウントでログインしたときにAEMユーザーエントリが作成され、選択したユーザーグループにメンバーとして追加されます。 デフォルトはオンです（強く推奨）。

    • ユーザー ID をマスク 選択を解除したままにします。

    • ユーザーグループに追加 「ユーザーグループの追加」を選択して、1 つ以上の メンバーグループ ユーザーを追加するコミュニティサイト用に作成されます。

    NOTE
    グループは、いつでも追加または削除できます。 ただし、既存のユーザーのメンバーシップは影響を受けません。 自動メンバーシップは、このフィールドの更新後に作成される新しいユーザーにのみ適用されます。 匿名ユーザーが無効になっているサイトの場合は、その非公開のコミュニティサイト向けの対応する community-members グループにユーザーを追加します。

  7. 選択 保存 および 公開.

結果は AdobeGranite OAuth Application and Provider これ以上変更する必要のないインスタンス。 デフォルトの範囲は、Twitterログインの標準の権限です。

AEM Communities Twitter OAuth Provider

AEM Communities設定は、 AdobeGranite OAuth Application and Provider インスタンス。 このプロバイダーは、ユーザーの更新を許可するために編集が必要です。

編集が必要な場合は、各AEMパブリッシュインスタンスで次の手順を実行します。

  1. 管理者権限でログインします。

  2. 次に移動： Web コンソール.

    例：http://localhost:4503/system/console/configMgr

  3. AEM Communities Twitter OAuth Provider を見つけます。

  4. 編集用に開く鉛筆アイコンを選択します。

    twitteroauth_png

    • OAuth Provider ID (必須)

      デフォルト値は soco -twitter. 編集しないでください。

    • Cloud Service設定

      デフォルト値は conf. 編集しないでください。

    • OAuth Provider Service Config

      デフォルト値は /apps/social/twitterprovider/config/. 編集しないでください。

    • ユーザーパス

      リポジトリ内のユーザーデータが格納される場所。 コミュニティサイトでは、メンバーが互いのプロファイルを表示する権限を確保するために、パスをデフォルトにする必要があります /home/users/community.

    • Enable Params 編集しない

    • URL パラメーター 編集しない

    • ユーザーを更新

      オンにすると、ログインのたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。 デフォルトはオフです。

次の手順

次の手順は、FacebookとTwitterの両方で同じです。

  • クラウドサービス設定を公開する
  • コミュニティサイトに対して有効にする

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

AEM Communities Sites コンソール

クラウドサービスを設定すると、 ユーザー管理 コミュニティサイト中のサブパネルの設定 作成 または 管理.

  1. ソーシャルログイン設定を保存したサイト設定コンテキストを選択します。

  2. 「一般」タブで、クラウド設定を指定します。

    managesites_png

  3. 「設定」タブで、 ソーシャルログイン 保存します。

    usermgmt_png

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

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

AEM Platform OAuth 設定

AdobeGranite OAuth Authentication Handler

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

パブリッシュで認証ハンドラーを有効にするには、OSGi 設定を開いて保存します。

  • 管理者権限でログイン
  • 次に移動： Web コンソール
    例： http://localhost:4503/system/console/configMgr
  • 場所 Adobe Granite OAuth Authentication Handler
  • 選択して設定を開き、編集します。
  • 「保存」を選択します

chlimage_1-489

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

chlimage_1-490

AdobeGranite OAuth Application and Provider

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

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

  1. 管理者権限でログインします。

  2. 次に移動： Web コンソール.

    例：http://localhost:4503/system/console/configMgr

  3. AdobeGranite OAuth Application and Provider を見つけます。

    • 次の場所にあるインスタンスを見つけます。 クライアント ID が アプリ ID

    chlimage_1-491

    次のプロパティを除き、設定の他のプロパティは変更しないでください。

    • 設定 ID

      (必須) OAuth 設定 ID は一意である必要があります。 クラウドサービスの作成時に自動生成されます。

    • クライアント ID

      (必須) クラウドサービスの作成時に提供されたアプリケーション ID。

    • クライアントの秘密鍵

      (必須) クラウドサービスの作成時に提供されたアプリケーション秘密鍵。

    • 範囲

      (オプション) 許可される内容の追加範囲は、プロバイダーから求めることができます。 デフォルトの範囲は、ソーシャル認証とプロファイルデータの提供に必要な権限に対応しています。

    • プロバイダー ID

      (必須) AEM Communitiesのプロバイダー ID は、クラウドサービスの作成時に設定されます。 編集しないでください。 facebook Connect の場合、値は soco -facebook. twitter Connect の場合、値は soco -twitter.

    • グループ

      (推奨) 作成したユーザーを追加する 1 つ以上のメンバーグループ。 AEM Communitiesの場合は、コミュニティサイトのメンバーグループをリストすることをお勧めします。

    • コールバック URL

      (オプション) OAuth プロバイダーがクライアントをリダイレクトして戻すように設定した URL。 元のリクエストのホストを使用するには、相対 URL を使用します。 最初にリクエストされた URL を代わりに使用するには、空のままにします。 サフィックス「/callback/j_security_check」がこの URL に自動的に追加されます。

    NOTE
    コールバックのドメインは、プロバイダー (FacebookまたはTwitter) に登録する必要があります。

OAuth 認証ハンドラーの設定ごとに、インスタンスに 2 つの追加の設定が作成されます。

  • Apache Jackrabbit Oak Default Sync Handler (org.apache.jackrabbit.oak.spi.security.authentication.external.impl.DefaultSyncHandler) — ここで編集は必要ありませんが、Facebookフィールドが CQ ユーザープロファイルノードにマッピングされる方法をユーザーフィールドマッピングで確認できます。 また、「Sync Handler Name」は、OAuth プロバイダー設定の設定 ID と一致します。
  • Apache Jackrabbit Oak External Login Module (org.apache.jackrabbit.oak.spi.security.authentication.external.impl.ExternalLoginModuleFactory) — 編集は必要ありませんが、「ID プロバイダー名」と「同期ハンドラー名」は、それぞれ対応する OAuth 設定と同期ハンドラー設定を指しています。

詳しくは、 Apache Oak 外部ログインモジュールを使用した認証.

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

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

ログにトラバーサルの警告が表示される場合は、このインデックスを追加することをお勧めします。

オーサーインスタンスで、管理者権限を使用してサインインした場合：

  1. グローバルナビゲーションから：選択 ツール、 CRX/DE Lite.

  2. ntBaseLucene のコピーから ntBaseLucene-oauth という名前のインデックスを作成します。

    • ノード/oak:index の下
    • ノード ntBaseLucene を選択
    • 選択 コピー
    • /oak:index を選択します。
    • 選択 貼り付け
    • ntBaseLucene のコピーを ntBaseLucene-oauth に名前変更

  3. ntBaseLucene-oauth ノードのプロパティを変更します。

    • indexPath:/oak:index/ntBaseLucene-oauth
    • 名前:oauthid-123xxxx
    • 再インデックス:true
    • reindexCount:1

  4. ノード/oak:index/ntBaseLucene-oauth/indexRules/nt:base/properties の下で、次の手順を実行します。

    • cqTags を除くすべての子ノードを削除します。

    • cqTags の名前を oauthid-123xxxx に変更します。

    • ノード oauthid-123xxxx のプロパティを変更します。

      • 名前:oauthid-123xxxx

    • すべて保存 を選択します。

* の 名前 oauthid-123，置換 123 facebook アプリ ID またはTwitter 消費者 (API) キー これは、 クライアント ID 内 AdobeGranite OAuth Application and Provider設定。

chlimage_1-492

詳しくは、 Oak クエリとインデックス作成.

Dispatcher 設定

詳しくは、 コミュニティ用の Dispatcher の設定.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6