OAuth2.0でGoogleのAPIを利用する

# プロジェクトを作成したいフォルダで以下のコマンドを実行
# my-app という名前でプロジェクトが作成される
$ yarn create next-app
・・・
✔ What is your project named? … my-app
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes

# プロジェクトフォルダに移動
$ cd my-app

# reactの開発環境を起動
$ yarn run dev

export default function Home() {
  const handleOnClick = async () => {
    // TODO: 認証ボタン押下時の処理
  }

  return (
    <div>
      <button onClick={handleOnClick}>認証する</button>
    </div>
  )
}

$ yarn add googleapis

import type { NextApiRequest, NextApiResponse } from 'next'
import { google } from 'googleapis'

type Response = {
  authorizeUrl: string
}

// Google認証画面のURLを生成しレスポンスに含める
export default function handler(req: NextApiRequest, res: NextApiResponse<Response>) {
  const oauth2Client = new google.auth.OAuth2({
    clientId: '<クライアントID>',
    clientSecret: '<クライアントシークレット>',
    redirectUri: 'http://localhost:3000/callback',
  })

  // Google認証画面のURLを生成する
  const authorizeUrl = oauth2Client.generateAuthUrl({
    access_type: 'offline',
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  })

  res.status(200).json({ authorizeUrl })
}

$ yarn add axios

import axios from 'axios'

export default function Home() {
  const handleOnClick = async () => {
    const response = await axios.get('http://localhost:3000/api/generate-google-oauth-url')
    const { authorizeUrl } = response.data

    // Google認証ページを別タブで開く
    window.open(authorizeUrl, '_blank')
  }

  return (
    <div>
      <button onClick={handleOnClick}>認証する</button>
    </div>
  )
}

import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function Callback() {
  const router = useRouter()

  useEffect(() => {
    const fn = async () => {
      // getパラメータの認証コードを取得する
      const code = router.query.code
      if (!code) return

      console.log('code: ', code)
    }

    fn().then()
  }, [router.query.code])

  return <div></div>
}

import type { NextApiRequest, NextApiResponse } from 'next'
import { google } from 'googleapis'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { authorizationCode } = req.body

  const oauth2Client = new google.auth.OAuth2({
    clientId: '<クライアントID>',
    clientSecret: '<クライアントシークレット>',
    redirectUri: 'http://localhost:3000/callback',
  })

  const response = await oauth2Client.getToken(authorizationCode)
  res.status(200).json({ tokens: response.tokens })
}

import axios from 'axios'
import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function Callback() {
  const router = useRouter()
  useEffect(() => {
    const fn = async () => {
      const code = router.query.code
      if (!code) return

      const response = await axios.post('http://localhost:3000/api/get-google-auth-token', {
        authorizationCode: code,
      })
      // tokens = {
      //   access_token: "ya29.abcdefghijk...",
      //   expiry_date: 1673545804055,
      //   refresh_token: "1//0e6-abcdefghijk...",
      //   scope: "https://www.googleapis.com/auth/calendar.readonly",
      //   token_type: "Bearer",
      // }
      const { tokens } = response.data
      console.log('tokens: ', tokens)
    }

    fn().then()
  }, [router.query.code])

  return <div></div>
}

import type { NextApiRequest, NextApiResponse } from 'next'
import { google, calendar_v3 } from 'googleapis'
import Calendar = calendar_v3.Calendar

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { accessToken } = req.body

  const oauth2Client = new google.auth.OAuth2({
    clientId: '<クライアントID>',
    clientSecret: '<クライアントシークレット>',
    redirectUri: 'http://localhost:3000/callback',
  })

  // 認証情報を設定
  // tokens として受け取った access_token・refresh_token・expiry_date などが設定可能
  // access_token が最低限必須
  oauth2Client.setCredentials({ access_token: accessToken })

  // Googleカレンダーの一覧を取得する
  const calendar: Calendar = google.calendar({ version: 'v3', auth: oauth2Client })
  const calendarResponse = await calendar.calendarList.list()

  // カレンダーの一覧をレスポンスに含める
  res.status(200).json({ items: calendarResponse.data.items })
}

import axios from 'axios'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

export default function Callback() {
  const [calendars, setCalendars] = useState<any[]>([])
  const router = useRouter()

  useEffect(() => {
    const fn = async () => {
      const code = router.query.code
      if (!code) return

      const response = await axios.post('http://localhost:3000/api/get-google-auth-token', {
        authorizationCode: code,
      })
      // tokens = {
      //   access_token: "",
      //   expiry_date: 1673545804055,
      //   refresh_token: "",
      //   scope: "https://www.googleapis.com/auth/calendar.readonly",
      //   token_type: "Bearer",
      // }
      const { tokens } = response.data

      // カレンダーの一覧を取得しstateに保存する
      const res = await axios.post('http://localhost:3000/api/get-google-calendar', {
        accessToken: tokens.access_token,
      })
      setCalendars(res.data.items)
    }

    fn().then()
  }, [router.query.code])

  return (
    <div>
      <ul>
        {calendars.map((calendar: any) => {
          return <li key={calendar.id}>{calendar.id}</li>
        })}
      </ul>
    </div>
  )
}