# Google 第三方登入 - React

## 前言
開發網頁，會員登入系統一定是少不了的，但是為每個網站註冊一個新的帳號對使用者來說又非常麻煩，這時第三方登入就出現了!!!一個帳號暢行無阻，例如想使用ChatGPT就可以用google帳號登入，不用額外建立帳號，隨然前置步驟有點複雜，不過做過一次對不同的登入方式(FB, Github...)就一勞永逸啦 ! :coffee:

## Oauth
### OAuth 是什麼?
- 一種協定，簡單來說就是一個可以讓第三方(網站)在不知道使用者帳號密碼的情況下可以取得一些資料的規範，減少用戶註冊的次數，提升用戶體驗。

### OAuth 2.0
- 隨著科技的發展原本OAuth1.0 因為使用http傳輸，過程中會有被竊取封包個資外洩的風險，故現在大部分已經轉往使用https傳輸的OAuth2.0了。
- OAuth2.0 中有四種授權的方式 : 授權碼模式、簡化模式、客戶端模式、密碼模式，以下圖較常見的授權碼模式為例 :
1. 使用者點擊連結後向伺服器請求授權(Authorization Code)
2. 得到回傳的授權碼後再透過授權碼取得令牌(Access Token)
3. 最後用令牌去訪問要授權的資料


:::danger
:warning: 注意

- 如果你的舊版程式碼曾經使用 gapi.auth2 ，會將在 2023/3/31 後失效，請改成新版的 google.accounts.oauth2模組
修改參考 : [官方文件 - 遷移至 Google Identity 服務](https://developers.google.com/identity/oauth2/web/guides/migration-to-gis?hl=zh-tw#gis-only)

- 使用套件也一樣 [react-google-login](https://www.npmjs.com/package/react-google-login) 會失效，不要google找到第一個就拿來用，會和我一樣撞牆撞很久啊啊啊， 現在要使用新的這個npm 套件 [@react-oauth/google](https://www.npmjs.com/package/@react-oauth/google)
:::

## 教學
目前團隊再開發一款手遊，而手遊的後台系統大部分都用playfab
所以這次要實做從react開發的遊戲官網，用google第三方登入註冊playfab的帳號

前面提到前置作業複雜，我們現在就來一步一步時做吧!

### 透過google服務取得Client ID
1. 先進入[Google Cloud](https://console.developers.google.com/)
2. 點選「API和服務」進入，若沒有專案，請點「建立專案」並「新增專案名稱」。

3. 點擊左側「OAuth同意畫面」，並選擇外部，按下建立

4. 輸入網站的資料和名稱(例如要串接到playfab，網域要加上playfabapi.com)

5. 完成後點擊左側「憑證」->「建立憑證」->「OAuth 用戶端ID」
6. 選擇第一個 「網頁應用程式」，後續一樣填名稱和url資料

7. 以授權的JS來源是指，會從那個地方發送請求，下面是請求完成後會轉跳回哪裡
8. 記下自己的用戶端編號和密鑰

### 將Client_ID放進程式裡

取得google api的client_ID後，使用OAuth呼叫的方式因人而異，我是使用@react-oauth/google的套件取得access_token再透過playfab的api創立使用者帳號

> 如果網頁沒有用框架，單純想要透過基本的html和jQuery架構登入的話 可以直接參考[官方文件](https://learn.microsoft.com/en-us/gaming/playfab/features/authentication/platform-specific-authentication/google-html5#testing-using-an-access-token)

1. 進入專案的cmd 安裝 npm i @react-oauth/google playfab-sdk

2. 參考下方程式範例

import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';
import { PlayFabClient } from 'playfab-sdk';

function main(){
    
    // playfab參數設定 
    PlayFabClient.settings.titleId = "your title id";
    PlayFabClient.settings.developerSecretKey = "your key";
    
    const login = useGoogleLogin({
        onSuccess: tokenResponse => {
         const access_token= tokenResponse.access_token
         // 呼叫 playfab api  建立帳號   
         // 取得accesstoken後可以替換任何你想註冊的網站 
            PlayFabClient.LoginWithGoogleAccount({
                AccessToken: access_token,
                CreateAccount: true,
                TitleId: "YOUR_PLAYFAB_TITLE" // 替換成你的 PlayFab Title ID
              }, onPlayFabResponse);
        },
        onError: err => {
          console.log('Login Failed', err);
          alert('登入失敗請在是一次')
        }
      });

    //playfab回傳的結果
    const onPlayFabResponse = (response, error) => {
        if (response){
            alert("註冊成功")
        }else{
            alert("註冊失敗")
            console.log(err)
        }
    };
    
return (
    <div className="App">
        <GoogleOAuthProvider clientId="762260450826-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx7o.apps.googleusercontent.com" >
            <button className='btn' onClick={() => login()}>
            Sign in with Google 🚀
            </button>
        </GoogleOAuthProvider>
    </div>
  );

}

3. 最後當我們還要串接不同系統時，每個API需要的餐數可能不一樣，可以參考這個網站，告訴你react-oauth/google套件不同的用法和取得的資料，以及範例程式碼，非常方便 ~
[react-oauth/google範例網站](https://react-oauth.vercel.app/)


## 展示
1. 點擊 上方google登入的按鈕

2. 就會跳出google登入畫面

3. console.log裡面就可以看到取得得資料 利用取得的access_token就可以實現playfab登入了

4. 從playfab後台就可以看到透過第三方登入的用戶了!

## 總結
開發網頁的時候當然可以單純用套件，但是當了解背後的原理時，開發或是debug上都會有更好的效率還有更清晰的邏輯!

剛開始從github接觸OAuth的時候我也覺得非常困難，後來前後端的概念變好、了解資料之間的傳輸方式之後，再回頭看這些就覺得其實只是一塊小蛋糕:cake:

## 參考資料
[OAuth2.0與OAuth1.0你了解嗎？](https://cloud.tencent.com/developer/article/1631731)
[認識OAuth2.0](https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/%E7%AD%86%E8%A8%98-%E8%AA%8D%E8%AD%98-oauth-2-0-%E4%B8%80%E6%AC%A1%E4%BA%86%E8%A7%A3%E5%90%84%E8%A7%92%E8%89%B2-%E5%90%84%E9%A1%9E%E5%9E%8B%E6%B5%81%E7%A8%8B%E7%9A%84%E5%B7%AE%E7%95%B0-c42da83a6015)
[OAuth 2.0 簡介](https://docs.apigee.com/api-platform/security/oauth/oauth-introduction?hl=zh-tw)
[Setting up PlayFab authentication using Google and HTML5](https://learn.microsoft.com/en-us/gaming/playfab/features/authentication/platform-specific-authentication/google-html5#testing-using-an-access-token)
[Authentication - Login With Google Account](https://learn.microsoft.com/en-us/rest/api/playfab/client/authentication/login-with-google-account?view=playfab-rest)