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 バージョン

ソーシャルログインと 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.
    • For Category , recommended choosing Apps for Pages, but can be anything.
    • 「製品を追加」で、「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.
    • アプリのシークレッ ト​ (必須 )Facebookアプリ のアプリのシークレット (App Secret)を入力します。
    • ユーザーを作成 ​オンにすると、Facebook アカウントでログインしたときに AEM ユーザーエントリが作成され、選択されたユーザーグループのメンバーとして追加されます。デフォルトはオンです(強く推奨)。
    • Mask User IDs :選択を解除したままにします。
    • Scope Email :ユーザーの電子メールIDをFacebookから取得する必要があります。
    • 「ユーザーグループに追加 」を選択し、ユーザーを追加するコミュニティサイトの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です 。 編集しないでください。
    • クラウドサービス設定
      Default value is /etc/ cloudservices / facebookconnect . 編集しないでください。
    • OAuthプロバイダーサービスの構成
      Default value is /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 ログイン

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 の説明に、追加でおこなう手順が示されています。
ソーシャルログインのために実行される REST リクエストは、 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 クラウドサービス設定を作成または編集します。
    • タイトル (必​ )Twitterアプリを識別する表示タイトルを入力します。 It is recommended to use the same name entered as the Display Name for the Twitter app.
    • コンシューマーキ ー​ (必 ​須 )Twitterアプリ のコンシューマー(API)キーを入力します。 This identifies the Adobe Granite OAuth Application and Provider instance created from the dialog.
    • コンシューマーシークレ ット​ (必須)Twitterアプリ ​のコンシューマー(API ​** )シークレットを入力します。
    • 「ユーザーを作成 」をオンにした場合、Twitterアカウントでログインすると、AEMユーザーエントリが作成され、選択したユーザーグループにメンバーとして追加されます。 デフォルトはオンです(強く推奨)。
    • 「Mask User IDs Leave」を選択解除したままにします。
    • 「ユーザーグループに追加 」を選択し、ユーザーを追加するコミュニティサイトの1つ 以上のメンバー ・グループを選択します。
    グループはいつでも追加または削除できます。ただし、既存のユーザーのメンバーシップは影響を受けません。 自動メンバーシップは、このフィールド更新後に作成された新規ユーザーにのみ適用されます。匿名ユーザーが無効になっているサイトの場合は、その非公開コミュニティサイト用に、対応するコミュニティメンバーグループにユーザーを追加します。
  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プロバイダーサービスの構成
      The default value is /apps/social/twitterprovider/config/ . 編集しないでください。
    • ユーザパス
      ユーザーデータが保存されるリポジトリ内の場所。 コミュニティサイトでは、メンバーがお互いのプロファイルを閲覧できる権限を確保するために、パスをデフォルトの /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. また、許可されたfields/paramsに従って、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
  • 設定を編集用に開く場合に選択します
  • Select Save
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を探します。
    • Client ID 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プロバイダー設定の構成IDと一致します。
  • Apache Jackrabbit Oak外部ログインモジュール(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.ExternalLoginModuleFactory) — 編集は必要ありませんが、「IDプロバイダー名」と「同期ハンドラー名」は、それぞれ対応するOAuthと同期ハンドラーの設定を指しています。

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

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

Dispatcher 設定