使用Facebook和Twitter進行社交登入

社交登入功能可讓網站訪客選擇以其Facebook或Twitter帳戶登入。 因此，請在其AEM成員設定檔中納入允許的Facebook或Twitter資料。

socialloginweretail

社交登入概述

若要加入社交登入，需要建立自訂Facebook和Twitter應用程式。

雖然we-retail範例提供範例Facebook和Twitter應用程式與雲端服務，但在生產網站上無法使用。

所需步驟為：

  1. 在所有AEM 發佈執行個體上啟用OAuth驗證。

    若未啟用OAuth，嘗試登入會失敗。

  2. ​​建立社交應用程式和雲端服務。

  3. ​ 為社 群網站啟用Social登入。

有兩個基本概念：

  1. 範圍 （權限）指定應用程式可請求的資料。

  2. 欄位 (params)會指定使用URL參數請求的實際資料。

Facebook登入

Facebook API版本

facebook圖表API 1.0版時，就已開發Social登入和we-retail Facebook範例。
自AEM 6.4 GA和AEM 6.3 SP1起，社交登入已更新，可搭配較新的Facebook Graph API 2.5版使用。

注意

若為舊版AEM，如果您在記錄​中遇到例外狀況，無法從此​擷取代號，請針對該AEM版本升級至最新的CFP。

如需Facebook圖表API版本資訊，請參閱Facebook API變更記錄。

建立Facebook應用程式

必須有正確設定的Facebook應用程式才能啟用Facebook social登入。

若要建立Facebook應用程式，請依照Facebook的指示，網址為https://developers.facebook.com/apps/。 下列資訊不會反映對其指示的變更。

一般而言，自Facebook API v2.7起：

  • 新增Facebook應用程式：
    • 對於​Platform，選擇「網站」
      • 對於​網站URL，請輸入 https://<server>:<port>.
    • 對於​顯示名稱，輸入標題以用作Facebook連接服務的標題。
    • 若為​類別，建議您選擇​頁面應用程式​但可以是任何項目。
    • 添加產品：Facebook登入
      • 對於​有效的OAuth重定向URI，請輸入 https://<server>:<port>.
注意

對於發展，http://localhost:4503將有效。

建立應用程式後，找出​應用程式ID​和​應用程式密碼​設定。 設定Facebook雲端服務時需要此資訊。

建立Facebook ConnectCloud Service

透過建立雲端服務設定來具現化的AdobeGranite OAuth應用程式和Provider例項，可識別新使用者所加入的Facebook應用程式和成員群組。

  1. 在AEM製作例項上，以管理員權限登入。

  2. 在全域導覽中，選取​工具>Cloud Services> Facebook Social登入設定。

  3. 選擇配置​上下文路徑。

    上 下文路徑應與建立/編輯社群網站時所選的雲配置路徑相同。

  4. 檢查您的內容路徑是否已啟用，以在其下建立雲端服務。

  5. 前往「工具>一般>設定瀏覽器」。 選取您的內容並編輯屬性。 如果尚未啟用，請啟用雲端設定。

    config-propertyspng

  6. 建立/編輯Facebook雲端服務設定。

    fbsocialloginconfigpng

    • 標題 (必要)輸入可識別Facebook應用程式的顯示標題。建議您使用與為Facebook應用程式輸入的​顯示名稱​相同的名稱。
    • 應用程式ID/API金鑰 (必要)輸入Facebook 應用 程式的應用程式ID。這會識別從對話方塊建立的AdobeGranite OAuth應用程式和Provider例項。
    • 應用程式密碼 (必要)輸入Facebook 應用 程式的應用程式密碼。
    • 建 立使用者如果勾選此選項，使用Facebook帳戶登入將建立AEM使用者項目，並將他們新增為所選使用者群組的成員。已勾選預設值（強烈建議）。
    • 遮罩使用者ID:保持未選。
    • 範圍電子郵件:應從Facebook擷取使用者的電子郵件id。
    • 添加到用 戶組選擇添加用戶組，以為將添加 用 戶的社區站點選擇一個或多個成員組。
    注意

    可隨時新增或移除群組。 但現有用戶的成員資格不會受到影響。 自動成員資格僅適用於此欄位更新後建立的新使用者。 對於匿名用戶被禁用的站點，選擇將用戶添加到為該封閉的社區站點而指定的相應社區成員組。

    • 選擇​SAVE。
    • 發佈.

結果為AdobeGranite OAuth應用程式和提供者例項，除非新增其他範圍（權限），否則不需要進一步修改。 預設範圍是Facebook登入的標準權限。 如果需要其他範圍，則需要直接編輯OSGI設定。 如果有直接透過系統/主控台完成的修改，請避免從觸控式UI編輯雲端服務設定，以避免覆寫。

AEM Communities Facebook OAuth提供者

AEM Communities提供者延伸AdobeGranite OAuth應用程式和提供者例項。

此提供程式需要編輯：

  • 允許用戶更新

  • 在範圍🔗內添加其他欄位

    • 預設情況下，並非所有允許的欄位都包含在內。

如果需要編輯，請在每個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/。 請勿編輯。

    • 啟用標籤

      請勿編輯。

    • 使用者路徑

      儲存使用者資料的存放庫位置。 對於社群網站，為確保成員能夠查看彼此的配置檔案的權限，路徑應為預設的​/home/users/community。

    • 啟用欄位

      若勾選此選項，系統會在向Facebook提出使用者驗證和資訊的要求時指定所列的欄位。 取消選取預設值。

    • 欄位

      啟用欄位時，呼叫Facebook圖表API時會包含下列欄位。 必須允許在雲端服務設定中定義的範圍內使用欄位。 其他欄位可能需要Facebook核准。 參考Facebook檔案的Facebook登入權限區段。 新增為參數的預設欄位為：

      • id
      • 名稱
      • first_name
      • last_name
      • 連結
      • 地區設定
      • 圖片
      • 時區
      • updated_time
      • 已驗證
      • 電子郵件

    如果添加或更改了任何欄位，請更新相應的預設同步處理程式配置以更正映射。

    • 更新
      用戶如果選中此選項，則每次登錄時刷新儲存庫中的用戶資料，以反映配置檔案更改或請求的其他資料。已取消選取預設值。

後續步驟

facebook和Twitter的後續步驟相同：

Twitter登入

建立Twitter應用程式

必須有已設定的Twitter應用程式才能啟用Twitter social登入。

請依照最新指示，在https://apps.twitter.com建立新的Twitter應用程式。

一般而言：

  1. 輸入​名稱 ，以識別您的網站使用者的Twitter應用程式。

  2. 輸入​說明。

  3. 對於​website — 輸入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帳戶/驗證憑證。

建立Twitter ConnectCloud Service

透過建立雲端服務設定來具現化的AdobeGranite OAuth應用程式和Provider例項，可識別新使用者所加入的Twitter應用程式和成員群組。

  1. 在製作例項上，使用管理員權限登入。

  2. 在全域導覽中，選取​工具>Cloud Services> Twitter Social登入設定。

  3. 選擇​上下文路徑​配置。

    上下文路徑應與您在建立/編輯社群網站時選取的雲配置路徑相同。

  4. 檢查您的內容路徑是否已啟用，以在其下建立雲端服務。

  5. 前往「工具>一般>設定瀏覽器」。 選取您的內容並編輯屬性。 如果尚未啟用，請啟用雲端設定。

    twitterconfigpropping

  6. 建立/編輯Twitter雲端服務設定。

    twittersocialloginpng

    • 標題 (必要)輸入可識別Twitter應用程式的顯示標題。建議您使用與為Twitter應用程式輸入的​顯示名稱​相同的名稱。

    • 消費者金鑰 (必要)輸入Twitter 應用程 式的消費者(API)金鑰。這會識別從對話方塊建立的AdobeGranite OAuth應用程式和Provider例項。

    • 消費者密碼 (必要)輸入Twitter 應用程 式的消費者(API)密碼。

    • 建 立使用者如果勾選此選項，使用Twitter帳戶登入將建立AEM使用者項目，並將他們新增為所選使用者群組的成員。已勾選預設值（強烈建議）。

    • 遮罩使用者 ID保留未選取。

    • 添加到用 戶組選擇添加用戶組，以為將添加 用 戶的社區站點選擇一個或多個成員組。

    注意

    可隨時新增或移除群組。 但現有使用者的會籍不會受到影響。 自動成員資格僅適用於此欄位更新後建立的新使用者。 對於匿名用戶被禁用的站點，將用戶添加到為該封閉的社區站點指定的相應社區成員組。

  7. 選擇​SAVE​和​Publish。

結果是不需要進一步修改的AdobeGranite OAuth應用程式和Provider例項。 預設範圍是Twitter登入的標準權限。

AEM Communities Twitter OAuth提供者

AEM Communities設定會擴充AdobeGranite OAuth應用程式和Provider例項。 此提供程式需要編輯才能允許用戶更新。

如果需要編輯，請在每個AEM發佈例項上：

  1. 以管理員權限登入。

  2. 導覽至Web主控台。

    例如， http://localhost:4503/system/console/configMgr。

  3. 找到AEM Communities Twitter OAuth提供者。

  4. 選取要開啟以進行編輯的鉛筆圖示。

    twitteauth_png

    • OAuth提供者ID (必要)

      預設值為​soco -twitter。 請勿編輯。

    • Cloud Service設定

      預設值為​「conf」。 請勿編輯。

    • OAuth提供程式服務配置

      預設值為​/apps/social/twitterprovider/config/。 請勿編輯。

    • 使用者路徑

      儲存使用者資料的存放庫位置。 對於社群網站，為確保成員能夠查看彼此的配置檔案的權限，路徑應為預設的​/home/users/community。

    • 啟 用參數不編輯

    • URL參 數不編輯

    • 更新用戶

      若勾選此選項，則會在每次登入時重新整理存放庫中的使用者資料，以反映設定檔變更或請求的其他資料。 取消選取預設值。

後續步驟

facebook和Twitter的後續步驟相同：

啟用社交登入

AEM Communities Sites Console

雲端服務一旦設定完成，即可在社群網站建立或管理期間，使用「使用者管理設定」子面板，為社群網站啟用相關的社交登入設定。

  1. 選擇您儲存社交登入設定的網站設定內容。

  2. 在「一般」標籤上，設定雲配置。

    managesites_png

  3. 在「設定」標籤上，啟用​社交登入​並儲存。

    usermgmt_png

測試Social登入

  • 確認所有發佈執行個體上皆已啟用AdobeGranite OAuth驗證處理常式
  • 確保雲端服務已發佈
  • 確保已發佈社群網站
  • 在瀏覽器中啟動已發佈的網站
    例如， http://localhost:4503/content/sites/engage/en.html
  • 選擇​登錄
  • 選取「使用Facebook登入」或「使用Twitter登入」
  • 如果尚未登入Facebook或Twitter，請使用適當的憑證登入
  • 視Facebook或Twitter應用程式顯示的對話方塊而定，可能需要授予權限
  • 請注意，頁面頂端的工具列已更新，以反映成功登入
  • 選擇​配置檔案:設定檔頁面會顯示使用者的頭像影像、名字和姓氏。 它也會根據允許的欄位/參數顯示Facebook或Twitter設定檔的資訊。

AEM Platform OAuth設定

AdobeGranite OAuth驗證處理常式

預設不會啟用Adobe Granite OAuth Authentication Handler，且必須在所有AEM發佈執行個體上啟用​。

若要在發佈時啟用驗證處理常式，只需開啟OSGi設定並儲存：

  • 以管理員權限登入
  • 導覽至Web主控台
    例如， http://localhost:4503/system/console/configMgr
  • 找到Adobe Granite OAuth Authentication Handler
  • 選擇以開啟要編輯的配置
  • 選擇​保存

chlimage_1-489

注意

請留意勿將驗證處理常式與​AdobeGranite OAuth應用程式和提供者​的Facebook或Twitter例項混淆。

chlimage_1-490

AdobeGranite OAuth應用程式和提供者

建立Facebook或Twitter的雲端服務時，會建立Adobe Granite OAuth Authentication Handler例項。

若要找出Facebook或Twitter應用程式的已建立例項：

  1. 以管理員權限登入。

  2. 導覽至Web主控台。

    例如， http://localhost:4503/system/console/configMgr。

  3. 找出AdobeGranite OAuth應用程式和提供者。

    • 找出​用戶端ID​符合​應用程式ID​的例項

    chlimage_1-491

    除了下列屬性外，將設定的其他屬性保持未變更：

    • 設定ID

      （必要）OAuth設定ID必須是唯一的。 建立雲端服務時自動產生。

    • 用戶端識別碼

      （必要）建立雲端服務時提供的應用程式ID。

    • 用戶端密碼

      （必要）建立雲端服務時提供的應用程式密碼。

    • 範圍

      （可選）可向提供程式詢問允許的其他範圍。 預設範圍涵蓋提供社交驗證和設定檔資料所需的權限。

    • 提供者ID

      （必要）建立雲端服務時，會設定AEM Communities的提供者ID。 請勿編輯。 若為Facebook Connect，則值為​soco -facebook。 若為Twitter Connect，則值為​soco -twitter。

    • 群組

      （建議）新增已建立使用者的一或多個成員群組。 若為AEM Communities，建議列出社群網站的成員群組。

    • 回呼 URL

      （選用）URL已透過OAuth提供者設定，以將用戶端重新導向回。 使用相對URL來使用原始請求的主機。 保留為空白，以改用原本請求的URL。 尾碼「/callback/j_security_check」會自動附加至此url。

    注意

    回呼的網域必須向提供者(Facebook或Twitter)註冊。

對於每個OAuth驗證處理常式設定，例項中會建立另外兩個設定：

  • Apache Jackrabbit Oak Default同步處理常式(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.DefaultSyncHandler) — 此處無需編輯，但您可以查看Facebook欄位對應至CQ使用者設定檔節點的使用者欄位對應。 另請注意，「同步處理常式名稱」與OAuth提供者設定的設定ID相符。
  • Apache Jackrabbit Oak External登入模組(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.ExternalLoginModuleFactory) — 此處無須編輯，但您可能會注意到「身分提供者名稱」和「同步處理常式名稱」相同，並分別指向對應的OAuth和同步處理常式設定。

如需詳細資訊，請參閱使用Apache Oak External登入模組驗證。

OAuth使用者周遊效能

針對使用Facebook或Twitter登入功能註冊的社群網站，當網站訪客使用其社交登入功能時，查詢的周遊效能會因為新增下列Oak索引而得以改善。

如果日誌中出現遍歷警告，則建議添加此索引。

在製作例項上，以管理權限登入：

  1. 從全局導航：選擇​工具， CRX/DE Lite。

  2. 從ntBaseLucene的副本建立名為ntBaseLucene-oauth的索引：

    • 在節點/oak:index底下
    • 選擇節點ntBaseLucene
    • 選擇​複製
    • 選取 /oak:index
    • 選擇​貼上
    • 將ntBaseLucene的副本更名為ntBaseLucene-oauth

  3. 修改ntBaseLucene-oauth的屬性：

    • indexPath:/oak:index/ntBaseLucene-oauth
    • 名稱:oauthid-123xxxx
    • 重新索引:true
    • reindexCount:3

  4. 在節點/oak:index/ntBaseLucene-oauth/indexRules/nt:base/properties底下：

    • 刪除cqTags以外的所有子節點。

    • 將cqTags重新命名為outhid-123xxxx

    • 修改node oauthid-123xxxx的屬性

      • 名稱:oauthid-123xxxx

    • 選擇​保存全部。

&ast；若 nameoauthid- ​​123，請以Facebook ​ ID或Twitter ​使用者(API) Key取代 ​123​ ，此為 ​ AdobeGranite OAuth應用程式和** 提供者設定中 Client ID的值。

chlimage_1-492

如需其他資訊和工具，請參閱Oak Querys and Indexing。

Dispatcher設定

請參閱為Communities設定Dispatcher。

本頁內容