現在表示中:

ソーシャルログインとは、サイト訪問者に対して、自分の Facebook または Twitter アカウント(AEM メンバープロファイル内の許可されている Facebook または Twitter データを含む)を使用してサインインするオプションを表示する機能です。

SocialLoginWeRetail

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

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

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

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

  1. すべての AEM パブリッシュインスタンスで OAuth 認証を有効にします。
    OAuth が有効でないと、ログインの試行が失敗します。
  2. ソーシャルアプリとクラウドサービスを作成します。
  3. コミュニティサイトに対してソーシャルログインを有効にします。

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

  1. 範囲(権限)では、そのアプリからリクエストできるデータを指定します。
  2. フィールド(パラメーター)では、URL パラメーターを使用してリクエストされる実際のデータを指定します。

Facebook ログイン

Facebook API バージョン

ソーシャルログインと we-retail の Facebook アプリのサンプルは、Facebook Graph API 1.0 バージョンで開発されたものです。
AEM6.4GA および 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」で、「Website」を選択します。
      • Site URL」に、「http://<server>:<port>」と入力します。
    • Display Name」に、Facebook 接続サービスのタイトルとして使用するタイトルを入力します。
    • Category」では「Apps for Pages」を推奨しますが、どれを選択しても構いません。
    • 製品を追加」の「Facebook ログイン」を選択します。
      • Valid OAuth redirect URIs」に「http://<server>:<port>」と入力します。

注意: 開発時には、 http://localhost:4503 を使用できます。

アプリケーションを作成したら、App IDApp Secret の設定を確認します。この情報は、Facebook クラウドサービスの設定で必要になります。

Facebook Connect クラウドサービス

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

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

  2. グローバルナビゲーションから、ツール/クラウドサービス/Facebook ソーシャルログイン設定を選択します。

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

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

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

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

    fbsocialloginconfigpng
    • タイトル必須)Facebook アプリを識別する表示タイトルを入力します。Facebook アプリの「Display Name」に入力したものと同じ名前を使用することを推奨します。
    • App ID / API Key必須)Facebook アプリの App ID を入力します。これが、ダイアログで作成した Adobe Granite OAuth Application and Provider インスタンスを識別する ID になります。
    • アプリケーションの秘密鍵必須)Facebook アプリの App Secret を入力します。
    • ユーザーを作成オンにすると、Facebook アカウントでログインしたときに AEM ユーザーエントリが作成され、選択されたユーザーグループのメンバーとして追加されます。デフォルト値はオンです(強く推奨)。
    • ユーザー ID をマスク:オフのままにします。
    • スコープ電子メール:ユーザーの電子メール ID は Facebook から取得する必要があります。
    • ユーザーグループに追加「ユーザーグループに追加」を選択し、コミュニティサイトのユーザー追加先のメンバーグループを 1 つ以上選択します。

    注意:

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

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

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

AEM Communities Facebook OAuth Provider

AEM Communities プロバイダーは、Adobe Granite OAuth Application and Provider インスタンスを拡張するものです。

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

  • ユーザー更新の許可
  • 範囲内でのフィールドの追加
    • デフォルトで許可されるフィールドが、すべてデフォルトで含まれているわけではありません。

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

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

  2. Web コンソールに移動します。例:http://localhost:4503/system/console/configMgr

  3. AEM Communities Facebook OAuth Provider を見つけます。

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

    fboauthprov_png
    • OAuth Provider ID
      必須デフォルト値は soco-facebook です。編集しないでください。
    • Cloud Service Config
      デフォルト値は /etc/cloudservices/facebookconnect です。編集しないでください。
    • OAuth Provider Service Config
      デフォルト値は /apps/social/facebookprovider/config/ です。編集しないでください。
    • Enable Tags
      編集しないでください。
    • User Path
      ユーザーデータを格納するリポジトリの場所です。コミュニティサイトでは、メンバーがお互いのプロファイルを閲覧できる権限を確保するために、パスをデフォルトの /home/users/community にする必要があります。
    • Enable fields
      オンにすると、その下にリストされているフィールドが、ユーザー認証およびユーザー情報を求める Facebook へのリクエストに指定されます。デフォルト値はオフです。
    • Fields
      「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 アプリが必要です。

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

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

  1. Name」に Twitter アプリケーションを識別する名前を入力します。

  2. Description」に説明を入力します。

  3. Website」に「http://<server>/」と入力します。

  4. Callback URL」に「http://<server>/」と入力します。

    注意:

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

    開発時には、http://127.0.0.1/ を使用できます。

  5. アプリケーションを作成したら、Consumer(API)KeyConsumer(API)Secret を確認します。この情報は、Twitter クラウドサービスの設定で必要になります。

権限

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

  • Access」で、「Read only」を選択します。
    • その他のオプションはサポートされません。
  • Additional Permissions」で、必要に応じて「Request email addresses from users」を選択します。
    • 選択しなかった場合は、ユーザーの AEM のプロファイルに電子メールアドレスが含まれなくなります。
    • Twitter の説明に、追加でおこなう手順が示されています。

ソーシャルログインのために実行される REST リクエストは、GET account/verify credentials だけです。

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

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

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

  2. グローバルナビゲーションから、ツール/クラウドサービス/Twitter ソーシャルログイン設定を選択します。

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

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

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

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

    twittersocialloginpng
    • タイトル必須)Twitter アプリを識別する表示タイトルを入力します。Twitter アプリの「Display Name」に入力したものと同じ名前を使用することを推奨します。
    • 消費者キー必須)Twitter アプリの Consumer(API)Key を入力します。これが、ダイアログで作成した Adobe Granite OAuth Application and Provider インスタンスを識別する ID になります。
    • 消費者の秘密鍵必須)Twitter アプリの Consumer(API)Secret を入力します。
    • ユーザーを作成オンにすると、Twitter アカウントでログインしたときに AEM ユーザーエントリが作成され、選択されたユーザーグループのメンバーとして追加されます。デフォルト値はオンです(強く推奨)。
    • ユーザー ID をマスクオフのままにします。
    • ユーザーグループに追加「ユーザーグループに追加」を選択し、コミュニティサイトのユーザー追加先のメンバーグループを 1 つ以上選択します。

    注意:

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

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

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

AEM Communities Twitter OAuth Provider

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

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

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

  2. Web コンソールに移動します。
    例:http://localhost:4503/system/console/configMgr

  3. AEM Communities Twitter OAuth Provider を見つけます。

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

    twitteroauth_png
    • OAuth Provider ID必須
      デフォルト値は soco-twitter です。編集しないでください。
    • Cloud Service Config
      デフォルト値は confです。編集しないでください。
    • OAuth Provider Service Config
      デフォルト値は /apps/social/twitterprovider/config/ です。編集しないでください。
    • User Path
      ユーザーデータを格納するリポジトリの場所です。コミュニティサイトでは、メンバーがお互いのプロファイルを閲覧できる権限を確保するために、パスをデフォルトの /home/users/community にする必要があります。
    • Enable Tags編集しないでください。
    • URL Parameters編集しないでください。
    • Update User
      オンにすると、ログインするたびにリポジトリ内のユーザーデータが更新され、プロファイルの変更やリクエストされた追加データが反映されます。デフォルト値はオフです。

次の手順

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

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

AEM Communities サイトコンソール

クラウドサービスが設定されると、コミュニティサイトを作成または管理するときに表示される「ユーザー管理」設定で、コミュニティサイトの適切なソーシャルログイン設定に対してクラウドサービスを有効化できるようになります。

  1. ソーシャルログイン設定を保存したサイト設定コンテキストを選択します。

  2. 「一般」タブで、クラウド設定をおこないます。

    managesites_png
  3. 「設定」タブで、「ソーシャルログイン」を有効にして「保存」を選択します。

    usermgmt_png

AEM Sites コンソール

AEM Sites コンソールを使用し、以下の手順を実行して、設定済みの Facebook または Twitter クラウドサービス設定をターゲット Web サイトのルートに適用します。

  • AEM サイトをオーサリング編集モードで開きます。
  • ページ情報アイコンを選択します。
  • プロパティを開く」を選択します。
  • クラウドサービス」タブを選択します。
  • クラウドサービス設定で「設定を追加」を選択します。
  • Facebook Connect」または「Twitter Connect」を選択します。
  • 設定の参照」のドロップダウンリストを使用して、設定したクラウドサービスの名前を選択します。
    • 例えば「Engagement Community Facebook App」などです。
  • 確認アイコンを選択します。
apply
properties

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

  • Adobe Granite 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 を見つけます。
  • 選択して編集のために設定を開きます。
  • Save」を選択します。
chlimage_1

警告:

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

chlimage_1

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. Adobe Granite OAuth Application and Provider を見つけます。

    • Client IDApp ID と一致するインスタンスを見つけます。
    chlimage_1

    ほとんどのプロパティは、変更せずそのままにする必要があります。以下は参考情報です。

    • Config ID
      必須)OAuth 設定 ID は一意である必要があります。クラウドサービスを作成したときに自動生成されます。
    • Client ID
      必須)クラウドサービスを作成したときに与えられるアプリケーション ID です。
    • Client Secret
      必須)クラウドサービスを作成したときに与えられるアプリケーションの秘密鍵です。
    • Scope
      オプション)プロバイダーからのリクエストを受けることを許可する追加の範囲です。デフォルトで、ソーシャル認証とプロファイルデータの提供に必要な権限が範囲に含まれています。
    • Provider ID
      必須)AEM Communities のプロバイダー ID は、クラウドサービスを作成したときに設定されます。編集しないでください。Facebook Connect では、値は soco-facebook です。Twitter Connect では、値は soco-twitter です。
    • Groups
      推奨)1 つ以上の作成されたユーザーの追加先のメンバーグループです。AEM Communities では、コミュニティサイトのメンバーグループをリストすることを推奨します。
    • Callback URL
      オプション)OAuth プロバイダーで設定される、クライアントをリダイレクトして戻すための URL です。元のリクエストのホストを使用するには、相対URLを使用します。最初にリクエストされた URL を代わりに使用するには、空のままにします。このURLには、「/callback/j_security_check」というサフィックスが自動的に追加されます。注意:このコールバックドメインはプロバイダー(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 プロバイダー設定の Config Id と一致していることも分かります。
  • Apache Jackrabbit Oak External Login Module(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.ExternalLoginModuleFactory) – 編集は必要ありませんが、「Identity Provider Name」と「Sync Handler Name」が同じで、それぞれ対応する OAuth ハンドラー設定と Sync ハンドラー設定を指していることが分かります。

詳しくは、Apache Oak 外部ログインモジュールによる認証を参照してください。

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

何十万ものユーザーが Facebook または Twitter ログインを使用して登録することがあるコミュニティサイトでは、サイト訪問者がソーシャルログインを使用するときに実行されるクエリのトラバーサルパフォーマンスを、以下の Oak インデックスを追加することで改善できる場合があります。 

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

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

  1. グローバルナビゲーションから、ツール/CRXDE Liteを選択します。
  2. 以下の手順で、ntBaseLucene のコピーから ntBaseLucene-oauth という名前のインデックスを作成します。
    • ノード /oak:index に移動します。
    • ノード ntBaseLucene を選択します。
    • コピー」を選択します。
    • /oak:index を選択します。
    • 貼り付け」を選択します
    • ntBaseLucene のコピー」という名前を「ntBaseLucene-oauth」に変更します。
  3. ノード ntBaseLucene-oauth のプロパティを以下のように変更します。
    • indexPath/oak:index/ntBaseLucene-oauth
    • nameoauthid-123*
    • reindextrue
    • reindexCount1
  4. ノード /oak:index/ntBaseLucene-oauth/indexRules/nt:base/properties に移動します。
    • cqTags を除いてすべての子ノードを削除します。
    • cqTags」という名前を「oauthid-123*」に変更します。
    • ノード oauthid-123* のプロパティを以下のように変更します。
      • nameoauthid-123*
  • すべて保存」を選択します。

* nameoauthid-123 については、123 を、Adobe Granite OAuth Application and Provider 設定の Client ID の値である Facebook の App ID または Twitter の Consumer(API)Key に置き換えます。

chlimage_1

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

Dispatcher 設定

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー