Blog#201: 🔐Node.js ExpressでOAuth 2.0とOpenID Connectを使用したセキュアなサードパーティ認証の実装

201

こんにちは、私はトゥアンと申します。東京からフルスタックWeb開発者です。 将来の有用で面白い記事を見逃さないように、私のブログをフォローしてください。😊

OAuth 2.0とOpenID Connectの紹介

OAuth 2.0は、ユーザーの資格情報を公開せずに、サードパーティアプリケーションがユーザーを代表して限定的なリソースにアクセスできるようにする認可フレームワークです。OpenID Connectは、OAuth 2.0の上に構築されたアイデンティティレイヤーで、認証機能を提供します。両方を組み合わせることで、ユーザーを安全に認証し、保護されたリソースへのアクセスを許可することができます。

この記事では、Node.js ExpressアプリケーションでOAuth 2.0とOpenID Connectを実装する方法を説明します。認証用の人気のあるミドルウェアであるPassport.jsを使用して、プロセスを簡素化します。

前提条件

始める前に、以下がマシンにインストールされていることを確認してください。

  • Node.js(v14以上)
  • npm(v6以上)
  • コードエディタ(Visual Studio Codeなど)

Node.js Expressアプリケーションのセットアップ

まず、プロジェクト用の新しいディレクトリを作成し、ターミナルで移動します。次に、npmを使用してプロジェクトを初期化します。

mkdir oauth-openid-nodejs
cd oauth-openid-nodejs
npm init -y

依存関係のインストール

次に、必要なパッケージをインストールします。

npm install express passport passport-openidconnect dotenv

Expressサーバーの作成

プロジェクトのルートにindex.jsファイルを作成し、基本的なExpressサーバーを設定するためのコードを追加します。

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('OAuth 2.0とOpenID Connectデモへようこそ!');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Passport.jsでOpenID Connectを使う方法

Passport.jsの設定

まず、プロジェクトのルートに.envファイルを作成し、クライアントID、クライアントシークレット、コールバックURLを保存します。これらは、選択した認証プロバイダ(Google、Facebookなど)から提供されます。

CLIENT_ID=your_client_id
CLIENT_SECRET=your_client_secret
CALLBACK_URL=http://localhost:3000/auth/callback

次に、プロジェクトのルートにpassport-setup.jsファイルを作成し、Passport.jsをOpenID Connectストラテジーで設定するためのコードを追加します。

const passport = require('passport');
const OidcStrategy = require('passport-openidconnect').Strategy;
const dotenv = require('dotenv');

dotenv.config();

passport.use(
  new OidcStrategy(
    {
      issuer: 'https://your-auth-provider.com',
      clientID: process.env.CLIENT_ID,
      clientSecret: process.env.CLIENT_SECRET,
      callbackURL: process.env.CALLBACK_URL,
      scope: 'openid profile email'
    },
    (accessToken, refreshToken, profile, done) => {
      return done(null, profile);
    }
  )
);

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

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

module.exports = passport;

選択した認証プロバイダーの適切な発行者URLでhttps://your-auth-provider.comを置き換えます。

Expressサーバーの更新

次に、index.jsファイルを更新して、Passport.jsとOpenID Connectの設定を含めます。

const express = require('express');
const passport = require('./passport-setup');
const session = require('express-session');
const app = express();

// Expressでセッションミドルウェアを使用するように設定
app.use(session({
  secret: 'your-session-secret',
  resave: false,
  saveUninitialized: true
}));

// Passport.jsとセッションサポートを初期化
app.use(passport.initialize());
app.use(passport.session());

app.get('/', (req, res) => {
  res.send('OAuth 2.0とOpenID Connectデモへようこそ!');
});

// OAuth 2.0認証のためのルートを追加
app.get('/auth', passport.authenticate('openidconnect'));

// OAuth 2.0コールバックのためのルートを追加
app.get('/auth/callback',
  passport.authenticate('openidconnect', { failureRedirect: '/login' }),
  (req, res) => {
    res.redirect('/profile');
  }
);

// ユーザープロファイルのためのルートを追加
app.get('/profile', (req, res) => {
  if (!req.user) {
    return res.redirect('/login');
  }
  res.send(`こんにちは、${req.user.displayName}さん!`);
});

// ログインページのためのルートを追加
app.get('/login', (req, res) => {
  res.send('<a href="/auth">アイデンティティプロバイダーでログイン</a>');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

アプリケーションのテスト

これで、Node.js ExpressアプリケーションでOAuth 2.0とOpenID Connectを使用してテストする準備が整いました。サーバーを起動するには、次のコマンドを実行します。

node index.js

ブラウザでhttp://localhost:3000/loginにアクセスし、「アイデンティティプロバイダーでログイン」のリンクをクリックします。認証プロバイダーのログインページにリダイレクトされます。ログインした後、/profileルートにリダイレクトされ、表示名が含まれた個人的な挨拶が表示されます。

まとめ

この記事では、Passport.jsを使用してNode.js ExpressアプリケーションでOAuth 2.0とOpenID Connectを実装する方法を説明しました。この安全な認証方法により、ユーザーは資格情報をアプリケーションに公開せずに認証できるため、より安全で信頼性の高い認証プロセスが実現されます。

アプリケーションを本番環境にデプロイする際は、サンプルの設定情報(発行者URL、クライアントID、クライアントシークレットなど)を、実際の認証プロバイダーの情報に置き換えることを忘れないでください。

最後

いつもお世話になっています。この記事を楽しんで、新しいことを学べたら嬉しいです。😊

今度の記事でお会いしましょう!この記事が気に入ったら、私を応援するために「LIKE」を押して登録してください。ありがとうございました。

NGUYỄN ANH TUẤN

Xin chào, mình là Tuấn, một kỹ sư phần mềm đang làm việc tại Tokyo. Đây là blog cá nhân nơi mình chia sẻ kiến thức và kinh nghiệm trong quá trình phát triển bản thân. Hy vọng blog sẽ là nguồn cảm hứng và động lực cho các bạn. Hãy cùng mình học hỏi và trưởng thành mỗi ngày nhé!

Đăng nhận xét

Mới hơn Cũ hơn