[React x Django] Part 6-Google登入登出功能

關於React與Django整合做出Google登入登出的功能的中文文章太少了，有鑑於此趁著這次案子的機會實作一下這個功能，也利用這個機會筆記記錄下來。

前置安裝

後端 Django

pip install django-allauth
pip install django-rest-auth
pip install social-auth-app-django

前端 Reactjs

npm i react-google-login

技術

1. React.js SPA
2. Django Rest Framework(DRF)
3. Google 登入

流程圖

步驟

1. 前往 Google Cloud Platform
2. 找到 APIs & Service

3. 建立新的Project

4. APIs & Services Oauth consent screen 設定
App information 中 `User support email` 跟 Developer contact information中的`Email addresses` 皆填入自己的google 帳號

`Scope`：可以依需求設定，我是將`userinfo.email`,`userinfo.profile`,`openid`皆設為non-sensitive scopes
其他保留預設

5. `Credentials`設定
進到Credentials頁面後點擊 `+CREATE CREDENTIALS`
選擇 `OAuth client ID`
`Application type`選擇 `Web application`
進行命名與相關授權路徑設定
* 注意這邊會拿到一組`Client ID`,`Client secret`很重要，後面驗證需要這組資訊
`Authorized JavaScript origins`：填入
`http://localhost:8000`,`http://localhost:3000`
此項目為whitelist要讓網站可以使用Google登入
`Authorized redirect URIs`：填入
`https://127.0.0.1:8000/accounts/google/login/callback`

6. 完成驗證的設定後，回到自己的程式碼

7. Frontend要新增一個登入按鈕，要能按了以後跳出Goolge登入頁面，並且登入成功後回傳資料

在要使用Google登入的地方，加入這個物件

另外，`onSuccess`與`onFailure`的地方有呼叫函式，我們可以印出來看

結果：
畫面

登入按鈕按下後
`F12`查看相關json傳遞

8. 取出`tokenId` jwt deocde
將上一步最後拿到的response中的資料拿取`tokenId`項目出來貼到 JWT.io

此JSON有經過處理後面已被刪除

Decode結果

一些欄位經過刪除處理

確定tokenId有我們需要的資料

9. 傳入後端處理驗證
此處邏輯撰寫為

後端項目Django中的`settings.py`

```DEFAULT_PERMISSION_CLASSES``` 項目可以視需要打開

`models.py`中設立新table，建立google id 跟User的連結

• 記得進行`python manage.py makemigrations` 與 `python manage.py migrate`

10. `serializers.py`設置
這裡為了方便我們將值梳理好

11. 啟動後端`127.0.0.1:8000/admin`
會發現多了SOCIAL ACCOUNTS的位置

在Social applications中新增
`Google API`並設定相關變數

其中 `client Id`,`Secret key`記得放上原本在Google申請的那組
下面的sites的部分則填入
`localhost:8000`並儲存。

到這裡我們完成Social accounts登入會自動在Django後台的Authentication註冊登入的關聯動作

12. views中進行後端實作

13. 設定走的路徑
可以呼叫到我們剛剛的views內容

app/urls.py

project/urls.py

14. 前後端串連
延伸 步驟7 的實作，利用axios打到我們後端的api，這邊將token打過去後拿回來的`res` 中的相關資訊我們需要存在localStorage作為驗證
`access_token`,`refresh_token` 是我們的在網站內的令牌，所以需要帶著走

需要`refresh_token`是因為如果`access_token`過期了就會自動拿`refresh_token`去換新的`access_token`

這裡也將`givenName`變數拿出來，以利後面使用

15. `store.js`設定載入初始值

載入畫面時如果有giveName就代表剛剛已經登入也有把這個值存進去localStorage，所以可以取出來塞到`userInfoFromGoogle`

這邊準備是為了在我們的頁面上使用

實現了登入後自動帶入名字的功能

16. 完成google登入

Google登出功能

1. 使用<GoogleLogout></GoogleLogout>

動作處理
`onLogoutSuccess`這邊需要執行 logoutfromGoogle

因為登出這邊有將動作拆開到actions的檔案執行動作邏輯
所以我們要寫一下我們的userActions

`actions/userActions`

將我們的令牌等資訊都清掉
再將路徑導回首頁，完成登出動作。

未來優化

1. 將功能拆乾淨
   2. 帳戶相關資訊再截入網站中

好讀版

[React x Django] Google登入登出功能 - HackMD

如果有幫到您，敬請給我👏👏👏

感謝您的閱讀