Next.js + Go でGoogle SSOを実現する（フロントエンド編） / PaPut

mizulba

1年以上前

Next.js + Go でGoogle SSOを実現する（フロントエンド編）

Next.js

Google

フロントエンド

知識

ボタン押下時のhandler

'use client';

export const handleGoogleSignIn = (): void => {
  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
  const redirectUri = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI;

  // Google OAuth 2.0 URLの構築
  const scope = 'email profile openid';
  const responseType = 'code';
  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=${responseType}&access_type=offline&prompt=consent`;

  // ユーザーをGoogleの認証ページへリダイレクト
  window.location.href = authUrl;
};

ボタンのデザイン（ボタンはGoogleのデザイン規約に準拠）

<GoogleSingInButton handler={handleGoogleSignIn} />

ボタンを押下すると、Google側のログイン画面へ遷移する