[Webサービス] Googleアカウントでログインする

Googleアカウントでログインする機能を追加するためには、GoogleのOAuth 2.0を利用します。以下に手順を説明します。

1. Google Cloud Consoleでプロジェクトを作成

Google Cloud Consoleにアクセスしてログイン。
左上のメニューから「APIとサービス」>「ダッシュボード」を選択。
「プロジェクトを選択」をクリックし、「新しいプロジェクト」を作成。

2. OAuth 2.0クライアントIDの作成

プロジェクトが作成されたら、「APIとサービス」>「認証情報」を選択。
「認証情報を作成」ボタンをクリックし、「OAuth クライアントID」を選択。
「同意画面の構成」をクリックし、必要な情報を入力（アプリケーション名、サポートメールアドレスなど）。
「保存して続行」をクリック。
「アプリケーションのタイプ」を「ウェブアプリケーション」に設定。
「承認済みのリダイレクトURI」にあなたのアプリケーションのリダイレクトURLを入力（例: https://yourapp.com/auth/google/callback）。
「作成」をクリックすると、クライアントIDとクライアントシークレットが生成されます。

3. OAuth 2.0ライブラリのセットアップ

選択するプログラミング言語やフレームワークに応じて、適切なOAuth 2.0ライブラリをインストールします。

例：Node.jsの場合

npm install google-auth-library

4. 認証フローの実装

例: Node.jsとExpress

必要なライブラリをインポート

const { OAuth2Client } = require('google-auth-library');
const express = require('express');
const app = express();
const client = new OAuth2Client(CLIENT_ID);

GoogleのOAuth 2.0エンドポイントへのリダイレクトを設定

app.get('/auth/google', (req, res) => {
  const redirectUrl = client.generateAuthUrl({
    access_type: 'offline',
    scope: ['profile', 'email'],
  });
  res.redirect(redirectUrl);
});

コールバックエンドポイントの実装

app.get('/auth/google/callback', async (req, res) => {
  const code = req.query.code;
  const { tokens } = await client.getToken(code);
  client.setCredentials(tokens);

  const ticket = await client.verifyIdToken({
    idToken: tokens.id_token,
    audience: CLIENT_ID,
  });
  const payload = ticket.getPayload();
  const userId = payload['sub'];

  // ユーザー情報を使ってアプリケーションのロジックを処理
  res.send(`Hello ${payload.name}`);
});

5. クライアントシークレットの管理

クライアントシークレットは安全に保管し、コードに直接埋め込まず、環境変数などを利用します。

6. 動作確認

すべての手順が完了したら、アプリケーションを起動して、Googleアカウントでログインできることを確認します。

この手順を踏むことで、Googleアカウントでのログイン機能をウェブアプリケーションに追加できます。