Passport.js を使用して Google OAuth の力を解き放つ: ステップバイステップガイド-jsチュートリアル-php.cn

Passport.js を使用して Google OAuth の力を解き放つ: ステップバイステップガイド

WBOY

リリース： 2024-08-12 18:36:35

オリジナル

1009 人が閲覧しました

開発者の皆さん、こんにちは！ ?認証ゲームをレベルアップする準備はできていますか?今日は、Google OAuth 2.0 の世界と、Passport.js を使用してそれを実装する方法について詳しく説明します。信じてください。ユーザーはこのスムーズで安全なログインエクスペリエンスに感謝するでしょう!

Unlocking the Power of Google OAuth with Passport.js: A Step-by-Step Guide

Google OAuth 2.0 を使用する理由?

本題に入る前に、Google OAuth 2.0 がなぜそれほど重要なのかについて話しましょう:

1. ユーザーフレンドリー: 「パスワードを忘れた」という悩みはもうありません!
2. フォートノックスセキュリティ: Google の一流のセキュリティプロトコルを活用します。
3. 信頼性向上: ユーザーは Google アカウントをより安全に使用できると感じます。

いいですね?始めましょう!

ステップ 1: 準備を整えましょう! ?️

まず最初に、ツールをインストールしましょう。ターミナルを起動して以下を実行します:

npm install passport passport-google-oauth2 express-session

ログイン後にコピー

これらのパッケージは、Google OAuth 2.0 を実装するための新しい親友です。

ステップ 2: Google デベロッパーコンソールアドベンチャー ?️

Google Developer Console でプロジェクトをセットアップします。これがあなたの宝の地図です:

1. Google 開発者コンソールに移動します。
2. 新しいプロジェクトを作成します (素敵な名前を付けてください)。
3. [API とサービス > 認証情報] に移動します。
4. [資格情報の作成] をクリックし、[OAuth 2.0 クライアント ID] を選択します。
5. 同意画面を設定します (アイコンに向かって笑顔を忘れないでください!)。
6. OAuth 2.0 クライアント ID (Web アプリケーションタイプ) を構成します。
7. リダイレクト URI (例: http://localhost:3000/auth/google/callback) を追加します。

プロのヒント: クライアント ID とクライアントシークレットは安全に保管してください。それらは OAuth 王国への鍵のようなものです!

ステップ 3: パスポート設定マジック ✨

それでは、Passport.js の魔法をアプリに散りばめてみましょう:

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  function(accessToken, refreshToken, profile, done) {
    // Your user-saving logic goes here!
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return done(err, user);
    });
  }
));

// Don't forget to serialize and deserialize your users!
passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => {
    done(err, user);
  });
});

ログイン後にコピー

ステップ 4: 成功への道順 ?️

認証ハイウェイを設定しましょう:

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

app.use(passport.initialize());
app.use(passport.session());

// The gateway to Google OAuth
app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

// Welcome back! Handle the callback
app.get('/auth/google/callback',
  passport.authenticate('google', { 
    successRedirect: '/auth/google/success', 
    failureRedirect: '/auth/google/failure' 
  })
);

// Success and failure destinations
app.get('/auth/google/success', (req, res) => { 
  res.send('Welcome aboard! ?'); 
});

app.get('/auth/google/failure', (req, res) => { 
  res.send('Oops! Something went wrong. ?'); 
});

app.listen(3000, () => {
  console.log('Server is up and running! ?');
});

ログイン後にコピー

ステップ 5: 起動時間! ?

環境変数 (GOOGLE_CLIENT_ID と GOOGLE_CLIENT_SECRET) を設定すれば、リフトオフの準備は完了です。