---
# System prepended metadata

title: Social Sign In Setup
tags: [For works]

---

# Social Sign In Setup

此章節主要是介紹如何設定 **Facebook** 和 **Google** OAuth 的設置。

![](https://i.imgur.com/1bDZ5fe.png)



## Contents
- [Google develepors console]()
- [Google Oauth setup]()
- [Facebook develepors console]()
- [Facebook Oauth setup]()
- [Line devlepors console]()
- [Line Oauth setup]()

## Google Develepors
Google 有開發者的環境，可以在此設定所需要的 google 服務。
本次章節主題是 Oauth，並可以至 https://console.cloud.google.com/ 設定。

> Revtel Staging 環境會使用 contact@ email 作為共用帳號。
> https://github.com/revtel/general/wiki/account-management


## Google Setups
> 請按照以下流程建立 (若有問題請找 BE 其他同仁)

```
# preview
1. 建立專案
2. 設定同意畫面
3. 建立憑證
4. Facebook 登入 > 設定
5. 有效的 OAuth 重新導向 URI
6. 啟用 Google+ 和 People API
```

### ① 新增專案
---
- 新增專案並選取
![](https://i.imgur.com/TNxKD7L.png)


### ② 建立同意畫面
---
- 選擇外部(不需設定測試人員)
![](https://i.imgur.com/GZHAqkt.png)

- 創建同意畫面
![](https://i.imgur.com/PGuy1BC.png)

- 選取同意範圍
![](https://i.imgur.com/vnU9XoW.png)


- 測試人員步驟(直接下一步跳過)

### ③ 建立憑證
---
- 至憑證頁面
![](https://i.imgur.com/Sv8Ph5Q.png)

- 建立 OAuth 憑證 ID
![](https://i.imgur.com/CEXzpjS.png)

- 建立憑證
![](https://i.imgur.com/SxoENSf.png)


- 編輯憑證(確認 id & secret)
![](https://i.imgur.com/ZxtR8L9.png)


### ④ 啟用其他 API 服務
---
- 至資訊頁面並啟用其他服務
![](https://i.imgur.com/ZckvVbF.png)


- 啟用 **GOOGLE+** 和 **PEOPLE API**
![](https://i.imgur.com/5WHIub8.png)


### ⑤ 完成設定
---
- Google 部分完成
- 可以至 project 回傳 CLIENT_ID 和 CLIENT_SECRET
- 若遇問題請找 #Jamie or #Chien


## Facebook Develepors
> 與 google 大部分類似
> https://developers.facebook.com/tools/explorer 開發者網站


## Facebook Setups
> 請按照以下流程建立 (若有問題請找 BE 其他同仁)

```
# preview
1. 註冊商用帳戶 (如沒有，請用contact@revteltech.com 登入)
2. 建立 providers (若是prod 需要)
3. 設定 callback url
4. 啟用應用程式
```


### ① 建立應用程式
---
- 至應用程式頁面
![](https://i.imgur.com/rPWQWHt.png)

- 選用“消費者”
![](https://i.imgur.com/ip9js86.png)

- 建立應用程式
![](https://i.imgur.com/DdSvyOZ.png)

- 輸入必填資訊(隱私條款網址/用戶刪除端點)
![](https://i.imgur.com/Rtacb7I.png)


### ② 開啟可用權限範圍
---
- 申請 base_profile / email **進階權限**
![](https://i.imgur.com/DpGNSnv.png)


### ③ 設定 callback url
---
- 加入產品 **(必要步驟)**
![](https://i.imgur.com/CLsEjMK.png)


- facebook callback 回 BE url 設定
![](https://i.imgur.com/j37zokj.png)



### ④ 啟用該應用程式
---
- 開啟 toggle **(必要步驟)**
![](https://i.imgur.com/4rfUpNi.png)


### ⑤ 完成設置
---
- Facebook 設置完成
- 可以至 project 回傳 CLIENT_ID 和 CLIENT_SECRET


## Line Develepors
> 與以上兩者有些許不同

> https://developers.line.biz/zh-hant/ 開發者網站


## Line Setups
> 請按照以下流程建立 (若有問題請找 BE 其他同仁)

```
# preview
1. 註冊商用帳戶 (如沒有，請用contact@revteltech.com 登入)
2. 建立 providers (若是prod 才需要 -> 因為資訊會換顯示於用戶註冊頁面)
3. 設定 callback url 及 權限
4. 啟用應用程式
```


### ① 建立 provider
---
- 創建 provider
![](https://i.imgur.com/dPJ5rTr.png)

- 創建 channel
![](https://i.imgur.com/WgBgKJg.png)


### ② 開啟可用權限範圍
---
- 打開權限 (email)
![](https://i.imgur.com/pEnB8Mh.png)


### ③ 設定 callback url
---
- 輸入必填資訊(圖片/callback url)
![](https://i.imgur.com/ygVfNSD.png)


### ④ 啟用該應用程式
---
- 從 developing 改成 publish 即啟用該應用程式
![](https://i.imgur.com/2YOE80Q.png)


### ⑤ 完成設置
---
- Line 設置完成
- 可以至 project 回傳 CLIENT_ID 和 CLIENT_SECRET

###### tags: `For works`