# 使用者初始化設定
###### tags: `Frontend`
## 工作流程
1. 裝置連結音箱AP(連到網址)
2. 裝置透過音箱AP transfer wifi 的密碼
>音箱需偵測wifi 再把資訊傳回手機
3. 音箱連上網路
4. 登入帳號
5. 設定音箱名稱、位置
6. 裝置連接wifi ，登入伺服器前端做其餘設定

## 簡略流程圖
:::warning
詳細流程圖已更新至[Whimsical](https://whimsical.com/4tGYssEU2cvSMhK9kynMDR)
:::

## Wifi連接方式
音箱偵測wifi，透過API將wifi 資訊傳到前端
使用者點選wifi、輸入密碼
前端透過API將資訊傳入音箱
## 串接Google Sign In API
- **串接流程**
[Guides](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid)
[Video](https://www.youtube.com/watch?v=KwOmVpd1DUA)前端獲取資料

- **獲取使用者的資料**
使用者登入後，透過BasicProfile.getId()取得sub，存於音箱後端
1. 前端獲取
利用 GoogleUser.getBasicProfile()
[詳細資訊](https://developers.google.com/identity/sign-in/web/reference)

2. 伺服器後端獲取
透過decode 後的JWT去獲取包含使用者的gmail與名字等資訊
[詳細資訊](https://developers.google.com/identity/sign-in/web/backend-auth)
**我們應該存取sub的資料，使用者gmail可能會修改**

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", ##JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", #The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", #Your server's client ID
  "sub": "3141592653589793238", #The unique ID of the user's Google Account
  "hd": "gmail.com", #If present, the host domain of the user's GSuite email address
  "email": "[e-mail]", #The user's email address
  "email_verified": true, #true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",#If present, a URL to user's profile picture
  "given_name": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, #Unix timestamp of the assertion's creation time
  "exp": 1596477600, #Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

## 網頁設計
- 手機
- 電腦