Google OAuthの実装方法について

Last updated at 2024-12-08Posted at 2024-12-08

はじめに

こちらはエーピーコミュニケーションズ Advent Calendar 2024 の 9 日目の記事となります。
普段何気なく利用しているGoogle認証ですが、開発目線としてはどのような作業が必要になるのか実装方法について試してみました。

結論

非常に簡単な手順で実装することが可能なため、簡易的な認証などに利用する際には非常に便利に使えちゃいます。

作業の流れ

前提条件

Googleアカウントを持っていること。

Google Cloudへのプロジェクト作成

Google Cloudに専用のプロジェクトを作成して、認証機能を設定して行くことになります。

今回はGoogleアカウントについては取得済みであるものとして、プロジェクトの作成から試していきます。

プロジェクト名はOAuthTestとしました。

作成したプロジェクトに切り替えます。

OAuth 同意画面の作成

API とサービスをクリックします。

OAuth 同意画面を選択し、必要事項の入力へと進みます。
ここではWebアプリなどでの実装を想定しているため、User Typeは外部を選択します。

アプリ情報にアプリ名を入力します。
ここではOAuthTestとしています。

ユーザーサポートメール、デベロッパーの連絡先情報のメールアドレスはGoogleアカウントのものにします。
作成者のGmailアドレス以外を選択したい場合は、IAMユーザーをプロジェクトに招待することで選択ができます。

アプリ登録の編集のスコープについては他の権限を利用しない場合にはそのままで良いです。
こちらはGoogleカレンダーやDriveなどにアクセスする必要がある場合は必要なスコープを選択することになるのですが、単純な認証だけであれば不要です。
もしこちらのスコープを利用する場合、本番公開の際に非常に手間になる権限利用のイメージ動画を作成する必要が出てくるので注意です。

認証情報の作成

認証情報から OAuth 2.0 クライアント IDを作成します。

OAuth クライアント IDを選択します。

ウェブアプリケーションを選択します。

開発環境で利用するhttp://localhost:3000を入力します。

同様に開発環境で利用するhttp://localhost:3000を入力します。

作成画面からクライアント IDを控えます。

テスト用認証ページの作成

以下の様なhtmlを作成します。
ここではテストのためファイルに直接取得したクライアント ID情報を埋め込んで作成しますが、セキュリティ的な観点からはトークンのベタ書きは推奨されません。
参考にされる際にはアクセス環境や環境に合わせて承認済みの JavaScript 生成元と承認済みのリダイレクト URIの設定も考慮しつつ修正する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google OAuth Simple Test</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            text-align: center;
            padding: 20px;
        }
        .user-info {
            margin-top: 20px;
            display: none;
        }
        .user-info img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            margin-top: 20px;
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Google OAuth Simple Test</h1>
        <div id="buttonDiv"></div>
        <div id="userInfo" class="user-info">
            <img id="userPicture" alt="User Picture">
            <h2 id="userName"></h2>
            <p id="userEmail"></p>
            <button onclick="handleSignOut()">ログアウト</button>
        </div>
    </div>

    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script>
        function handleCredentialResponse(response) {
            // JWTをデコード
            const responsePayload = decodeJwtResponse(response.credential);
            
            // ユーザー情報を表示
            document.getElementById('buttonDiv').style.display = 'none';
            document.getElementById('userInfo').style.display = 'block';
            document.getElementById('userPicture').src = responsePayload.picture;
            document.getElementById('userName').textContent = `ようこそ、${responsePayload.name}さん！`;
            document.getElementById('userEmail').textContent = `メールアドレス: ${responsePayload.email}`;
        }

        function decodeJwtResponse(token) {
            const base64Url = token.split('.')[1];
            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));
            return JSON.parse(jsonPayload);
        }

        function handleSignOut() {
            google.accounts.id.disableAutoSelect();
            document.getElementById('buttonDiv').style.display = 'block';
            document.getElementById('userInfo').style.display = 'none';
        }

        window.onload = function () {
            google.accounts.id.initialize({
                client_id: 'xxxxxxxxxx',
                callback: handleCredentialResponse
            });
            google.accounts.id.renderButton(
                document.getElementById("buttonDiv"),
                { 
                    theme: "outline", 
                    size: "large",
                    type: "standard"
                }
            );
        };
    </script>
</body>
</html>