Passport を使用して Node.js アプリケーションにソーシャル認証を提供する

パスワードは本質的に脆弱であることは周知の事実です。したがって、エンドユーザーが使用するアプリケーションごとに強力なパスワードを作成することを要求すると、事態はさらに悪化するだけです。

簡単な回避策は、既存のソーシャル アカウント (Facebook、Twitter、Google など) を介してユーザーを認証させることです。この記事では、まさにこれを実行し、この認証シリーズの最初の部分にこのソーシャル ログイン機能を追加して、Passport ミドルウェアを使用して Facebook および Twitter アカウントで認証できるようにします。

前回の記事をまだ読んでいない場合は、この記事で築いた基礎を基にして新しい戦略、ルート、ビューを構築するので、読むことをお勧めします。

ソーシャルログイン

初心者のために説明すると、ソーシャル ログインは、Facebook、Twitter などのソーシャル ネットワーキング サイトからの既存の情報を使用するシングル サインオンです。通常、ユーザーはすでにアカウントを作成しているはずです。

ソーシャル ログインは主に OAuth 2.0 などの認証スキームに依存します。 OAuth でサポートされているさまざまなログイン フローの詳細については、この記事を参照してください。ソーシャル ログインを処理するために Passport を選択したのは、Facebook、Twitter、Google、GitHub など、さまざまな OAuth プロバイダーに異なるモジュールを提供しているためです。この記事では、Passport-facebook モジュールと Passport-twitter モジュールを使用して、既存の Facebook または Twitter アカウントを介したログイン機能を提供します。

Facebook認証

Facebook 認証を有効にするには、まず Facebook 開発者ポータルを使用して Facebook アプリを作成する必要があります。アプリ ID とアプリ シークレットをメモし、設定 に移動し、Website セクションで Web サイト URL を指定してコールバック URL を指定します。応用。また、Contact Email フィールドに有効な電子メール アドレスを必ず入力してください。このアプリケーションは公開され、一般にアクセスできる必要があります。

次に、ステータスとレビューセクションに移動し、スライダーを Yes に回してアプリを公開します。 Facebook への接続に必要な構成情報を保持する構成ファイル fb.js を作成します。

リーリー

Facebook ログイン ポリシー

Node アプリケーションに戻り、FacebookStrategy モジュールを使用して Facebook 認証の Passport 戦略を定義し、上記の設定を活用してユーザーの Facebook プロフィールを取得し、ビューに詳細を表示します。 リーリー

ルーティングの構成

次に、Facebook ログインを有効にし、ユーザーがアプリケーションに Facebook アカウントの使用を許可した後にコールバックを処理するためのルートをいくつか追加する必要があります。

リーリー

デモ アプリケーションのログイン ページは次のようになります:

[Facebook でログイン]ボタンをクリックすると、Facebook での認証が試行されます。すでに Facebook にログインしている場合は、許可を求める次のダイアログ ボックスが表示されます。そうでない場合は、Facebook にログインしてからこのダイアログ ボックスを表示するように求められます。

アプリに公開プロフィールと電子メール アドレスの受信を許可すると、登録されたコールバック関数がユーザーの詳細を使用して呼び出されます。この情報を今後の参照用に保存したり、表示したり、処理したい内容に応じて単に無視することを選択したりすることができます。自由にジャンプして、この git リポジトリ内の完全なコードを確認してください。

このデモ アプリケーションによって提供される基本情報に加えて、適切なスコープを使用し、ユーザー プロファイルを通じて受信したアクセス トークンで Facebook API を使用することによって、同じ認証メカニズムを使用することもできることに注意してください。

Twitter認証

Twitter 経由の認証を処理するために同様の認証モジュールを接続し、パスポート ツイッター モジュールを支援するためにパスポート チップを接続する必要があります。

まず、アプリケーション管理インターフェイスを使用して新しい Twitter アプリケーションを作成する必要があります。ここで注意すべき点は、コールバック URL を指定するときに、コールバック URL フィールドに「localhost」を指定した場合、Twitter はうまく機能しないようだということです。開発中にこの制限を克服するには、「localhost」の代わりに特別なループバック アドレスまたは「127.0.0.1」を使用できます。アプリケーションを作成した後、次に示すように、構成ファイル内の API キーとシークレット情報をメモします。 リーリー

Twitter ログイン ポリシー

Twitter のログイン戦略は、次の

TwitterStrategy

のインスタンスです:

passport.use('twitter', new TwitterStrategy({
    consumerKey     : twitterConfig.apikey,
    consumerSecret  : twitterConfig.apisecret,
    callbackURL     : twitterConfig.callbackURL
  },
  function(token, tokenSecret, profile, done) {
    // make the code asynchronous
    // User.findOne won't fire until we have all our data back from Twitter
    process.nextTick(function() { 

	  User.findOne({ 'twitter.id' : profile.id }, 
        function(err, user) {
          // if there is an error, stop everything and return that
		  // ie an error connecting to the database
	      if (err)
	        return done(err);

			// if the user is found then log them in
	        if (user) {
	           return done(null, user); // user found, return that user
	        } else {
	           // if there is no user, create them
	           var newUser                 = new User();

			   // set all of the user data that we need
	           newUser.twitter.id          = profile.id;
	           newUser.twitter.token       = token;
	           newUser.twitter.username = profile.username;
	           newUser.twitter.displayName = profile.displayName;
	           newUser.twitter.lastStatus = profile._json.status.text;

			   // save our user into the database
	           newUser.save(function(err) {
	             if (err)
	               throw err;
	             return done(null, newUser);
	           });
	        }
	     });
	  });
    })
);

配置路由

// route for twitter authentication and login
// different scopes while logging in
router.get('/login/twitter',  
  passport.authenticate('twitter')
);

// handle the callback after facebook has authenticated the user
router.get('/login/twitter/callback',
  passport.authenticate('twitter', {
	successRedirect : '/twitter',
	failureRedirect : '/'
  })
);

/* GET Twitter View Page */
router.get('/twitter', isAuthenticated, function(req, res){
  res.render('twitter', { user: req.user });
});

现在要对此进行测试，请务必使用 http://127.0.0.1:<port></port> 而不是使用 http: //localhost:<port></port>.正如我们上面已经提到的，在使用“localhost”作为主机名与 Twitter 交换令牌时似乎存在问题。单击使用 Twitter 登录按钮时，正如预期的那样，它会请求用户同意允许此应用程序使用 Twitter。

当您允许应用程序访问您的 Twitter 帐户和有限信息时，登录策略中注册的回调处理程序为调用，然后用于将这些详细信息存储在后端数据库中

结论

这就是你拥有的！我们成功地将 Facebook 和 Twitter 登录添加到示例应用程序中，而无需编写大量代码并通过让 Passport 完成繁重的工作来处理与身份验证机制相关的复杂问题。可以为 Passport 支持的各种提供程序编写类似的登录策略。整个应用程序的代码可以在此 git 存储库中找到。请随意扩展它并在您自己的项目中使用它。

以上がPassport を使用して Node.js アプリケーションにソーシャル認証を提供するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。