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

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

socialloginweretail

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

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

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

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

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

以下に示す 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 変更ログ.

Facebook アプリの作成

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

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

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

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

メモ

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

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

Facebook Connect クラウドサービス

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

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

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

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

結果は AdobeGranite 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 ハンドラー設定を更新してマッピングを修正してください。
- Update Userオンにすると、ログインするたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。デフォルト値はオフです。

次の手順

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

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

Twitter アプリの作成

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

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

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

を入力します。名前これにより、web サイトのユーザーに対するTwitterアプリケーションが識別されます。
説明の入力.
の場合 web サイト - https://と入力します。<server>/.
の場合 コールバック URL - https://と入力します。<server>/.

メモ

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

開発の場合、https://127.0.0.1/が機能します。
アプリケーションが作成されたら、 消費者 (API) キー および 消費者 (API) 秘密鍵. この情報は、 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 App を識別する表示タイトルを入力します。同じ名前を 表示名 twitterアプリ用。
- 消費者キー (必須) 消費者 (API) キー twitterアプリ用。これは、 AdobeGranite OAuth Application and Provider ダイアログから作成されたインスタンス。
- 消費者の秘密鍵 (必須) 消費者 (API) シークレット (Twitter App 用 )
- ユーザーを作成 オンにすると、TwitterアカウントでログインしたときにAEMユーザーエントリが作成され、選択したユーザーグループにメンバーとして追加されます。デフォルトはオンです（強く推奨）。
- ユーザー ID をマスク 選択を解除したままにします。
- ユーザーグループに追加 「ユーザーグループの追加」を選択して、1 つ以上のメンバーグループユーザーを追加するコミュニティサイト用に作成されます。
メモ

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

結果は 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 Params 編集しない
- URL パラメーター 編集しない
- ユーザーを更新
  
  オンにすると、ログインするたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。デフォルト値はオフです。

次の手順

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

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

AEM Communities サイトコンソール

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

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

確認 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 アプリ用に作成されたインスタンスを見つけるには、以下のようにします。

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

例：http://localhost:4503/system/console/configMgr
AdobeGranite OAuth Application and Provider を見つけます。
- Client ID が App ID と一致するインスタンスを見つけます。
次のプロパティを除き、設定の他のプロパティは変更しないでください。
- 設定 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 を代わりに使用するには、空のままにします。この 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-123xxxx
- reindex：true
- reindexCount：1
ノード/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 の設定を参照してください。

adobe.com 上のリソース

Auto Form Fill Responsive Forms Theme Editor Managed Cloud Customer Experience Management Headless Cms