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

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

socialloginretail

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

ソーシャルログインを含めるには、カスタムFacebookアプリとTwitterアプリを作成するために*必要です。

We-Retailのサンプルは、サンプルのFacebook、Twitterのアプリ、クラウドサービスを提供しますが、実稼動用Webサイトでは利用できません。

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

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

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

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

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

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

  1. Scope (permissions)は、アプリが要求できるデータを指定します。

  2. Fields (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では、ログ​Can't extract a token from this​に例外が発生する場合、AEMリリースの最新のCFPにアップグレードしてください。

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

Create a Facebook App

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

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

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

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

開発のために、http://localhost:4503が動作します。

アプリケーションが作成されたら、アプリID​と​アプリシークレット​の設定を探します。 この情報は、Facebookクラウドサービスを設定する際に必要です。

Facebook Connect クラウドサービス

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

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

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

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

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

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

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

    config-propertiesping

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

    fbsocialloginconfigpng

    • タイトル (必須)Facebookアプリを識別する表示タイトルを入力します。Facebookアプリの​表示名​と同じ名前を使用することをお勧めします。
    • アプリID/APIキー (必須)Facebookアプリの アプリ IDを入力します。これは、ダイアログから作成されたAdobeGranite OAuth ApplicationおよびProviderインスタンスを識別します。
    • アプリの秘密 (必須)Facebookアプリの アプリ 秘密鍵証明書を入力します。
    • ユーザーを作成​オンにすると、Facebook アカウントでログインしたときに AEM ユーザーエントリが作成され、選択されたユーザーグループのメンバーとして追加されます。デフォルトはオンになっています（強く推奨）。
    • Mask User IDs:選択を解除したままにします。
    • Scope Email:ユーザーの電子メールIDをFacebookから取得する必要があります。
    • [ユーザグル追加ープ追加]には、[ユーザグループ]を選択し、ユーザを追加するコミュニティサイトの1つまたは複数の メンバ グループを選択します。
    メモ

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

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

その結果、AdobeGranite OAuth ApplicationとProviderのインスタンスが生成されます。このインスタンスは、追加の範囲（権限）を追加しない限り、さらに変更を行う必要はありません。 デフォルトの範囲は、Facebookログインの標準権限です。 追加の範囲が必要な場合は、OSGI設定を直接編集する必要があります。 システムまたはコンソールから直接変更がおこなわれている場合は、上書きしないよう、タッチ UI からクラウドサービス設定を編集しないでください。

AEM Communities Facebook OAuth Provider

AEM Communitiesプロバイダーは、AdobeGranite OAuth Application and Providerインスタンスを拡張します。

以下をおこなうには、このプロバイダーを編集する必要があります。

  • ユーザーの更新を許可する

  • 範囲](#adobe-granite-oauth-application-and-provider)内の追加追加フィールド[

    • デフォルトで許可されているすべてのフィールドがデフォルトで含まれるわけではありません。

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

  1. 管理者権限でサインインします。

  2. Webコンソールに移動します。例えば、http://localhost:4503/system/console/configMgrのように指定します。

  3. AEM CommunitiesのFacebook OAuthプロバイダーを探します。

  4. 鉛筆アイコンを選択して編集用に開きます。

    fboauthprov_png

    • OAuthプロバイダーID

      （必須）デフォルト値は​soco -facebook​です。 編集しないでください。

    • Cloud Service設定

      デフォルト値は​/etc/ cloudservices / facebookconnect​です。 編集しないでください。

    • OAuthプロバイダーサービスの構成

      デフォルト値は​/apps/social/facebookprovider/config/​です。 編集しないでください。

    • タグを有効にする

      編集しない。

    • User Path

      ユーザーデータが保存されるリポジトリ内の場所。 コミュニティサイトでは、メンバーがお互いのプロファイルを閲覧できる権限を確保するために、パスをデフォルトの /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 アプリが必要です。

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

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

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

  2. 説明​の入力.

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

  4. コールバックURL​の場合 — https://<server>/と入力します。

    メモ

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

    開発のために、https://127.0.0.1/が動作します。

  5. アプリケーションが作成されたら、コンシューマー(API)キー​と​コンシューマー(API)シークレット​を探します。 この情報は、Twitterクラウドサービスの設定に必要です。

権限

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

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

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

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

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

ソーシャルログインに対して行われるREST要求は、GETアカウント/verify credentials​に対してのみです。

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

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

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

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

  3. コンテキストパス​の構成を選択します。

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

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

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

    twitterconfigpropng

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

    twittersocialloginpng

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

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

    • Consumer secret (必須)Twitterアプリの コンシューマ(API) セクレットを入力します。

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

    • Mask User IDsLeaveを選択解除したままにします。

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

    メモ

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

  7. 「保存」と「発行」を選択します。

結果は、AdobeGranite OAuth Applicationおよび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プロバイダーを見つけます。

  4. 鉛筆アイコンを選択して編集用に開きます。

    twitterauth_png

    • OAuthプロバイダーID (必須)

      デフォルト値は​soco -twitter​です。 編集しないでください。

    • Cloud Service設定

      デフォルト値は​confです。​編集しないでください。

    • OAuthプロバイダーサービスの構成

      デフォルト値は​/apps/social/twitterprovider/config/​です。 編集しないでください。

    • User Path

      ユーザーデータが保存されるリポジトリ内の場所。 コミュニティサイトでは、メンバーがお互いのプロファイルを閲覧できる権限を確保するために、パスをデフォルトの /home/users/community にする必要があります。

    • Enable Paramsdo not edit

    • URL パラメータが編集されません

    • ユーザーの更新

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

次の手順

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

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

AEM Communities サイトコンソール

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

  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アプリで表示されるダイアログに応じて権限を付与する必要がある場合があります
  • ページ上部のツールバーが更新され、ログインが成功したことを反映しています
  • プロファイル​を選択：プロファイルページには、ユーザーのアバター画像、名、姓が表示されます。 また、許可されたfields/paramsに従って、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

注意

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

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

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

    • Config 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デフォルト同期ハンドラ(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.DefaultSyncHandler) — 編集は必要ありませんが、FacebookフィールドがCQユーザープロファイルノードにマッピングされる方法を確認できます。 また、'Sync Handler Name'は、OAuthプロバイダー設定のConfig Idと一致します。
  • Apache Jackrabbit Oak外部ログインモジュール(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という名前のインデックスを作成します。

    • node /oak:indexの下
    • ノードntBaseLuceneを選択
    • コピー​を選択
    • /oak:index
    • 貼り付け​を選択
    • 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

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

&ast; namauthid-1233という名前のアプリケーションの場合は、123 ​​という名前のAdobeをFacebook app appID ​​​ ​​​​** ortwitter consumer (KEYVALUEOFTTHEvalue of theVALUEof_APPLICATIONプロバイダー設定。

chlimage_1-492

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

Dispatcher 設定

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

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free