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

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

socialloginweretail

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

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

we-retailサンプルは、FacebookおよびTwitterのサンプルアプリとクラウドサービスを提供していますが、実稼動Webサイトでは使用できません。

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

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

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

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

  3. コミュニティサイトに対して​ソーシャルログインを有効にします。

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

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

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

Facebook ログイン

Facebook API バージョン

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

メモ

古いAEMバージョンでは、ログ​からトークンを抽出できない場合、そのAEMリリースの最新のCFPにアップグレードします。

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

Facebook アプリの作成

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

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

一般的な手順（Facebook API v2.7 の時点）：

  • 新しいFacebookアプリの追加：
    • プラットフォーム​の場合は、「Webサイト」を選択します。
      • サイトURL​に、 https://<server>:<port>.と入力します。
    • 「表示名」に、Facebook接続サービスのタイトルとして使用するタイトルを入力します。
    • カテゴリ​の場合は、ページ用のアプリ​を選択することをお勧めしますが、任意の項目を選択できます。
    • 「製品を追加」で、「Facebook ログイン」を選択します。**
      • 有効なOAuthリダイレクトURI​に、 https://<server>:<port>.と入力します。
メモ

開発の場合は、http://localhost:4503が機能します。

アプリケーションを作成したら、App ID​と​App Secret​の設定を探します。 この情報は、Facebook Cloud Serviceを設定するために必要です。

Facebook Connect クラウドサービス

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

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

  2. グローバルナビゲーションから、ツール/Cloud Services/Facebook Socialログイン設定​を選択します。

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

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

  4. コンテキストパスの下にクラウドサービスを作成できる設定になっているかを確認します。

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

    config-propertiesping

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

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

    fbsocialloginconfig

    • タイトル (必須)Facebookアプリを識別する表示タイトルを入力します。facebookアプリの​表示名​と同じ名前を使用することをお勧めします。
    • アプリID/APIキー (必須)Facebookアプリ のア プリIDを入力します。これは、ダイアログから作成されたAdobeGranite OAuth Application and Providerインスタンスを識別します。
    • App Secret (必須)Facebook Appの App Secret を入力します。
    • ユーザーを作成​オンにすると、Facebook アカウントでログインしたときに AEM ユーザーエントリが作成され、選択されたユーザーグループのメンバーとして追加されます。デフォルトはオンです（強く推奨します）。
    • ユーザーIDをマスク:選択を解除したままにします。
    • 電子メールの範囲:ユーザーの電子メールidは、Facebookから取得する必要があります。
    • ユーザーグループに追 加ユーザーグループを追加を選択し、ユーザーを追加す るコミュニティ サイトの1つ以上のメンバーグループを選択します。
    メモ

    グループはいつでも追加または削除できます。しかし、既存ユーザーのメンバーシップに影響はありません。自動メンバーシップは、このフィールド更新後に作成された新規ユーザーにのみ適用されます。匿名ユーザーが無効になっているサイトの場合は、そのクローズドコミュニティサイト専用の対応するコミュニティメンバーグループにユーザーを追加します。

    • 「保存」を選択します。
    • 公開.

その結果、AdobeのGranite 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 へのリクエストに指定されます。デフォルト値はオフです。

    • フィールド

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

      • id
      • name
      • first_name
      • last_name
      • link
      • locale
      • picture
      • timezone
      • updated_time
      • verified
      • email

    いずれかのフィールドを追加または変更した場合は、対応する Default Sync ハンドラー設定を更新してマッピングを修正してください。

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

次の手順

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

Twitter ログイン

Twitter アプリの作成

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

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

一般的な手順は次のとおりです。

  1. Webサイトのユーザーに対してTwitterアプリケーションを識別する​名前​を入力します。

  2. 説明​の入力.

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

  4. Callback URL​の場合は、 https://<server>/と入力します。

    メモ

    ポートを指定する必要はありません。

    開発の場合は、https://127.0.0.1/が機能します。

  5. アプリケーションが作成されたら、Consumer (API) Key​と​Consumer (API) Secret​を探します。 この情報は、Twitter Cloud Serviceを設定するために必要です。

権限

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

  • アクセス:を選択しま Read onlyす。

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

  • 追加の権限:必要に応じて、「 」を選 Request email addresses from users択します。

    • 選択しなかった場合は、ユーザーの AEM のプロファイルに電子メールアドレスが含まれなくなります。
    • Twitter の説明に、追加でおこなう手順が示されています。

ソーシャルログインに対して行われるRESTリクエストは、GETアカウント/検証資格情報​のみです。

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

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

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

  2. グローバルナビゲーションから、ツール/Cloud Services/Twitter Socialログイン設定​を選択します。

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

    コンテキストパスは、コミュニティサイトの作成または編集時に選択したクラウド設定パスと同じでなければなりません。

  4. コンテキストパスの下にクラウドサービスを作成できる設定になっているかを確認します。

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

    twitterconfigpropng

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

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

    twittersociallogpng

    • タイトル (必須)Twitterアプリを識別する表示タイトルを入力します。twitterアプリの​表示名​と同じ名前を使用することをお勧めします。

    • Consumer Key (必須) Twitterアプリの Consumer(API) キーを入力します。これは、ダイアログから作成されたAdobeGranite OAuth Application and Providerインスタンスを識別します。

    • 消費者の秘密鍵 (必須) TwitterアプリのConsumer(API) Secretを入力します。

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

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

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

    メモ

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

  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 Paramsdo not edit

    • URLパラメ ーターが編集されない

    • ユーザーを更新

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

次の手順

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

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

AEM Communities サイトコンソール

クラウドサービスを設定したら、コミュニティサイトの作成またはmanagement中に「ユーザー管理設定」サブパネルを使用して、コミュニティサイトの関連するソーシャルログイン設定を有効にできます。

  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 プラットフォーム 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を探します
  • 「 」を選択して、編集用に設定を開きます。
  • 「保存」を選択します。

chlimage_1-489

注意

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

chlimage_1-490

Adobe Granite 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を見つけます。

    • Client ID が App ID と一致するインスタンスを見つけます。

    chlimage_1-491

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

    • 設定ID

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

    • クライアント ID

      （必須）クラウドサービスの作成時に指定されたアプリケーションID。

    • クライアントの秘密鍵

      （必須）クラウドサービスの作成時に指定されたアプリケーション秘密鍵。

    • 対象範囲

      （オプション）プロバイダーから許可する追加の範囲を要求できます。 デフォルトで、ソーシャル認証とプロファイルデータの提供に必要な権限が範囲に含まれています。

    • Provider ID

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

    • グループ

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

    • コールバック URL

      （オプションの）OAuthプロバイダーで設定されたURLで、クライアントをリダイレクトして戻します。 元のリクエストのホストを使用するには、相対 URL を使用します。最初にリクエストされた URL を代わりに使用するには、空のままにします。この URL .

    メモ

    コールバックのドメインは、プロバイダー(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
    • reindex：true
    • reindexCount：1

  4. ノード/oak:index/ntBaseLucene-oauth/indexRules/nt:base/propertiesの下で、次の操作を行います。

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

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

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

      • 名前:oauthid-123xxxx

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

&ast; nameoauthid- ​​123 ​の場合、 123 をFacebook App​ IDまたはTwitter Consumer (API) Keyに置き換えます。これは、 AdobeGranite OAuth Applicationと** のクライアント 🔗 IDの値です。derconfiguration.

chlimage_1-492

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

Dispatcher 設定

コミュニティのための Dispatcher の設定を参照してください。

このページ