---
# System prepended metadata

title: '工作筆記 #4 - 第三方登入(1)_Facebook'
tags: [第三方登入, facebook, login]

---

# 工作筆記 #4 - 第三方登入(1)_Facebook

需求
---
> 將登入功能加入使用 Facebook 登入

<br />

前置作業
---
> 申請 Facebook 開發人員帳號
1. 到 [Meta for Developers](https://developers.facebook.com/apps/)
 
2. 新建立一個應用程式
![](https://i.imgur.com/FcJtMjg.png)

3. 選擇 [ 消費者 ] 類型
![](https://i.imgur.com/ZrdfXg1.png)

4. 填寫基本資訊後建立應用程式
![](https://i.imgur.com/zRmOicY.png)

5. 新增[ Facebook ] 產品進應用程式
![](https://i.imgur.com/hr5zOFu.png)

6. 選擇 [ 網站 ]
![](https://i.imgur.com/fTfXUrY.png)

7. 填入網站網址後儲存即可，繼續後說明如何使用
![](https://i.imgur.com/jYtqotS.png)

8. 回到[ 設定 ] 基本資料，即可看到自己的 API Key
![](https://i.imgur.com/YIZQXt0.png)

9. 填寫隱私政策網址、用戶刪除資料、類別、上傳圖片、應用程式用途
###### 備註：隱私權網址產生可以使用 [https://www.privacypolicies.com/]
###### 用戶刪除資料可以輸入 https://你的網站網址/article/detail/privacy_policy
![](https://i.imgur.com/V1S8gUZ.png)

<br />

程式說明
---
> 使用 Facebook JavaScript SDK
```
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v13.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
```

<br />

###### tags: `login` `facebook` `第三方登入`
---
參考資料
> https://blog.darkthread.net/blog/login-aspnet-mvc-with-facebook-account/
> https://medium.com/icguanyu/%E7%B6%B2%E9%A0%81%E4%B8%AD%E5%8A%A0%E5%85%A5-%E9%80%8F%E9%81%8Efacebook%E7%99%BB%E5%85%A5-%E5%8A%9F%E8%83%BD-2f1110e8ed79
> https://blog.ollstore.tw/fb%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F%E7%94%A8%E6%88%B6%E8%B3%87%E6%96%99%E5%88%AA%E9%99%A4/




