Show Menu
主題×

使用Facebook和Twitter進行社交登入

社交登入是一種功能,可讓網站訪客選擇使用其Facebook或Twitter帳戶登入。 因此,請在其AEM會員個人檔案中加入允許的Facebook或Twitter資料。

社交登入概觀

若要包含社交登入,必須 建立 自訂Facebook和Twitter應用程式。
雖然我們零售的範例提供範例Facebook和Twitter應用程式以及雲端服務,但是無法在製作網站 上使用
所需步驟包括:
  1. 在所有AEM發佈例項上 ,啟用OAuth驗證。
    未啟用OAuth時,嘗試登入失敗。
  2. 建立 社交應用程式和雲端服務。
  3. 啟用​ 的社交登入。
有兩個基本概念:
  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版本搭配使用。
對於舊版AEM,如果您在記錄檔中遇到例外 Can't extract a token from this ,請升級至該AEM版本的最新CFP。
如需Facebook圖形API版本資訊,請參閱 Facebook API變更記錄

建立Facebook應用程式

必須有正確設定的Facebook應用程式,才能啟用Facebook社交登入。
若要建立Facebook應用程式,請依照Facebook的指示,網址為 https://developers.facebook.com/apps/ 。 下列資訊不會反映對其指示的變更。
一般而言,自Facebook API v2.7起:
  • 新增Facebook應用程式
    • 若為 平台 ,請選擇「網站:
      • 若為 網站URL ,請輸入 https://<server>:<port>.
      • 在「 顯示名稱 」中,輸入要用作Facebook連線服務標題的標題。
      • 對於 類別 ,建議選擇「頁 面的應用程式 」,但可以是任何項目。
      • 新增產品: Facebook登入
      • 若為 有效的OAuth重新導向URI ,請輸入 https://<server>:<port>.
若要開發,http://localhost:4503將有效。
建立應用程式後,請找出「應用程式 ID」和「應用程式 密碼」設定 。 設定 Facebook雲端服務時需要此資訊

建立Facebook Connect Cloud服務

Adobe Granite OAuth應用程式和Provider social-login.html#AdobeGraniteOAuthApplicationandProvider (透過建立雲端服務設定實例化)例項可識別新增使用者的Facebook應用程式和成員群組。
  1. 在AEM作者例項上,以管理員權限登入。
  2. 從全域導覽中,選 取「工具 > 雲端服務 > Facebook Social登入設定」
  3. 選擇配置上 下文路徑
    上下文路徑 ,應與您在建立/編輯社群網站時選取的雲端設定路徑相同。
  4. 檢查您的上下文路徑是否已啟用,以在其下方建立雲端服務。
  5. 前往「工 >一 >設 定瀏覽器 」。 選取您的上下文並編輯屬性。 如果尚未啟用,請啟用雲端設定。
  6. 建立/編輯 Facebook雲端服務設定。
    • 標題 (必​ )輸入識別Facebook應用程式的顯示標題。 建議您使用與Facebook應用程式的「顯 示名稱 」輸入相同的名稱。
    • 應用程式ID/API金鑰 (必​ )輸入Facebook應 用程式的應用程式ID 。 這會識別 從對話方塊建立的Adobe Granite OAuth應用程式和Provider 執行個體。
    • App Secret (必​ )輸入Facebook應 用程式的App Secret
    • 建立使用者 :如果勾選,使用Facebook帳戶登入將建立AEM使用者項目,並將其新增為所選使用者群組的成員。 已勾選預設值(強烈建議)。
    • 遮色片使用者ID :保持未選定狀態。
    • 範圍電子郵件 :應從Facebook擷取使用者的電子郵件ID。
    • 「新增至使用者群組 」選取「新增使用者群組」,為要新增使用者的社群 網站 ,選擇一或多個成員群組。
    您可隨時新增或移除群組。 但現有使用者的會籍不會受到影響。 自動會籍僅適用於在此欄位更新後建立的新使用者。 對於匿名用戶被禁用的站點,選擇將用戶添加到為該封閉社區站點指定的相應社區成員組。
    • 選擇 保存
    • 發佈 .
結果會是 Adobe Granite OAuth應用程式和Provider 例項,除非新增其他範圍(權限),否則不需要進一步修改。 預設範圍是Facebook登入的標準權限。 如果需要其他範圍,則需要直接編輯OSGI配置。 如果有修改是透過系統/主控台直接完成,請避免從觸控式使用者介面編輯您的雲端服務設定,以避免覆寫。

AEM Communities Facebook OAuth提供者

AEM Communities提供者可擴充 Adobe Granite OAuth應用程式和提供者例項
此提供者需要編輯才能:
  • 允許使用者更新
  • 在範圍內新增其 他欄位
    • 並非預設允許的所有欄位都包含在內。
如果需要編輯,請在每個AEM發佈例項上:
  1. 以管理員權限登入。
  2. 導覽至 Web主控台 。 例如,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要求使用者驗證和資訊時指定列出的欄位。 預設值為取消選中。
    • 欄位
      啟用「欄位」後,呼叫Facebook圖形API時會包含下列欄位。 這些欄位必須允許在雲端服務設定中定義的範圍內。 其他欄位可能需要Facebook核准。 參考Facebook檔案的「Facebook登入權限」區段。 新增為參數的預設欄位為:
      • id
      • 名稱
      • first_name
      • last_name
      • link
      • 地區設定
      • 圖片
      • 時區
      • updated_time
      • 已驗證
      • 電子郵件
    如果添加或更改了任何欄位,請更新相應的預設同步處理程式配置以更正映射。
    • 更新使用者
      如果選中此選項,則每次登錄時都會刷新儲存庫中的用戶資料,以反映配置檔案更改或請求的其他資料。 已取消選取預設值。

後續步驟

Facebook和Twitter的後續步驟相同:

Twitter登入

建立Twitter應用程式

必須有已設定的Twitter應用程式才能啟用Twitter社交登入。
請依照最新指示,在https://apps.twitter.com建立新的Twitter應用 程式
一般而言:
  1. 輸入 Name ,以識別您的Twitter應用程式給您網站的使用者。
  2. 輸入說
  3. 對於 網站 -輸入 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 Connect Cloud服務

Adobe Granite OAuth應用程式和Provider Adobe Granite OAuth應用程式與供應商 (透過建立雲端服務設定實例化)例項可識別新增使用者的Twitter應用程式和成員群組。
  1. 在作者例項上,以管理員權限登入。
  2. 從全域導覽中,選 取「工具 > 雲端服務 > Twitter Social登入設定」
  3. 選擇上 下文路徑
    上下文路徑應與您在建立/編輯社群網站時選取的雲端設定路徑相同。
  4. 檢查您的上下文路徑是否已啟用,以在其下方建立雲端服務。
  5. 前往「工 >一 >設 定瀏覽器 」。 選取您的上下文並編輯屬性。 如果尚未啟用,請啟用雲端設定。
  6. 建立/編輯Twitter雲端服務設定。
    • 標題
      (必​ )輸入識別Twitter應用程式的顯示標題。 建議您使用與Twitter應用程式的「顯 示名稱 」輸入相同的名稱。
    • 消費者金鑰
      (必​ )輸入 ​Twitter應用程式的消費者(API)金鑰。 這會識別 從對話方塊建立的Adobe Granite OAuth應用程式和Provider 執行個體。
    • 消費者機密
      (必​ )輸入 ​** Twitter應用程式的消費者(API)密碼。
    • 建立使用者
      如果勾選,使用Twitter帳戶登入將建立AEM使用者項目,並將其新增為所選使用者群組的成員。 已勾選預設值(強烈建議)。
    • 隱藏使用者 ID
      保持未選定狀態。
    • 新增到使用者群組
      選擇「添加用戶組」,為將添加用 戶的社區 站點選擇一個或多個成員組。
    您可隨時新增或移除群組。 但現有使用者的會籍不會受到影響。 自動會籍僅適用於在此欄位更新後建立的新使用者。 對於匿名使用者被停用的網站,請將使用者新增至該封閉社群網站的對應社群成員群組。
  7. 選擇 「儲存 」和「 發佈」
結果會是 social-login.html#adobe-granite-oauth-application-and-provider Adobe Granite OAuth應用程式和Provider實例,不需要進一步修改。 預設範圍是Twitter登入的標準權限。

AEM Communities TwitterOAuth提供者

AEM Communities設定可擴充 Adobe Granite OAuth應用程式和提供者例項 。 此提供者需要編輯才能允許使用者更新。
如果需要編輯,請在每個AEM發佈例項上:
  1. 以管理員權限登入。
  2. 導覽至 Web主控台
    例如,http://localhost:4503/system/console/configMgr。
  3. 尋找AEM Communities Twitter的OAuth提供者。
  4. 選取要開啟以進行編輯的鉛筆圖示。
    • OAuth提供者ID
    (必​ )預設值 為soco -twitter 。 不要編輯。
    • 雲端服務設定
      預設值為 conf。 不要編輯。
    • OAuth提供者服務設定
      預設值為 /apps/social/twitterprovider/config/ 。 不要編輯。
    • 使用者路徑
      儲存用戶資料的儲存庫中的位置。 對於社群網站,為確保成員能夠檢視彼此的描述檔的權限,路徑應為預設路徑 /home/users/community
    • 啟用參數 ,不要編輯
    • URL參數 :不編輯
    • 更新使用者
      如果選中此選項,則每次登錄時都會刷新儲存庫中的用戶資料,以反映配置檔案更改或請求的其他資料。 預設值為取消選中。

後續步驟

Facebook和Twitter的後續步驟相同:

啟用社交登入

AEM Communities Sites Console

在設定雲端服務後,在建立或管理社群網站時,可使用「使用者管理設定」子面板,為社群網站啟用相關的「社交登入」設 sites-console.html#SiteCreationsites-console.html#ModifyingSiteProperties
  1. 選擇您儲存社交登入設定的網站設定內容。
  2. 在「一般」標籤上,設定雲端設定。
  3. 在「設定」標籤上,啟 用「社交登入 」和「儲存」。

測試社交登入

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

AEM Platform OAuth組態

Adobe Granite OAuth驗證處理常式

Adobe Granite OAuth Authentication Handler 設未啟用,且必 須在所有AEM發佈例項上啟用。
若要在發佈時啟用驗證處理常式,只要開啟OSGi組態並儲存它:
  • 以管理員權限登入。
  • 導覽至 Web主控台 。 例如,http://localhost:4503/system/console/configMgr
  • 找到 Adobe Granite OAuth Authentication Handler
  • 選擇以開啟要編輯的配置。
  • 選擇 保存
請小心不要將驗證處理常式與 Adobe Granite OAuth應用程式和提供者的Facebook或Twitter例項混淆

Adobe Granite OAuth應用程式與供應商

當建立Facebook或Twitter的雲端服務時,會建立例 Adobe Granite OAuth Authentication Handler 項。
若要尋找Facebook或Twitter應用程式的已建立例項:
  1. 以管理員權限登入。
  2. 導覽至 Web主控台
    例如,http://localhost:4503/system/console/configMgr。
  3. 找到Adobe Granite OAuth應用程式和供應商。
    • 找出用戶端ID與 應用程式ID 相符 的例項
      除了下列屬性外,請保留組態的其他屬性不變:
    • 設定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預設同步處理常式(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)-不需要進行編輯,但您可能會注意到「身分提供者名稱」和「同步處理常式名稱」分別指向對應的OA和同步處理常式uth組態。

OAuth使用者周遊效能

對於使用Facebook或Twitter登入功能註冊的社群網站,當網站訪客使用其社交登入功能時,可新增下列Oak索引來改善查詢的周遊效能。
如果日誌中出現遍歷警告,建議添加此索引。
在作者例項上,以管理權限登入:
  1. 從全域導覽:選 擇「工 具」,CRX/DE Lite
  2. 從ntBaseLucene的副本建立名為ntBaseLucene-oauth的索引:
    • 在節點下 /oak:index
    • 選擇節點 ntBaseLucene
    • 選擇復
    • 選取 /oak:index
    • 選擇 貼上
    • 將ntBaseLucene的副本更名為 ntBaseLucene-oauth
  3. 修改node ntBaseLucene-oauth的屬性:
    • indexPath : /oak:index/ntBaseLucene-oauth
    • 名稱 : oauthid-123&#x200B;**&#x200B;**
    • reindex : true
    • reindexCount : 1
  4. 在node /oak:index/ntBaseLucene-oauth/indexRules/nt:base/properties下:
    • 刪除所有子節點,cqTags除外。
    • 將cqTags重新命名為 oauthid-123&#x200B;**&#x200B;**
    • 修改節點的屬性 oauthid-123&#x200B;**&#x200B;**
      • 名稱 : oauthid-123&#x200B;**&#x200B;**
    • 選擇「 全部保存 」。
  • 名稱 為App oauthid-123 ID或Twitter Application(API)Facebook 的價值是App ID Facebook的客戶OA Granite Application Support的名稱,將123 替換為App ** Adobe Granite OAuth應用程式與供應商 ID或TwitterFacebook應用程式配置的。
如需其他資訊和工具,請參閱 Oak Queries and Indexing

Dispatcher Configuration