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

WBOY
リリース: 2024-08-12 18:36:35
オリジナル
990 人が閲覧しました

開発者の皆さん、こんにちは! ?認証ゲームをレベルアップする準備はできていますか?今日は、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_IDGOOGLE_CLIENT_SECRET) を設定すれば、リフトオフの準備は完了です。

node app.js
ログイン後にコピー

http://localhost:3000/auth/google に移動して、魔法が起こるのを見てください!

まとめ ?

これで完成です! Passport.js を使用して Google OAuth 2.0 を実装しました。ユーザーは Google アカウントを使用してログインできるようになり、シームレスで安全なエクスペリエンスを楽しむことができます。

覚えておいてください、これはほんの始まりにすぎません。本番アプリでは、次のような機能を追加する必要があります。

  • 適切なエラー処理
  • データベース内のユーザー データ ストレージ
  • 追加の認証オプション

プロジェクトに OAuth を実装してみましたか?どのような課題に直面しましたか?以下のコメント欄にご意見をお寄せください – 認証の地でのあなたの冒険についてぜひ聞きたいです!

コーディングをお楽しみください。ログインが常にスムーズになりますように。 ??‍??‍?

以上がPassport.js を使用して Google OAuth の力を解き放つ: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート