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

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

socialloginweretail

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

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

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

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

OAuthが有効になっていない場合、はログインに失敗します。
ソーシャルアプリとクラウドサービスを作成します。
- facebookでのログインをサポートするには：
  - Facebookアプリを作成します。
  - Facebook Connectクラウドサービスを作成して公開します。
- twitterでのログインをサポートするには：
  - Twitterアプリを作成します。
  - Twitter Connectクラウドサービスを作成して公開します。
コミュニティサイトに対してソーシャルログインを有効にします。

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

範囲（権限）は、アプリがリクエストできるデータを指定します。
- facebookとTwitterのAdobeGranite OAuth Application and Providerインスタンスには、デフォルトで、その範囲内に基本的なアプリ権限が含まれています。
フィールド (params)は、URLパラメーターを使用してリクエストされた実際のデータを指定します。
- これらのフィールドは、AEM Communities Facebook OAuth ProviderおよびAEM Communities Twitter OAuth Providerで指定します。
- デフォルトのフィールドはほとんどの使用例で十分ですが、変更できます。

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変更ログを参照してください。

Create a Facebook App

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 アプリケーションと新しいユーザーの追加先のメンバーグループを識別します。

AEM オーサーインスタンスで、管理者権限でサインインします。
グローバルナビゲーションから、ツール / Cloud Services / Facebook Socialログイン設定を選択します。
コンテキストパス設定を選択します。

コンテ キストパスは、コミュニティサイトの作成/編集時に選択したクラウド設定パスと同じである必要があります。
コンテキストパスの下にクラウドサービスを作成できる設定になっているかを確認します。
ツール > 一般 > 設定ブラウザーに移動します。コンテキストを選択し、プロパティを編集します。まだ有効になっていなければ、クラウド設定を有効にします。
- 詳しくは、設定ブラウザーのドキュメントを参照してください。
Facebook クラウドサービス設定を作成または編集します。
- タイトル (必須)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 パブリッシュインスタンスで次の設定をします。

管理者権限でサインインします。
Webコンソールに移動します。例：http://localhost:4503/system/console/configMgr
AEM Communities Facebook OAuth Providerを見つけます。
鉛筆アイコンを選択して編集用に開きます。
- 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 ハンドラー設定を更新してマッピングを修正してください。
- ユーザーを更新
  
  オンにすると、ログインするたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。デフォルト値はオフです。

次の手順

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

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

Create a Twitter App

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

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

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

Webサイトのユーザーに対してTwitterアプリケーションを識別する名前を入力します。
「説明」を入力します。
webサイトの場合は、https://<server>と入力します。
Callback URLには、https://serverと入力します。

メモ

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

開発の場合は、https://127.0.0.1/が機能します。
アプリケーションが作成されたら、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 アプリケーションと新しいユーザーの追加先のメンバーグループを識別します。

オーサーインスタンスで、管理者権限でサインインします。
グローバルナビゲーションから、ツール / Cloud Services / Twitter Socialログイン設定を選択します。
コンテキストパス設定を選択します。

コンテキストパスは、コミュニティサイトの作成または編集時に選択したクラウド設定パスと同じでなければなりません。
コンテキストパスの下にクラウドサービスを作成できる設定になっているかを確認します。
ツール > 一般 > 設定ブラウザーに移動します。コンテキストを選択し、プロパティを編集します。まだ有効になっていなければ、クラウド設定を有効にします。
- 詳しくは、設定ブラウザーのドキュメントを参照してください。
Twitter クラウドサービス設定を作成または編集します。
- タイトル
  
  （必須） Twitterアプリを識別する表示タイトルを入力します。 twitterアプリの表示名と同じ名前を使用することをお勧めします。
- 消費者キー
  
  （必須） TwitterアプリのConsumer(API)Keyを入力します。これは、ダイアログから作成されたAdobeGranite OAuth Application and Providerインスタンスを識別します。
- 消費者の秘密鍵
  
  （必須） TwitterアプリのConsumer(API) Secretを入力します。
- ユーザーを作成
  
  オンにすると、TwitterアカウントでログインしたときにAEMユーザーエントリが作成され、選択したユーザーグループにメンバーとして追加されます。デフォルトはオンです（強く推奨します）。
- ユーザー ID をマスク
  
  選択を解除したままにします。
- ユーザーグループに追加
  
  「ユーザーグループを追加」を選択して、ユーザーを追加するコミュニティサイト用の1つ以上のメンバーグループを選択します。
メモ

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

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

AEM Communities Twitter OAuth Provider

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

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

管理者権限でサインインします。
Webコンソールに移動します。

例：http://localhost:4503/system/console/configMgr
AEM Communities Twitter OAuth Providerを見つけます。
鉛筆アイコンを選択して編集用に開きます。
- 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中に「ユーザー管理設定」サブパネルを使用して、コミュニティサイトの関連するソーシャルログイン設定を有効にできます。

ソーシャルログイン設定を保存したサイト設定コンテキストを選択します。
「一般」タブで、クラウド設定をおこないます。
「設定」タブで、「ソーシャルログイン」を有効にして「保存」を選択します。

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を探します。
「」を選択して、編集用に設定を開きます。
「保存」を選択します。

graniteoauth

注意

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

graniteoauth1

Adobe Granite OAuth Application and Provider

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

Facebook または Twitter アプリ用に作成されたインスタンスを見つけるには、以下のようにします。

管理者権限でサインインします。
Webコンソールに移動します。

例：http://localhost:4503/system/console/configMgr
AdobeGranite OAuth Application and Providerを見つけます。
- クライアントIDがアプリIDと一致するインスタンスを見つけます。
  
  次のプロパティを除き、設定のその他のプロパティは変更しないでください。
- 設定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インデックスを追加することで、サイト訪問者がソーシャルログインを使用した際に実行されるクエリのトラバーサルパフォーマンスを向上できます。

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

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

グローバルナビゲーションから：ツールCRX/DE Lite.を選択します。
ntBaseLuceneのコピーからntBaseLucene-oauthという名前のインデックスを作成します。
- ノード/oak:indexの下
- ノードntBaseLuceneを選択します。
- コピーを選択します。
- /oak:index
- 貼り付けを選択します。
- ntBaseLuceneのコピーの名前をntBaseLucene-oauthに変更します。
ntBaseLucene-oauthノードのプロパティを変更します。
- indexPath: /oak:index/ntBaseLucene-oauth
- 名前: oauthid-123****
- 再インデックス: true
- reindexCount：1
ノード/oak:index/ntBaseLucene-oauth/indexRules/nt:base/propertiesの下で、次の操作を行います。
- cqTagsを除くすべての子ノードを削除します。
- cqTagsの名前をoauthid-123****に変更します。
- ノードoauthid-123****のプロパティを変更します
  - 名前: oauthid-123****
- 「すべて保存」を選択します。

name oauthid-123の場合、123をFacebookのApp IDまたはTwitterのConsumer(API)Key（a9/>クライアントID の値）に置き換えます。AdobeGranite OAuth Application and Provider設定。

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