44
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Node.js+Passport+Google 認証を使ってみた

44
Last updated at Posted at 2017-10-28

ウェブアプリでユーザ認証を実装するのに、Node.js+Passport を使ってみました。

これを使って Google 認証してみたいと思いました。

Passport とは

Passport は Node.js のための認証ミドルウェアです。認証リクエストをおこなうための必要最低限の機能をもつように設計されています。

公式 Passport - Node.jsのための、シンプルで使いどころを選ばない認証モジュール

Passport を使ってみた

Passport をインストールして、Google を使ってユーザ認証するところまで、使ってみました。

  • node 8.1.14
  • express 4.16.2
  • passport 0.4.0
  • passport-google-oauth 1.0.0

ワークスペースを作る

まず、Node.js+Express のワークスペースを作ります。

参考 Node.js、Express.js入門 - ぺーぺーSEのブログ

インストールする

$ npm install --save passport

参照 Passport | はじめに

以下をソースコードに追加します。

app.js
var passport = require('passport');
app.use(passport.initialize());

参照 Passport | 設定 ミドルウェアの設定

Google 認証を使うための事前の準備

Google 認証を使うために、Google Cloud サービスで事前に準備しておきます。

①開発者の Google アカウントで Google Developer Console にログインします。
(https://console.cloud.google.com/)
②認証に使うプロジェクトを作成します。プロジェクト名は任意です。
(https://console.developers.google.com/project)

参照 Google APIを使用するための設定(プロジェクトの作成 ・ 使用するAPIの設定) 第1回 - プログラミングノート

③Google 認証するために必要な API を有効にします。
(https://console.developers.google.com/apis/library)

Google+ API を有効にしておきます。

参照 Google API を有効にする | MAGELLAN BLOCKS

④認証情報を作成します。
(https://console.developers.google.com/apis/credentials)

認証情報は OAuth クライアント ID を作成します。以下の項目を設定します。

  • アプリケーションの種類 ウェブアプリケーション
  • 名前 ←任意です
  • JavaScript 生成元 ←設定しません
  • リダイレクト URI ←後述の通り

「作成」すると、以下の情報が取得できます。後で使用します。

  • クライアント ID
  • クライアントシークレット

参照 Google APIを使用するための設定(認証情報の登録) 第2回 - プログラミングノート

ライブラリを導入して認証処理の準備する

Passport を使って認証確認する処理を書きます。

まず、認証ストラテジをインストールします。

$ npm install --save passport-google-oauth

以下をソースコードに追加します。

app.js
var GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
passport.use(new GoogleStrategy(
    {
        clientID: "(クライアント ID)",
        clientSecret: "(クライアントシークレット)",
        callbackURL: "(コールバック URL)"
    }, 
    function(accessToken, refreshToken, profile, done){
        ◇◇  // ここで profile を確認して結果を返す
    }
));

結果を返すところは、以下のように書く。

        if (profile) {
            return done(null, profile);
        }
        else {
            return done(null, false);
        }

この辺は Passport > Documentation > Google

ログイン URL を用意する

ここで用意された URL にアクセスすると、Google に認証を委譲します。

app.js
app.get('/auth/google', passport.authenticate('google', {
    scope: ['https://www.googleapis.com/auth/plus.login']
}));

ログイン画面を用意する

ログイン画面、例えば login.html を用意します。上記で準備した URL へのリンクを含めます。

login.html
<a href="/auth/google">Google でログイン</a> 

/login に GET するとこの画面を表示するようにしておきましょう。

app.js
app.get('/login', function(req, res){
    res.sendFile(__dirname + '/login.html');
});

コールバック URL を用意する

ユーザが Google で認証処理すると、事前に登録しておいた URL に戻ってきます。呼出されたときの処理を用意します。

app.js
app.get('/auth/google/callback', passport.authenticate('google', 
    function(req, res) {
        ◇◇  // 認証に成功したときの処理
    })
);

実際の URL は

http://(サーバのアドレス)/auth/google/callback

これを前述の OAuth クライアントリダイレクト URI に設定しておきます。

認証されるとページ遷移するのが通常でしょう。↓

app.js
app.get('/auth/google/callback', passport.authenticate('google', 
    function(req, res){
        res.redirect('/◇◇');
    })

遷移先はオプション指定で記述することもできます。↓

app.js
app.get('/auth/google/callback', passport.authenticate('google', 
    {
        failureRedirect: '/◆◆',  // 失敗したときの遷移先
        successRedirect: '/◇◇',  // 成功したときの遷移先
    },
    function(req, res){

認証成功したときに URL 遷移せずに処理することができます。↓

app.js
app.get('/auth/google/callback', passport.authenticate('google', 
    {
        failureRedirect: '/◆◆',  // 失敗したときの遷移先
    },
    function(req, res){
        ◇◇  // 成功したときの処理

セッションを無効にして使う

Passport は認証成功したとき認証情報をセッションに保存します。API サーバとして実行するときは、リクエストごとに認証処理する必要があります。このときはセッションを無効にして使用します。

app.js
app.post('/login', passport.authenticate('google', 
    {
        session: false,

この辺までは Passport | 認証

セッションを有効にして使う

Passport は認証成功したとき認証情報をセッションに保存します。Express でセッションを使えるようにしておきましょう。

$ npm install --save express-session
app.js
var session = require('express-session');
app.use(session({
    secret: '○○',
}));
app.use(passport.session());

passport.serializeUser(function(user, done) {
    done(null, user);
});

passport.deserializeUser(function(user, done) {
    done(null, user);
});

この辺は Passport | 設定 セッション管理に関する設定

どのページでも認証確認する

これまでのコードでは、ログイン画面以外のページでは認証確認されません。どのページでも認証確認されるようにしましょう。

まず、ページのリクエストを貰ったとき認証済か確認する関数を用意します。

app.js
function isAuthenticated(req, res, next){
    if (req.isAuthenticated()) {  // 認証済
        return next();
    }
    else {  // 認証されていない
        res.redirect('/login');  // ログイン画面に遷移
    }
}

ページごとに確認処理を入れるようにします。例えば、

app.js
app.get('/◆◆', isAuthenticated, function(req, res){
    ◇◇  // 認証済のとき実行される

参考 express - Documentation for "ensureAuthentication" "isAuthenticated" passport's functions? - Stack Overflow

44
53
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?