Google Auth Platformを用いたJWTの発行及びバックエンドでのJWT検証

{
  "alg": "HS256",
  "typ": "JWT"
}

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true,
  "iat": 1516239022
}

package middlewares

import (
	"log/slog"
	"strings"

	"github.com/gin-gonic/gin"
	"github.com/tomi-saku/jsys25-advent-calender/models"
	"google.golang.org/api/idtoken"
)

func verifyTokenAndGetPayload(c *gin.Context, clientID string) *idtoken.Payload {
	const bearerPrefix = "Bearer "
	AuthHeader := c.GetHeader("Authorization")
	slog.Debug("Auth Middleware", "AuthHeader", AuthHeader)
	if AuthHeader == "" {
		errRes := models.Error{
			Message: "Authorization header is required",
		}
		c.AbortWithStatusJSON(401, errRes)
		return nil
	}
	//Bearerトークンを削除
	if !strings.HasPrefix(AuthHeader, bearerPrefix) {
		errRes := models.Error{
			Message: "Authorization header must be Bearer token",
		}
		c.AbortWithStatusJSON(401, errRes)
		return nil
	}
	token := strings.TrimPrefix(AuthHeader, bearerPrefix)
	slog.Debug("Auth Utility", "Token", token)
	// JWTを検証し、ペイロードを変数に格納
	payload, err := idtoken.Validate(c.Request.Context(), token, clientID)
	if err != nil {
		slog.Debug("failed to Authorize", "error", err)
		errRes := models.Error{
			Message: err.Error(),
		}
		c.AbortWithStatusJSON(401, errRes)
		return nil
	}
	return payload
}

func AuthMiddleware(clientID string) gin.HandlerFunc {
	return func(c *gin.Context) {
		payload := verifyTokenAndGetPayload(c, clientID)
		if payload == nil {
			return
		}
		c.Set("email", payload.Claims["email"])
		c.Set("image", payload.Claims["picture"])
		slog.Info("Auth Middleware", "email", payload.Claims["email"])
		slog.Info("Auth Middleware", "image", payload.Claims["picture"])

		c.Next()
	}
}

type Payload struct {
	Issuer   string                 `json:"iss"`
	Audience string                 `json:"aud"`
	Expires  int64                  `json:"exp"`
	IssuedAt int64                  `json:"iat"`
	Subject  string                 `json:"sub,omitempty"`
	Claims   map[string]interface{} `json:"-"`
}

c.Set("email", payload.Claims["email"])
c.Set("image", payload.Claims["picture"])

package main

import (
	"fmt"
	"net/http"
	"os"
	"time"

	"github.com/gin-contrib/cors"
	"github.com/gin-gonic/gin"
	middlewares "github.com/tomi-saku/jsys25-advent-calender/middleware"
	"github.com/tomi-saku/jsys25-advent-calender/models"
)

func main() {
	fmt.Println("Application Initializing...")

	r := gin.Default()

	// CORSポリシーを満たすようにミドルウェアを設定
	r.Use(cors.New(cors.Config{
		AllowOrigins: []string{"http://localhost:5173"},
		AllowMethods: []string{
			"GET",
			"POST",
			"OPTIONS",
			"DELETE",
		},
		AllowHeaders: []string{
			"Content-Type",
			"Authorization",
		},
		AllowCredentials: true,
		MaxAge:           12 * time.Hour,
	}))

	r.GET("/health", getHealth)

	// 特定のエンドポイントにミドルウェアを設定
	authorizedRoutes := r.Group("/authorization")
	authorizedRoutes.Use(middlewares.AuthMiddleware(os.Getenv("GOOGLE_CLIENT_ID")))
	{
		authorizedRoutes.GET("", getEmailAddress)
	}

	fmt.Println("Application Starts!")
	r.Run("0.0.0.0:8080") // listen and serve on 0.0.0.0:8080
}

func getHealth(c *gin.Context) {
	message := models.Message{
		Message: "Hello, World!",
	}
	c.IndentedJSON(http.StatusOK, message)
}

func getEmailAddress(c *gin.Context) {
	email := c.GetString("email")
	image := c.GetString("image")
	res := models.User{
		Email: email,
		Image: image,
	}
	c.IndentedJSON(http.StatusOK, res)
}

import { GoogleLogin, type CredentialResponse } from "@react-oauth/google";
import { type UserData } from "../App";

type GoogleLoginButtonProps = {
  handleValueChange: (data: UserData) => void;
};

const GoogleLoginButton = ({ handleValueChange }: GoogleLoginButtonProps) => {
  // ログイン成功時の処理
  const handleLoginSuccess = (credentialResponse: CredentialResponse) => {
    // バックエンドへのリクエスト
    fetch("http://localhost:8080/authorization", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${credentialResponse.credential}`,
      },
    })
      .then((response) => response.json())
      .then((data: UserData) => {
        console.log("Email adress: ", data.email);
        console.log("Image: ", data.image);
        //親要素へユーザーデータを渡す
        handleValueChange(data);
      })
      .catch((error) => {
        console.log("Error: ", error);
      });
  };
  // ログイン失敗時の処理
  const handleLoginError = () => {
    console.log("Login Failed");
  };

  return (
    <GoogleLogin onSuccess={handleLoginSuccess} onError={handleLoginError} />
  );
};

export default GoogleLoginButton;

import { useState } from "react";
import "./App.css";
import GoogleLoginButton from "./components/login";

export type UserData = {
  email: string;
  image: string;
};

function App() {
  const [userData, setUserData] = useState<UserData | null>(null);

  const getUserData = (newData: UserData) => {
    setUserData(newData);
  };

  if (userData) {
    return (
      <div>
        <img src={userData.image} alt="User profile" />
        <p>ようこそ、{userData.email}さん</p>
      </div>
    );
  } else {
    return (
      <>
        <p>ログインテスト</p>
        <GoogleLoginButton handleValueChange={getUserData} />
      </>
    );
  }
}

export default App;

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { GoogleOAuthProvider } from "@react-oauth/google";

//GoogleOAuthProviderでアプリケーション全体をラップする
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}>
      <App />
    </GoogleOAuthProvider>
  </StrictMode>,
);

cd .\server\
go run main.go

cd .\client\
npm run dev