[Azure]用Azure AD B2C實現Facebook登入

上一篇我們展示了如何透過Azure AD B2C實現自訂email登入，接著我們要實現Facebook登入。本篇範例使用的展示網站程式碼與上一篇所使用的網站程式碼相同。

首先，我們需要註冊一個Facebook的應用

• 登入https://developers.facebook.com
• 新增一個應用

• 接著，新增一個產品

• 新增Facebook登入

• 將OAuth Redirect URL設定如下
• https://login.microsoftonline.com/te/{tenant name}/oauth2/authresp
• 其中，tenant name為我們Azure AD B2C的tenant name，例如：demo.onmicrosoft.com
• 應用程式基本資料的設定頁面，將網站網址設定為https://login.microsoftonline.com/

• 記下App ID與Client Secret

• 保存所有設定
• 接著，登入https://portal.azure.com ，然後打開Azure AD B2C管理介面(或是由https://manage.windowsazure.com 進入管理介面)
• 新增一個Identity Prodiver，指定Facebook，將AppID與Client Secret填入

• 打開上一篇我們所建立的Sign-up or Sign-In原則

• 把Facebook Identity provider加入

• 接下來，如果需要針對登入頁面作客制化，可以點選UI Customization，打開UI客製化的Blade

• 這裡，系統提供了預設的登入頁面；如果需要客製化，可以參考這裡的說明進行客製：https://azure.microsoft.com/en-us/documentation/articles/active-directory-b2c-reference-ui-customization/
• 基本上的概念是，我們必須提供我們自己的HTML頁面，這個頁面必須包含某些必要的欄位或設定，並且host在一個可由Internet匿名存取的位置。你也可以使用CDN來加速使用者下載網頁的速度。
• 然後，將這個客製化頁面的網址填在下面Custom page URI的位置；如此當使用者登入時，系統會由這裡把我們的頁面內容崁入系統的登入頁面上。

• 在這裡為了簡單，我全部使用預設頁面
• 設定完成後，儲存設定。
• 打開上一篇完成的網站，按下Login，可以看到Facebook的登入按鈕。

• 試著登入看看，可以發現我們被導向了Facebook的登入畫面，並需要遵循Facebook上定義的多因素登入驗證方式(如果有設定)

• 完成登入後，看看Claim，確實是由Facebook負責驗證