我遇到一個場景，該場景需要在React 應用中實現“使用Github登入”功能。雖然這聽起來很簡單，但在嘗試做這件事時，你可能會遇到一些麻煩。因此，本文的目的是提供一個指南，幫助你在你的應用程式中實現這樣的功能。讓我們現在就開始吧！

步驟1：在Github上建立OAuth應用

按照此處提供的步驟登入到你的Github帳戶並建立OAuth應用。注意：對於本例，在建立OAuth應用時，如果你在本地執行應用，可以將主頁URL設定為http://localhost:3000/，將授權回撥URL設定為http://localhost:3000/login。在根目錄下建立一個 .env 檔案，並設定這些變數：

REACT_APP_CLIENT_ID=你的Client IDREACT_APP_CLIENT_SECRET=你的Client SecretREACT_APP_REDIRECT_URI=http://localhost:3000/login

步驟2：建立React應用

繼續使用你的首選來建立你的react應用程式，在這個例子中，我們將使用Create-React-App。如果你使用這種模式，你必須刪除index.css、App.css、App.test.js和serviceWorker.js等檔案。編輯index.js，確保它看起來像這樣：

import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementById('root'));

另外，編輯App.js，確保它看起來像這樣：

import React, { createContext, useReducer } from 'react';import { BrowserRouter as Router, Route, Switch } from "react-router-dom";import Home from "./components/Home";import Login from "./components/Login";import { initialState, reducer } from "./store/reducer";export const AuthContext = createContext();function App() {  const [state, dispatch] = useReducer(reducer, initialState);  return (    <AuthContext.Provider      value={{        state,        dispatch      }}    >    <Router>      <Switch>        <Route path="/login" component={Login}/>        <Route path="/" component={Home}/>      </Switch>    </Router>    </AuthContext.Provider>  );}export default App;

在App.js檔案中，匯入2個元件（Home.js 和 Login.js ）。要建立這2個元件，進入src資料夾，建立一個名為component的資料夾，裡面有2個檔案（Home.js和Login.js）。在根資料夾中，你可以在下面執行此命令來建立它們。

mkdir -p src/components && cd src/components && touch Home.js Login.js

接下來，你會觀察到，我們從store匯入了狀態和reducer，繼續並設定一個簡單的store，它將保持應用程式狀態。要做到這一點，導航到src資料夾中，並建立一個名為store的資料夾，在它裡面建立一個名為reducer的子資料夾，並在reducer資料夾裡面建立一個index.js檔案。在根目錄下，你可以執行下面這個命令來建立它們。

mkdir -p src/store/reducer && cd src/store/reducer && touch index.js

Store中index.js檔案的內容應如下所示。

export const initialState = {  isLoggedIn: JSON.parse(localStorage.getItem("isLoggedIn")) || false,  user: JSON.parse(localStorage.getItem("user")) || null,  client_id: process.env.REACT_APP_CLIENT_ID,  redirect_uri: process.env.REACT_APP_REDIRECT_URI,  client_secret: process.env.REACT_APP_CLIENT_SECRET,  proxy_url: process.env.REACT_APP_PROXY_URL};export const reducer = (state, action) => {  switch (action.type) {    case "LOGIN": {      localStorage.setItem("isLoggedIn", JSON.stringify(action.payload.isLoggedIn))      localStorage.setItem("user", JSON.stringify(action.payload.user))      console.log(action.payload.isLoggedIn)      return {        ...state,        isLoggedIn: action.payload.isLoggedIn,        user: action.payload.user      };    }    case "LOGOUT": {      localStorage.clear()      return {        ...state,        isLoggedIn: false,        user: null      };    }    default:      return state;  }};

它包含InitialState物件和一個reducer函式，該函式包含派發的動作以突變狀態。

我們匯入並利用AuthContext使Store中的全域性狀態和操作可在此元件中使用。當用戶點選“用Github登入”按鈕時，會向Github API提出請求，對我們的應用進行授權。如果成功的話，Github就會重定向回我們的應用（授權回撥URL），並在URL中加入“code”。我們利用useEffect hook偵聽此“code”何時可用。然後我們從url中收集它，使用code和其他資料，如：client_id，redirect_uri，client_secret，繼續透過我們的proxy server(代理伺服器)向Github APIs發出請求（一個簡單的快遞應用，幫助我們繞過CORS錯誤）。下一步，我將詳細討論代理伺服器。如果透過代理伺服器的認證返回有效的響應，我們就會排程“LOGIN”事件，在我們的儲存中設定使用者資料和isLoggedIn有效載荷。

讓我們更新Home.js元件以顯示一些使用者資料，例如（頭像，姓名，關注者人數等）

... ...