Show Menu
トピック×

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

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

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

ソーシャルログイン機能を含めるには、カスタムの Facebook アプリケーションや Twitter アプリケーションを作成する必要があります。**
While the we-retail sample provides sample Facebook and Twitter apps and cloud services, they are not available on a production website .
必要な手順は以下のとおりです。
  1. すべての AEM パブリッシュインスタンスで OAuth 認証を有効 にします。
    OAuthが有効になっていない場合、ログインに失敗します。
  2. ソーシャル アプリとクラウドサービスを作成します。
  3. コミュニティサイトに対して ソーシャルログインを有効​ にします。
以下に示す 2 つの基本的な概念があります。
  1. スコープ (権限)は、アプリが要求できるデータを指定します。
  2. フィールド (params)は、URLパラメーターを使用して要求された実際のデータを指定します。

「Facebook ログイン」を選択します。

Facebook API バージョン

SocialログインとWe-Retail Facebookサンプルは、Facebook Graph APIバージョン1.0のときに開発されました。AEM 6.4 GAおよびAEM 6.3 SP1のソーシャルログインが、新しいバージョンのFacebook Graph API 2.5で動作するように更新されました。
For older AEM versions, if you are facing an exception in logs Can't extract a token from this , upgrade to latest CFP for that AEM release.
For the Facebook Graph API version information, see the Facebook API changelog .

Create a Facebook App

Facebookのソーシャルログインを有効にするには、適切に設定されたFacebookアプリが必要です。
Facebookアプリを作成するには、Facebookの手順に従ってhttps://developers.facebook.com/apps/を参照して ください 。 手順に対する変更は、次の情報には反映されません。
一般的な手順(Facebook API v2.7 の時点):
  • 新しい Facebook アプリを追加します。**
    • For Platform , choose Website:
      • For Site URL , enter https://<server>:<port>.
      • For Display Name , enter a title for use as the Title of the Facebook connect service.
      • カテゴリ ​の場合は、「ペ ージのアプリ 」を選択することをお勧めしますが、どれでもかまいません。
      • 「製品を追加」で、「Facebook ログイン」を選択します。**
      • For Valid OAuth redirect URIs , enter https://<server>:<port>.
開発の場合は、http://localhost:4503が機能します。
Once the application has been created, locate the App ID and App Secret settings. この情報は、 Facebookクラウドサービスを設定する際に必要です

Facebook Connect クラウドサービス

クラウドサービス設定を作成することで、 Adobe Granite OAuth Application and Provider インスタンスが作成されます。このインスタンスが、Facebook アプリケーションと新しいユーザーの追加先のメンバーグループを識別します。
  1. AEM オーサーインスタンスで、管理者権限でサインインします。
  2. From global navigation, select Tools > Cloud Services > Facebook Social login configuration .
  3. コンテキストパス ​設定を選択します。
    コンテキスト パスは、コミュニティサイトの作成/編集時に選択したクラウド設定パスと同じにする必要があります。
  4. コンテキストパスの下にクラウドサービスを作成できる設定になっているかを確認します。
  5. Go to Tools > General > Configuration Browser . コンテキストを選択し、プロパティを編集します。 まだ有効になっていなければ、クラウド設定を有効にします。
  6. Facebook クラウドサービス設定を作成または編集します。
    • タイトル (必​ )Facebookアプリを識別する表示タイトルを入力します。 It is recommended to use the same name entered as the Display Name for the Facebook app.
    • アプリID/APIキー ( 必須 )Facebook アプリ のアプリIDを入力します。 This identifies the Adobe Granite OAuth Application and Provider instance created from the dialog.
    • App Secret (必​ )Facebookアプリ App Secretを入力します。
    • ユーザーを作成 ​オンにすると、Facebook アカウントでログインしたときに AEM ユーザーエントリが作成され、選択されたユーザーグループのメンバーとして追加されます。デフォルトがオンになっている(強く推奨)。
    • Mask User IDs :選択を解除したままにします。
    • Scope Email :ユーザーの電子メールIDをFacebookから取得する必要があります。
    • # 追加では、 # を選択し、ユーザを追加するコミュニティサ イトの users.html 1つ以上のメンバグループを選択します。
    グループはいつでも追加または削除できます。しかし、既存ユーザーのメンバーシップに影響はありません。自動メンバーシップは、このフィールド更新後に作成された新規ユーザーにのみ適用されます。匿名ユーザーが無効になっているサイトの場合は、そのクローズドコミュニティサイト専用の対応するコミュニティメンバーグループにユーザーを追加します。
    • Select SAVE .
    • 公開 .
The result is an Adobe Granite OAuth Application and Provider instance which does not require further modification unless adding additional scope (permissions). デフォルトのスコープは、Facebookログインの標準権限です。 追加のスコープが必要な場合は、OSGI設定を直接編集する必要があります。 システムまたはコンソールから直接変更がおこなわれている場合は、上書きしないよう、タッチ UI からクラウドサービス設定を編集しないでください。

AEM Communities Facebook OAuth Provider

The AEM Communities provider extends the Adobe Granite OAuth Application and Provider instance.
以下をおこなうには、このプロバイダーを編集する必要があります。
  • ユーザーの更新を許可する
  • Add additional fields within scope
    • デフォルトで許可されているすべてのフィールドがデフォルトで含まれるわけではありません。
編集が必要な場合は、それぞれの AEM パブリッシュインスタンスで次の設定をします。
  1. 管理者権限でサインインします。
  2. Navigate to the Web Console . For example, http://localhost:4503/system/console/configMgr.
  3. AEM CommunitiesのFacebook OAuthプロバイダーを探します。
  4. 鉛筆アイコンを選択して編集用に開きます。
    • OAuthプロバイダID
      (必​ )デフォル ト値はsoco -facebookです 。 編集しないでください。
    • クラウドサービス設定
      デフォルト値は /etc/ cloudservices / facebookconnect です。編集しないでください。
    • OAuthプロバイダーサービスの構成
      デフォルト値は /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 でも共通です。

Twitter ログイン

Create a Twitter App

Twitter ソーシャルログインを有効にするには、設定された Twitter アプリが必要です。
Follow the latest instructions to create a new Twitter application at https://apps.twitter.com .
一般的な手順は次のとおりです。
  1. Enter a Name that will identify your Twitter application to the users of your website.
  2. 説明 」を入力します。
  3. For website - enter https://<server> .
  4. For Callback URL - enter https://server .
    ポートを指定する必要はありません。
    開発の場合は、https://127.0.0.1/が機能します。
  5. Once the application has been created, locate the Consumer (API) Key and Consumer (API) Secret . This information will be needed for configuring the Twitter cloud service .

権限

Twitter アプリケーション管理の権限のセクションで、次の設定をします。
  • アクセス :を選択しま Read only す。
    • その他のオプションはサポートされません。
  • 追加の権限 :必要に応じて、を選択し Request email addresses from users ます。
    • 選択しなかった場合は、ユーザーの AEM のプロファイルに電子メールアドレスが含まれなくなります。
    • Twitter の説明に、追加でおこなう手順が示されています。
The only REST request made for social login is to GET account/verify credentials .

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

クラウドサービス設定を作成することで、 Adobe Granite OAuth Application and Provider インスタンスが作成されます。このインスタンスが、Twitter アプリケーションと新しいユーザーの追加先のメンバーグループを識別します。
  1. オーサーインスタンスで、管理者権限でサインインします。
  2. From global navigation, select Tools > Cloud Services > Twitter Social login configuration .
  3. Choose the context path configuration.
    コンテキストパスは、コミュニティサイトの作成または編集時に選択したクラウド設定パスと同じでなければなりません。
  4. コンテキストパスの下にクラウドサービスを作成できる設定になっているかを確認します。
  5. Go to Tools > General > Configuration Browser . コンテキストを選択し、プロパティを編集します。 まだ有効になっていなければ、クラウド設定を有効にします。
  6. Twitter クラウドサービス設定を作成または編集します。
    • タイトル
      ( Required ) Enter a display title that identifies the Twitter App. It is recommended to use the same name entered as the Display Name for the Twitter app.
    • 消費者キー
      ( Required ) Enter the Consumer (API) Key for the Twitter app. This identifies the Adobe Granite OAuth Application and Provider instance created from the dialog.
    • 消費者の秘密鍵
      ( Required ) Enter the Consumer(API) Secret for the Twitter App.
    • ユーザーを作成
      オンにすると、Twitterアカウントでログインすると、AEMユーザーエントリが作成され、選択したユーザーグループのメンバーとして追加されます。 デフォルトがオンになっている(強く推奨)。
    • ユーザー ID をマスク
      選択を解除したままにします。
    • ユーザーグループに追加
      Select Add User Group to choose one or more member groups for the community site to which users will be added.
    グループはいつでも追加または削除できます。ただし、既存のユーザーのメンバーシップは影響を受けません。 自動メンバーシップは、このフィールド更新後に作成された新規ユーザーにのみ適用されます。匿名ユーザーが無効になっているサイトの場合は、その閉じたコミュニティサイト用に、対応するコミュニティメンバーグループにユーザーを追加します。
  7. Select SAVE and Publish .
The result is an Adobe Granite OAuth Application and Provider instance which does not require further modification. デフォルトの範囲には、Twitter にログインするための標準的な権限が含まれています。

AEM Communities Twitter OAuth Provider

The AEM Communities configuration extends the Adobe Granite OAuth Application and Provider instance. ユーザー更新を許可するには、このプロバイダーを編集する必要があります。
編集が必要な場合は、それぞれの AEM パブリッシュインスタンスで次の設定をします。
  1. 管理者権限でサインインします。
  2. Navigate to the Web Console .
    例:http://localhost:4503/system/console/configMgr
  3. AEM CommunitiesのTwitter OAuthプロバイダーを探します。
  4. 鉛筆アイコンを選択して編集用に開きます。
    • OAuthプロバイダID
    (必​ )デフォルト値 はsoco -twitterです 。 編集しないでください。
    • クラウドサービス設定
      The default value is conf. ​編集しないでください。
    • OAuthプロバイダーサービスの構成
      デフォルト値は /apps/social/twitterprovider/config/ です。編集しないでください。
    • ユーザパス
      ユーザーデータが保存されるリポジトリ内の場所。 For a community site, to ensure permissions for members to view one another's profile, the path should be the default /home/users/community .
    • Enable Params do not edit
    • URLパラメータ ーは編集しない
    • ユーザーの更新
      オンにすると、ログインするたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。デフォルト値はオフです。

次の手順

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

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

AEM Communities サイトコンソール

Once a cloud service is configured, it may be enabled for the relevant Social Login setting for a community site using the User Management Settings sub-panel during community site creation or management .
  1. ソーシャルログイン設定を保存したサイト設定コンテキストを選択します。
  2. 「一般」タブで、クラウド設定をおこないます。
  3. 「設定」タブで、「 ソーシャルログイン 」を有効にして「保存」を選択します。

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

  • Ensure Adobe Granite OAuth Authentication Handler has been enabled on all publish instances.
  • クラウドサービスが公開されていることを確認します。
  • コミュニティサイトが公開されていることを確認します。
  • ブラウザーで公開済みサイトを起動します。例:http://localhost:4503/content/sites/engage/en.html
  • Select Login In .
  • Select either Sign in with Facebook or Sign in with Twitter .
  • FacebookまたはTwitterにまだログインしていない場合は、適切な資格情報を使用してログインします。
  • FacebookまたはTwitterアプリで表示されるダイアログに応じて、権限を付与する必要がある場合があります。
  • ページ上部のツールバーが更新され、ログインが成功したことを反映します。
  • Select Profile : the Profile page displays the user's avatar image, first name, and last name. また、許可されたフィールド/パラメーターに従って、FacebookプロファイルまたはTwitterパラメーターの情報も表示されます。

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

Adobe Granite OAuth Authentication Handler

The Adobe Granite OAuth Authentication Handler is not enabled by default and must be enabled on all AEM publish instances.
パブリッシュインスタンスで認証ハンドラーを有効にするには、以下のように OSGi 設定を開いて保存するだけです。
  • 管理者権限でサインインします。
  • Navigate to the Web Console . For example, http://localhost:4503/system/console/configMgr
  • Locate Adobe Granite OAuth Authentication Handler .
  • 設定を編集用に開く場合に選択します。
  • 保存 」を選択します。
Be careful to not confuse the authentication handler with a Facebook or Twitter instance of Adobe Granite OAuth Application and Provider .

Adobe Granite OAuth Application and Provider

When a cloud service for Facebook or Twitter is created, an instance of Adobe Granite OAuth Authentication Handler is created.
Facebook または Twitter アプリ用に作成されたインスタンスを見つけるには、以下のようにします。
  1. 管理者権限でサインインします。
  2. Navigate to the Web Console .
    例:http://localhost:4503/system/console/configMgr
  3. Adobe Granite OAuth Application and Providerを探します。
    • Locate the instance where Client ID matches the App ID .
      次のプロパティを除き、設定の他のプロパティは変更しないでください。
    • 設定ID
      ( Required ) OAuth configuration IDs must be unique. クラウドサービスの作成時に自動生成されます。
    • クライアント ID
      ( Required ) The application ID provided when the cloud service was created.
    • クライアントの秘密鍵
      ( Required ) The application secret provided when the cloud service was created.
    • 対象範囲
      ( Optional ) Additional scope for what is permitted can be asked from the provider. デフォルトで、ソーシャル認証とプロファイルデータの提供に必要な権限が範囲に含まれています。
    • プロバイダID
      ( Required ) The provider ID for AEM Communities is set when the cloud service was created. 編集しないでください。For Facebook Connect, the value is soco -facebook . For Twitter Connect, the value is soco -twitter .
    • グループ
      ( Recommended ) One or more member groups to which created users are added. AEMコミュニティの場合は、コミュニティサイトのリストグループに登録することをお勧めします。
    • コールバック URL
      ( Optional ) URL configured with the OAuth providers to redirect the client back. 元のリクエストのホストを使用するには、相対 URL を使用します。最初にリクエストされた URL を代わりに使用するには、空のままにします。この URL .
    コールバックのドメインは、プロバイダー(FacebookまたはTwitter)に登録する必要があります。
各OAuth認証ハンドラーの設定に対して、インスタンス内に2つの追加の設定が作成されます。
  • Apache Jackrabbit Oakのデフォルトの同期ハンドラ(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.DefaultSyncHandler) — ここで編集を行う必要はありませんが、FacebookフィールドがCQユーザープロファイルノードにマッピングされる方法を確認できます。 また、「同期ハンドラー名」は、OAuthプロバイダー設定のConfig Idと一致します。
  • Apache Jackrabbit Oak外部ログインモジュール(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.ExternalLoginModuleFactory):編集は必要ありませんが、「Identity Provider Name」と「Sync Handler Name」が同じで、対応するOAuthと同期ハンドラーの設定を指している場合があります。

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

数十万人ものクエリがFacebookやTwitterのログインを使用して登録したコミュニティサイトでは、サイト訪問者がソーシャルログインを使用する際に行うユーザーのトラバーサルパフォーマンスを、以下のOakインデックスを追加することで改善できます。
ログにトラバーサル警告が記録されている場合は、このインデックスを追加することを推奨します。
オーサーインスタンスで、管理者権限でサインインします。
  1. From global navigation: select Tools, CRX/DE Lite .
  2. ntBaseLuceneのコピーからntBaseLucene-oauthという名前のインデックスを作成します。
    • ノード下 /oak:index
    • ノードを選択 ntBaseLucene
    • Select Copy
    • /oak:index
    • Select Paste
    • Rename Copy of ntBaseLucene to ntBaseLucene-oauth
  3. ntBaseLucene-oauthノードのプロパティを変更します。
    • indexPath : /oak:index/ntBaseLucene-oauth
    • name : oauthid-123&#x200B;**&#x200B;**
    • reindex : true
    • reindexCount 1
  4. ノード/oak:index/ntBaseLucene-oauth/indexRules/nt:base/propertiesの下:
    • cqTagsを除くすべての子ノードを削除します。
    • Rename cqTags to oauthid-123&#x200B;**&#x200B;**
    • Modify the properties of node oauthid-123&#x200B;**&#x200B;**
      • name : oauthid-123&#x200B;**&#x200B;**
    • Select Save All .
For additional information and tools, refer to Oak Queries and Indexing .

Dispatcher 設定