このページの本文へ

手間のかかるSPAのソーシャルログインをPassport.jsで手軽に実装する方法

2017年08月10日 13時13分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

従来のWebアプリケーションなら簡単なGoogleやFacebookのソーシャルログインも、シングルページアプリケーションに実装するのは意外と大変。実装に戸惑った方へ、ちょっとしたコツを教えます。

シングルページアーキテクチャーを使って開発されたWebアプリケーションを目にすることが多くなりました。このアーキテクチャーでは、アプリケーション全体がJavaScriptとしてブラウザーに読み込まれ、サーバーとのやりとりはすべてJSONドキュメントを返すHTTPベースのAPIを使って実行されます。こうしたアプリケーションはユーザープロファイルを保存するときをはじめ、特定のユーザーに操作を限定する必要があります。この処理は従来のHTMLベースのアプリケーションでは比較的簡単に実装できましたが、シングルページアプリケーションではすべてのAPIリクエストを認証しなければならないため、難度が上がります。

本記事では、さまざまなプロバイダーを利用したソーシャルログインをPassport.jsライブラリーで実装する方法を紹介します。さらに、ログイン後のAPIコールで用いるトークンベース認証の実装方法についても説明します。

ソースコードはすべてGitHubリポジトリからダウンロードできます。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング