開発者の皆さん、こんにちは! ?認証ゲームをレベルアップする準備はできていますか?今日は、Google OAuth 2.0 の世界と、Passport.js を使用してそれを実装する方法について詳しく説明します。信じてください。ユーザーはこのスムーズで安全なログイン エクスペリエンスに感謝するでしょう!
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) を設定すれば、リフトオフの準備は完了です。
node app.js
http://localhost:3000/auth/google に移動して、魔法が起こるのを見てください!
まとめ ?
これで完成です! Passport.js を使用して Google OAuth 2.0 を実装しました。ユーザーは Google アカウントを使用してログインできるようになり、シームレスで安全なエクスペリエンスを楽しむことができます。
覚えておいてください、これはほんの始まりにすぎません。本番アプリでは、次のような機能を追加する必要があります。
プロジェクトに OAuth を実装してみましたか?どのような課題に直面しましたか?以下のコメント欄にご意見をお寄せください – 認証の地でのあなたの冒険についてぜひ聞きたいです!
コーディングをお楽しみください。ログインが常にスムーズになりますように。 ?????
以上がPassport.js を使用して Google OAuth の力を解き放つ: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。