# HerokuでOAuth 2.0を実装する手順（Googleログイン）

## 目次
1. はじめに
2. プロジェクトの準備
3. Google CloudでOAuth 2.0クライアントIDを作成
4. Herokuアプリケーションの設定
5. Expressアプリケーションの実装
6. OAuth 2.0フローの実装
7. 環境変数の設定
8. Herokuにデプロイ
9. デプロイ後の動作確認
10. まとめ

## 1. はじめに
OAuth 2.0は、ユーザーが別のアプリケーションのリソースにアクセスできるようにするための業界標準のプロトコルです。この記事では、Heroku上でNode.jsを使ってGoogleログインを実装する手順を解説します。

## 2. プロジェクトの準備
まず、Node.jsとExpressを使用して簡単なアプリケーションを作成します。次のコマンドを実行してプロジェクトを初期化します。

![img](/mosaic-code.jpg)

次に、基本的なExpressアプリケーションを作成します。

![img](/mosaic-code.jpg)

## 3. Google CloudでOAuth 2.0クライアントIDを作成
次に、Google Cloud ConsoleでOAuth 2.0クライアントIDを作成します。

1. Google Cloud Consoleにアクセスし、新しいプロジェクトを作成します。
2. API & サービス > 認証情報に移動します。
3. 認証情報を作成 > OAuth クライアント IDを選択します。
4. アプリケーションの種類を「Webアプリケーション」に設定します。
5. 承認済みのリダイレクトURIに `http://localhost:3000/auth/google/callback`を設定します。
6. クライアントIDとクライアントシークレットが生成されます。

## 4. Herokuアプリケーションの設定
Herokuにアプリケーションを作成し、必要な設定を行います。

![img](/mosaic-code.jpg)

## 5. Expressアプリケーションの実装
生成したクライアントIDとシークレットを使用して、Google Strategyを追加します。

![img](/mosaic-code.jpg)

6. OAuth 2.0フローの実装
Googleログインボタンを作成し、ユーザーがGoogleアカウントでサインインできるようにします。ここでは、Google Strategyが必要な認証情報を設定し、適切なハンドリングを行います。

7. 環境変数の設定
Heroku環境で動作するために、Herokuの環境変数にクライアントIDとシークレットを設定します。

![img](/mosaic-code.jpg)

## 8. Herokuにデプロイ
Herokuにアプリケーションをデプロイします。

![img](/mosaic-code.jpg)

## 9. デプロイ後の動作確認
ブラウザでHerokuアプリのURLにアクセスし、Googleログインフローが期待通りに動作することを確認します。

## 10. まとめ
Heroku上でGoogleのOAuth 2.0を使用してGoogleログイン機能を実装する手順を示しました。このプロセスを通して、OAuth 2.0の基本的な構成とHeroku上での環境変数の設定についても学ぶことができました。次回は、より高度なOAuth 2.0フローやカスタムスコープについて説明する予定です。 [cv:issue_marketplace_engineer]

# HerokuでOAuth 2.0を実装する手順（Googleログイン）

## 目次
1. はじめに
2. プロジェクトの準備
3. Google CloudでOAuth 2.0クライアントIDを作成
4. Herokuアプリケーションの設定
5. Expressアプリケーションの実装
6. OAuth 2.0フローの実装
7. 環境変数の設定
8. Herokuにデプロイ
9. デプロイ後の動作確認
10. まとめ

## 1. はじめに
OAuth 2.0は、ユーザーが別のアプリケーションのリソースにアクセスできるようにするための業界標準のプロトコルです。この記事では、Heroku上でNode.jsを使ってGoogleログインを実装する手順を解説します。

## 2. プロジェクトの準備
まず、Node.jsとExpressを使用して簡単なアプリケーションを作成します。次のコマンドを実行してプロジェクトを初期化します。

```bash
mkdir heroku-google-oauth
cd heroku-google-oauth
npm init -y
npm install express passport-google-oauth20 express-session
```

次に、基本的なExpressアプリケーションを作成します。

```javascript
// app.js
const express = require('express');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const session = require('express-session');

const app = express();

app.use(session({ secret: 'your-secret-key', resave: false, saveUninitialized: false }));
app.use(passport.initialize());
app.use(passport.session());

passport.serializeUser((user, done) => {
  done(null, user);
});
passport.deserializeUser((obj, done) => {
  done(null, obj);
});

app.get('/', (req, res) => {
  res.send('<h1>Home</h1>');
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});
```

## 3. Google CloudでOAuth 2.0クライアントIDを作成
次に、Google Cloud ConsoleでOAuth 2.0クライアントIDを作成します。

1. Google Cloud Consoleにアクセスし、新しいプロジェクトを作成します。
2. API & サービス > 認証情報に移動します。
3. 認証情報を作成 > OAuth クライアント IDを選択します。
4. アプリケーションの種類を「Webアプリケーション」に設定します。
5. 承認済みのリダイレクトURIに `http://localhost:3000/auth/google/callback`を設定します。
6. クライアントIDとクライアントシークレットが生成されます。

## 4. Herokuアプリケーションの設定
Herokuにアプリケーションを作成し、必要な設定を行います。

```bash
heroku create
```

## 5. Expressアプリケーションの実装
生成したクライアントIDとシークレットを使用して、Google Strategyを追加します。

```javascript
passport.use(new GoogleStrategy({
  clientID: 'YOUR_GOOGLE_CLIENT_ID',
  clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',
  callbackURL: '/auth/google/callback'
}, (accessToken, refreshToken, profile, done) => {
  return done(null, profile);
}));

app.get('/auth/google',
  passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/plus.login'] }));

app.get('/auth/google/callback',
  passport.authenticate('google', { failureRedirect: '/' }),
  (req, res) => {
    res.redirect('/');
  });
```

6. OAuth 2.0フローの実装
Googleログインボタンを作成し、ユーザーがGoogleアカウントでサインインできるようにします。ここでは、Google Strategyが必要な認証情報を設定し、適切なハンドリングを行います。

7. 環境変数の設定
Heroku環境で動作するために、Herokuの環境変数にクライアントIDとシークレットを設定します。

```bash
heroku config:set GOOGLE_CLIENT_ID=your-google-client-id
heroku config:set GOOGLE_CLIENT_SECRET=your-google-client-secret
```

## 8. Herokuにデプロイ
Herokuにアプリケーションをデプロイします。

```bash
git add .
git commit -m "Add OAuth 2.0 with Google login"
git push heroku main
```

## 9. デプロイ後の動作確認
ブラウザでHerokuアプリのURLにアクセスし、Googleログインフローが期待通りに動作することを確認します。

## 10. まとめ
Heroku上でGoogleのOAuth 2.0を使用してGoogleログイン機能を実装する手順を示しました。このプロセスを通して、OAuth 2.0の基本的な構成とHeroku上での環境変数の設定についても学ぶことができました。次回は、より高度なOAuth 2.0フローやカスタムスコープについて説明する予定です。 

HerokuでOAuth 2.0を実装する手順（Googleログイン）

目次

続きを読むには単価診断を受けてください（30秒）