OAuth2.0のモヤっとする部分をスッキリ説明する(3/n) [Node.jsでの実装編]

イントロ

OAuth2.0で説明でモヤっとする部分をスッキリ解説する記事を何本か書いています。今回が３回目です。過去記事は以下からどうぞ
１回目：OAuth2.0登場人物(オブジェクト)解説
２回目：処理フロー解説
３回目は、２回目で説明した処理フローのクライアント部分の実装について解説したいと思います。今回、Node.js(Express)を使ってクライアントを実装しました。認可サーバーはGoogle Cloud、リソースサーバーはGoogle Photoです。

シーケンス図

実装したプログラムの動作は以下のようになります。

最近Webアプリで新規登録する際によく見る画面ですね。この動画で実装したコードの冒頭をお見せします。なお、これはあくまで学習用です。セキュリティの対策を全て省略しておりますので、本番の実装には使用しないでください。
(そもそも本番は自分で実装しないで、フレームワークの力を借りましょう！)
今後このOAuthの実装をベースに、state、nonce、PKCEなどのセキュリティ対策を付け加えていきたいと思います。

// oauth-basic.js
import express from "express";
import { clientId, clientSecret } from "./config-local.js";

// サーバー起動ß
const app = express();
const server = app.listen(3000, function () {
  console.log("goto http://localhost:3000/oauth-start ");
});

// エンドポイント1(EP1)
app.get("/oauth-start", async function (req, res, next) {
  // 認可リクエストパラメータ
  const baseUrl = "https://accounts.google.com/o/oauth2/v2/auth"; //EP3
  const queryObject = {
    response_type: "code", // グラントタイプ：認可コード
    client_id: clientId,
    scope: "https://www.googleapis.com/auth/photoslibrary.readonly",
    redirect_uri: "http://localhost:3000/callback",
  };

  // パラメータくみ上げ
  const query = new URLSearchParams(queryObject).toString();
  const authReqUrl = `${baseUrl}?${query}`;

  // リダイレクト
  res.redirect(authReqUrl);
});
//==============後半部に続く=============

セットアップ

1.環境構築

セットアップ手順は以下の記事にまとめております。環境構築する際にご参照ください。

2.Google Photoに写真を保存

適当なアルバムを制作して、適当な画像を保存しておきましょう。この画像の参照に対して認可をOAuthで認可を与えます。

Google Photos: Edit, Organize, Search, and Backup Your Photos

google photoでアルバム作成

ソース解説

javascript、node.js、express、RestfulAPIの知識が前提となりますので、ご了承ください。
以下がソースコード全文となります。行数にして６６行です。コメントも
入れているのでソース自体はもっと短いです。このソースを上から解説していきたいと思います。