【Node.js】PassportでGoogleアカウントログイン機能の実装

0

原田です。こんにちは。

今回はNode.jsで、Googleアカウントを使ったログイン機能の実装について記載していきます。

本記事は、以下の環境のもと行っています。

  • Mac OS
  • node : 8.8.0
  • npm : 5.5.1


スポンサーリンク




準備

GoogleやTwitterのアカウントを取得する技術としてOAuth(オーオース)というものがあります。
詳しくは省きます。参考サイトをご確認ください。

Googleアカウントを取得するためには、アプリケーションの登録を行う必要があるみたいです。
こちらも参考サイトでご確認ください。

アプリケーションのトークンを取得する準備ができたら、プロジェクトを作成して、以下のモジュールをインストールします。

<br />
	$ sudo npm install express --save<br />
	$ sudo npm install session --save<br />
	$ sudo npm install cookie-parser --save<br />
	$ sudo npm install body-parser --save<br />
	$ sudo npm install passport --save<br />
	$ sudo npm install passport-google-oauth --save<br />

ソースコード

解説

Mainクラスのconstructorで、各種設定を行っていきます。

Middlewareの設定

ミドルウェアの設定を行います。”settingsMiddleware”メソッド内で行っています。

Passportを利用するのに必要なミドルウェアは、公式サイトにありますのでご参考に。

ミドルウェアの設定順が大事みたいで、expressのsessionから、passportのsessionと順に設定する必要があるみたいです。

OAuth(Passport)の設定

“settingOAuth”メソッドでOAuthの設定を行います。また、以下の順に処理が流れます。

GoogleStrategy

passportにGoogleStrategyの設定を追加します。
GoogleStrategyには、準備で行った、GoogleアプリケーションのclientID、clientSecret、callbackURLを設定する必要があります。

また、2つ目の引数のメソッド内のprofileにユーザー情報(IDやメールアドレス)が入ってきます。
“done”メソッドの2つ目の引数をオブジェクトにすることで、次の”passport.serializeUser”へ遷移します。

passport.serializeUser

渡されたユーザー情報を、sessionに保存します。”done”メソッドの第2引数で指定します。

passport.deserializeUser

ここでは、各Routerに渡す”req.user”情報を定義します。引数のuserには、serializeUserと同じパラメータがやってきます。

その情報をもとに、システム内のDBでユーザー情報を検索、”req.user”に設定します。

検索できなかった場合は、sessionが切れているとか、そういうことなのかな?

ルーティングの設定

ルーティングの設定を”routing”メソッドで行います。

Googleのログイン画面へ遷移するための”/auth/google”と、Googleからコールバックされるさいに呼ばれる”/auth/google/callback”、システムのページとなる”/home”と”/login”の計4つ用意します。

GoogelOAuthに設定している”scope”の中身に、特定のパラメータを設定することで、ユーザーのどのような情報を取得するか、または許可するかを選択することができます。
今回の例では、プロフィール情報とメールアドレスの情報を取得しています。

コールバックの”failureRedirect”には、認証に失敗した際に表示するページ(“/login”)を、成功後のメソッドには、”/home”へリダイレクトするようにしています。

“/home”では、serializeUser、deserializeUserで設定したsession情報とUser情報をログなどへ表示しています。

動作確認

動作確認を行います。”localhost:8080/auth/google”にアクセスして、認証許可ページへ遷移し、選択したユーザー情報を取得、”/home”へリダイレクトすることを確認します。(Session情報は、Googleから返ってきた情報そのままなので、ここでは割愛)

認証許可ページ

Homeページ

無事、ログインすることができました!

終わりに

Googleアカウントを使ったログインについて解説しました。

Passportの使い方がわかっておらず、Sessionが必要ってことがわかりませんでした。

参考サイト

一番分かりやすい OAuth の説明
Google APIを使用するためにGoogle OAuth認証をしようよ
Passport.js


スポンサーリンク




コメントを残す