如何在 Node.js 中為 Google 帳戶實現 OAuth2

如何使用授權鏈接通過 Google 實現 OAuth2 登錄並從 Google User Info API 檢索配置文件信息。

在本教程中，我們將使用 CheatCode 的全棧 JavaScript 框架 Joystick。 Joystick 將前端 UI 框架與用於構建應用的 Node.js 後端結合在一起。

首先，我們要通過 NPM 安裝 Joystick。確保在安裝之前使用 Node.js 16+ 以確保兼容性（如果您需要學習如何安裝 Node.js 或在計算機上運行多個版本，請先閱讀本教程）：

終端

npm i -g @joystick.js/cli

這將在您的計算機上全局安裝操縱桿。安裝好之後，接下來我們新建一個項目：

終端

joystick create app

幾秒鐘後，您將看到一條消息已註銷到 04 進入你的新項目並運行 16 .在我們這樣做之前，我們需要安裝兩個額外的包，29 和 36 ：

終端

cd app && npm i googleapis node-fetch

安裝這些軟件包後，您可以繼續啟動您的應用程序：

終端

joystick start

在此之後，您的應用應該可以運行了，我們可以開始了。

獲取 Google 憑據

為了完成本教程，首先，我們需要前往 Google Developer Console 並生成憑據，以便通過 Google 驗證我們的應用程序。為此，請前往 Google 開發者控制台並使用您的項目所在（或將要使用）的帳戶登錄。

登錄後，從左上角的漢堡圖標，打開彈出式導航菜單並選擇“API 和服務”。接下來，選擇左側菜單中的“憑據”導航鏈接。在此頁面中，如果您已有想要使用的憑據，請在“OAuth 2.0 客戶端 ID”標題下的列表中找到它們，然後繼續下一部分。

如果你不 還沒有憑據，請確保您已在導航欄中 Google Cloud 徽標右側的下拉菜單中選擇了您的項目。如果您還沒有項目，則需要創建一個才能繼續。

創建並選擇您的項目後，從我們上面加載的“憑據”頁面，單擊頁面頂部附近的藍色“+ 創建憑據”鏈接。這將顯示一個下拉菜單。我們要點擊第二個選項“OAuth 客戶端 ID”。

在下一頁上，如果您尚未配置，系統將提示您“配置您的同意屏幕”。這是用戶在您的應用中單擊“使用 Google 登錄”按鈕後立即被重定向到的屏幕。如果您尚未對此進行配置，請單擊警告消息旁邊的按鈕並完成同意屏幕。

在下一個屏幕上，如果您只是測試一下，您將需要為“用戶類型”使用“外部”選項。這將確保您可以使用任何 Google 帳戶登錄（此處為開發中，也可用於生產中）。

設置完成後，您將被重定向到一個表單以配置您的同意屏幕。在第一步中，我們將提供一些關於我們的應用程序的基本信息。對於本教程，在“應用程序域”部分下，我們只需輸入 49 對於“應用程序主頁”和 56 和 67 分別用於隱私和條款 URL。值得注意的是，我們在這裡跳過了“授權域”。

在下一個屏幕“Scopes”上，我們可以跳過這個，因為我們將通過我們的代碼將我們需要的範圍直接傳遞給 Google。最後，在摘要屏幕上，驗證一切是否正確，然後單擊頁面底部的“返回儀表板”。

在此屏幕中，您需要向下滾動並找到“測試用戶”部分。在這裡，我們要添加能夠在測試中使用我們的 OAuth 登錄流程的 Google 用戶（因為我們目前處於測試模式，所以這是必需的）。

添加測試用戶後，現在我們可以返回創建 OAuth 憑據。返回“APIs &Services”下的“Credentials”頁面，點擊藍色的“+ Create Credentials”鏈接，再次在下拉菜單中選擇“OAuth client ID”選項。

在下一個屏幕上，對於“應用程序類型”，我們要選擇“Web 應用程序”，在“名稱”下輸入我們的應用程序的名稱，並在“授權的重定向 URI”下添加 Google 將在用戶批准後重定向用戶的 URL在同意屏幕上訪問他們的帳戶。

對於本教程，我們使用 72 80 部分將是我們稍後將連接起來以調用處理函數的路由，該處理函數將交換 Google 發送給我們的臨時令牌，以獲得與用戶帳戶關聯的永久訪問令牌。

填寫完成後，單擊屏幕底部的“創建”按鈕。這將顯示一個帶有“您的客戶 ID”和“您的秘密”的彈出窗口。 注意：建議您在繼續之前將這些信息存儲在密碼管理器等安全的地方。

一旦你有了這些，接下來，我們想將這些鍵複製到我們應用的設置中，這樣我們就可以開始使用教程的代碼部分了。

將您的 Google 憑據添加到您的應用設置中

在我們深入研究代碼之前，首先，我們希望將剛剛從 Google 獲得的憑據添加到我們應用程序的設置中（這將使它們在我們的代碼中可以輕鬆安全地訪問）。在我們通過99創建的項目中 之前，打開 108 文件：

/settings.development.json

{
  "config": {
    "databases": [
      {
        "provider": "mongodb",
        "users": true,
        "options": {}
      }
    ],
    "i18n": {
      "defaultLanguage": "en-US"
    },
    "middleware": {},
    "email": {
      "from": "",
      "smtp": {
        "host": "",
        "port": 587,
        "username": "",
        "password": ""
      }
    }
  },
  "global": {
    "google": {
      "clientId": "348181960606-aqmbd10e22qd1lru9nc41ehn4ranrq8e.apps.googleusercontent.com",
      "redirectURI": "http://localhost:2600/oauth/google"
    }
  },
  "public": {},
  "private": {
    "google": {
      "secret": "<Paste your secret here>"
    }
  }
}

在這個文件中，首先，在 112 下 對象，我們想在 121 鍵處添加一個對象 其中包含兩個屬性：135 和 140 .這裡，154 是從上面的“您的客戶 ID”框中復制的值，而 165 是我們為上面的“授權重定向 URI[s]”輸入的 URL。

我們把它放在 175 下 在這裡，因為我們希望這些信息可以在我們的應用程序中全局訪問（意思是，在瀏覽器中和 在服務器上）。但請注意，我們在這裡省略了“您的秘密”值。

我們正在添加那個 187 中的值向下 對象，再次創建一個 198 對象並在該對像上，設置 200 作為鍵並將值分配給我們在 Google 儀表板上複製的“您的秘密”。你可能已經猜到了，215 這裡只與服務器隔離 我們應用程序的一側（公眾或除我們自己和我們的服務器端代碼之外的任何人都無法訪問）。

現在，我們終於準備好深入研究代碼了。

連接 getter 以生成 OAuth 登錄鏈接

與大多數 OAuth2 實現不同，Google 在處理用戶初始重定向的方式上有所不同。大多數 API 將提供一個直接 URL 以重定向到（帶有一些查詢參數），Google 更喜歡您使用他們的 API 來生成 首先重定向 URL，然後將用戶發送到該 URL。

要在我們的應用程序中執行此操作，我們需要連接一種方法來生成該 URL。我們將使用 Joystick 的 getters 功能來幫助我們做到這一點。 Getter 是在您的應用程序中連接 JSON-RPC API 的一種快捷方式（您編寫函數，Joystick 會自動將它們映射到 HTTP GET 路由，例如 225 在您的服務器上）。

在 237 在您的應用程序根目錄為您創建的文件夾，我們要添加另一個文件夾 249 在那裡，一個名為 258 的文件 ：

/api/oauth/getters.js

import { google } from 'googleapis';
import joystick from '@joystick.js/node';

export default {
  googleOAuthPermissionURL: {
    get: (input = {}, context = {}) => {
      const oauth2Client = new google.auth.OAuth2(
        joystick?.settings?.global?.google?.clientId,
        joystick?.settings?.private?.google?.secret,
        joystick?.settings?.global?.google?.redirectURI,
      );

      return oauth2Client.generateAuthUrl({
        // NOTE: Passing 'offline' retrieves a refresh_token but we shouldn't need this for logins.
        access_type: 'online',
        scope: [
          'profile',
          'email'
        ],
        // NOTE: State is a generic "metadata" field that allows us to attach identifying 
        state: JSON.stringify({}),
      });
    },
  },
};

上面，我們添加了生成初始 OAuth 同意 URL 所需的所有代碼，我們會將用戶重定向到該 URL。為此，我們定義了一個名為 263 的 getter .在 Joystick 中，getter 只是分配給鍵的對象，該鍵表示我們要定義的 getter 的名稱。在那個對像上，我們至少必須分配一個函數 276 顧名思義，它在調用我們的 getter 時“獲取”一些數據。

在幕後，Joystick 將我們的 getter 名稱映射到 280 的路線 .正如我們將在客戶端看到的，我們將使用 Joystick 的 UI 框架中的一個特殊功能 294 稱為307 這稱為吸氣劑。在幕後，這只是向這個動態生成的路由發出 HTTP GET 請求。當該路由在服務器上匹配時，316 我們為上面的 getter 定義的函數被調用。

對於該函數，我們希望傳遞任何 324 調用 330 時包含 在我們的 UI 中作為第一個參數，作為第二個參數，342 對於包含 HTTP 352 的請求 uest 對象、當前登錄的用戶（如果存在）以及與請求相關的其他元數據。

在這裡，在我們的 362 內部 373 的函數 ，我們首先調用 380 並將其返回值存儲在變量 399 中 .要訪問它，我們要導入名為 export 400 （由 416 周圍的花括號表示 在我們的 import 語句中）來自 428 我們在教程開始時安裝的包。

對於那個函數——從技術上講，是一個類構造函數——我們傳遞了三個參數：

1. 我們的應用程序的客戶端 ID。
2. 我們應用程序的秘密。
3. 我們應用程序的重定向 URI。

為了訪問這些值，我們將它們從我們之前通過 438 添加到的設置文件中提取出來 可通過默認 441 訪問的對象 從 452 導出 包（463 的“服務器端”對應項 ，在我們運行 471 時安裝 早）。

密切注意這裡的路徑。請記住，我們的 486 存儲在 499 對象，而我們的 507 和重定向URI514 全局`對象。

接下來，在我們的 521 底部 函數，我們返回對 531 的調用 .對那個 ，我們傳遞一個帶有三個屬性的選項對象：

1. 545 設置為 551 .這告訴 Google 我們要生成一次性訪問令牌，而不是長期存在的令牌（這就是我們訪問帳戶所需的全部內容）。如果我們通過 561 在這裡，Google 將包含一個刷新令牌，它允許我們在訪問令牌在分配的生命週期後過期時更新它（如果我們要連接到 Google 帳戶以代表用戶執行 API 功能，這很有用）。
2. 574 它設置為包含 API 範圍的字符串數組（關於我們被允許訪問用戶帳戶的權限）。 公平警告 ：谷歌有一個噸 可用範圍。
3. 586 這是一個可選的字符串值（這裡我們提供了一個字符串化多個值的對象的示例），它允許我們將識別信息與請求一起傳遞。由於初始用戶請求與令牌交換斷開連接，590 value 為我們提供了一種識別哪個的方法 令牌交換請求屬於哪個用戶（如果需要）。

這就是我們需要做的。現在，當我們調用這個 getter 時，將返回一個將我們的用戶重定向到的 URL。

真的很快，為了確保它有效，我們需要導入這個 getters 文件並將它附加到位於 603 中的 API 架構 ：

/api/index.js

import oauthGetters from './oauth/getters';

export default {
  getters: {
    ...oauthGetters,
  },
  setters: {},
};

在這裡，我們只是使用 JavaScript 傳播 610 運算符“展開”或“解包”從 628 作為默認導出的對象的內容 到主 633 我們 API 架構的對象。這個模式對像被交給 647 中我們服務器的啟動函數 作為 657 它最終將我們所有的 getter 和 setter 註冊為我們服務器上的路由。

為 OAuth 令牌交換添加路由和處理函數

在我們轉移到客戶端使用我們的 getter 之前——為了節省一些時間和混亂——我們將連接谷歌將用戶重定向到令牌交換過程的路由以及處理該過程的函數（並獲取我們用戶的個人資料數據）。

/index.server.js

import node from "@joystick.js/node";
import api from "./api";
import google from "./api/oauth/google";

node.app({
  api,
  routes: {
    "/": (req, res) => {
      res.render("ui/pages/index/index.js", {
        layout: "ui/layouts/app/index.js",
      });
    },
    "/oauth/google": (req, res) => {
      google({ req, res });
    },
    "*": (req, res) => {
      res.render("ui/pages/error/index.js", {
        layout: "ui/layouts/app/index.js",
        props: {
          statusCode: 404,
        },
      });
    },
  },
});

在這裡，我們添加了一個路由 662 如果我們的用戶通過我們在上面學習的如何生成的 URL 批准授權請求，它將收到來自 Google 的 HTTP GET 請求。

當我們收到來自 Google 的請求時，就像我們在上面暗示的那樣，我們需要交換一個臨時令牌，它們包含在請求的查詢參數中，以獲得永久訪問令牌。這就是 OAuth2 標準（許多不同的公司使用它來處理第三方用戶身份驗證）的工作原理。

1. 我們將用戶重定向到第三方提供商，並詳細說明我們希望授予與他們的帳戶相關的哪些權限。
2. 如果用戶批准這些權限，第三方提供商會向我們指定的 URL 發送請求，其中包括可以交換為永久令牌的臨時令牌。
3. 我們調用另一個 API 端點，將該臨時令牌與我們在發起請求時使用的憑據一起傳遞（證明我們是接收用戶權限的預期應用）以獲取永久訪問令牌。

所有提供商在處理細節的方式上都有所不同，但一般來說：這是發生的工作流程。為了處理來自 Google 的請求，在上面的路由處理函數中，我們調用了一個假設函數 679 傳入一個包含 682 的對象 uest 和 699 從我們的路線中 ponse 物體。

接下來，讓我們連接那個函數（注意我們在文件頂部導入函數時使用的假設路徑）並讓它工作。

/api/oauth/google.js

/* eslint-disable consistent-return */

import joystick from '@joystick.js/node';
import { google as googleAPI } from 'googleapis';

const oauth2Client = new googleAPI.auth.OAuth2(
  joystick?.settings?.global?.google?.clientId,
  joystick?.settings?.private?.google?.secret,
  joystick?.settings?.global?.google?.redirectURI,
);

const getGoogleUser = (accessToken = '') => { ... };

const exchangeToken = async (code = '') => { ... };

export default async (options) => {
  try {
    const state = options?.req?.query?.state ? JSON.parse(options?.req?.query?.state) : null;
    const token = await exchangeToken(options?.req?.query?.code);
    const access_token = token?.access_token;
    const googleUser = await getGoogleUser(access_token);

    console.log({
      state,
      token,
      access_token,
      googleUser,
    });

    options.res.redirect('/');
  } catch (exception) {
    options.res.status(500).send(`[google] ${exception.message}`);
  }
};

首先，在我們文件的頂部，請注意​​我們再次導入了名為 700 從 715 導出 然而，這次我們將這個命名變量從 720 重命名 到 732 使用 741 運算符以避免我們文件中的名稱衝突。

接下來，與我們之前設置 getter 時看到的相同，我們調用 755 在我們文件的頂部，傳遞與以前完全相同的憑據（也以完全相同的順序）。就像以前一樣，這在我們的代碼中為我們提供了一個 Google OAuth2 API 的實例。

在我們使用它之前，在函數中導出為 764 從我們的文件中，我們已經繪製出了處理令牌交換和獲取用戶配置文件數據所需的調用。為了處理任何意外錯誤，我們將函數體包裝在 779 中 陳述。如果我們的任何代碼“捕獲”，我們將調用 783 797 上的方法 我們預計在調用時傳遞給函數的值。這裡，806 被傳遞給 815 是通用“內部服務器錯誤”的 HTTP 狀態代碼。到 827 ，我們只是傳遞一個包含我們可能收到的任何錯誤消息的字符串。

831 內部 ，我們首先檢查是否有任何 844 值與我們的請求一起傳遞。請記住，當我們之前生成授權請求 URL 時，我們包含了一個字符串對像作為 858 我們可以使用它來識別請求。

在這裡，我們檢查是否 865 在 877 中定義 882 的參數 uest 對象，如果是，假設它包含一個字符串化的 JSON 對象，我們需要使用 891 將其解析為 JavaScript 對象 .如果是不是 定義好了，我們只想設置906 我們在此處為 917 創建的變量 .

接下來，我們調用一個我們將定義下一個 923 的函數 , 傳入 937 來自 948 的參數 （包含來自請求 URL 的所有查詢參數的對象）。這裡，959 是我們需要與 Google 交換的令牌，以便為我們的用戶取回永久訪問令牌。

在我們完成此交換過程並獲得 967 之後，略過一點 （我們希望從 Google 獲取一個包含多個參數的對象，我們存儲在變量 974 中 這裡），接下來我們要使用那個 985 並調用 Google 的 API 端點來檢索用戶的個人資料。

這裡的想法是我們不 期望令牌交換做任何事情，但給我們一個訪問令牌。為了將該令牌上下文化，我們應該（但不是必須）獲取用戶的相關個人資料數據，以便我們可以在我們的應用程序中使用它來進行識別。

最後，一旦我們有了用戶的憑據和配置文件數據，我們就將其註銷（我們不會對本教程的數據做任何特別的事情，只是展示如何檢索它）然後調用 995 函數，將用戶/瀏覽器重定向回我們應用的根目錄。

/* eslint-disable consistent-return */

import joystick from '@joystick.js/node';
import { google as googleAPI } from 'googleapis';

const oauth2Client = new googleAPI.auth.OAuth2(...);

const getGoogleUser = (accessToken = '') => {...};

const exchangeToken = async (code = '') => {
  try {
    const { tokens } = await oauth2Client.getToken(code);
    return tokens;
  } catch (exception) {
    throw new Error(`[google.exchangeToken] ${exception.message}`);
  }
};

export default async (options) => {
  try {
    ...
    const token = await exchangeToken(options?.req?.query?.code);
    ...
    options.res.redirect('/');
  } catch (exception) {
    options.res.status(500).send(`[google] ${exception.message}`);
  }
};

/* eslint-disable consistent-return */

import fetch from "node-fetch";
import { URL, URLSearchParams } from 'url';
import joystick from '@joystick.js/node';
import { google as googleAPI } from 'googleapis';

const oauth2Client = new googleAPI.auth.OAuth2(...);

const getGoogleUser = (accessToken = '') => {
  try {
    const url = new URL(`https://www.googleapis.com/oauth2/v1/userinfo`);
    const searchParams = new URLSearchParams({
      alt: 'json',
      access_token: accessToken,
    });

    url.search = searchParams;

    return fetch(url, {
      method: 'GET',
    }).then(async (response) => {  
      const json = await response.json();
      return json;
    });
  } catch (exception) {
    throw new Error(`[google.getGoogleUser] ${exception.message}`);
  }
};

const exchangeToken = async (code = '') => { ... };

export default async (options) => {
  try {
    const state = options?.req?.query?.state ? JSON.parse(options?.req?.query?.state) : null;
    const token = await exchangeToken(options?.req?.query?.code);
    const access_token = token?.access_token;
    const googleUser = await getGoogleUser(access_token);

    console.log({
      state,
      token,
      access_token,
      googleUser,
    });

    options.res.redirect('/');
  } catch (exception) {
    options.res.status(500).send(`[google] ${exception.message}`);
  }
};

import ui, { get } from '@joystick.js/ui';

const Index = ui.component({
  events: {
    'click button': () => {
      get('googleOAuthPermissionURL').then((oauthLoginURL) => {
        window.location = oauthLoginURL;
      });
    },
  },
  render: () => {
    return `
      <div>
        <button>Login with Google</button>
      </div>
    `;
  },
});

export default Index;