FacebookログインをExpressとPassportでサクッと実装する方法

ソーシャルログインの実装はスタートアップ起業にとっては無くてはならないログイン実装の代替となっています。今回はFacebookログインのAPIを、NodeJSでの一般的な実装方法である、ExpressとPassportを使った実装方法をご紹介します。

見出し

1 はじめに
2 Facebookログインを実装しよう
3 動作確認
4 最後に
5 環境
- 5.1 関連記事

はじめに

以前の記事でFacebookログインを確認する簡単なAPIを作りました。簡単なテストとしてはそれで十分なのですが、今回はもう一歩踏み込んで、ExpressとPassportを使って、実際に使えるAPIをサクッと実装する方法をご紹介します。

FacebookログインのJavascriptのSDKをサクッと試す方法

Facebookログインを実装しよう

前提

以下がインストールされている前提で進めます。

NodeJS
Yarn
Docker
Robo 3T (任意)

細かいバージョンは「環境」を参照して下さい。

Facebook For Developersでアプリの登録

以前作成した「sample app」を使います。

今回はローカルホストで実行できるように以下の設定をします。

アプリドメイン : localhost

リダイレクト先のURLを設定します。

有効なOAuthリダイレクトURL : http://localhost:3000/auth/facebook/callback

環境の作成

今回用のフォルダとファイルを作って、必要なパッケージをインストールします。

$ mkdir facebook-project
$ cd facebook-project
$ yarn init -y
$ yarn add express cookie-session mongoose passport passport-facebook 
$ mkdir models
$ touch models/user.js
$ touch server.js

MongoDBをDockerイメージで作成

ローカルにMongoDBがインストールされている人はそれでも良いですが、インストールしていない人はこのためだけに環境を構築するのは面倒だと思いますので、Dockerイメージを使いましょう。

$ docker container run -d --rm --name mongo-docker -p 27018:27017 mongo:3.6.2
$ docker container ls
CONTAINER ID        IMAGE               COMMAND                  CREATED                  STATUS              PORTS                      NAMES
447858ed0598        mongo:3.6.2         "docker-entrypoint.s…"   Less than a second ago   Up 15 seconds       0.0.0.0:27018->27017/tcp   mongo-docker
$ docker exec -it mongo-docker mongo --version
MongoDB shell version v3.6.2
git version: 489d177dbd0f0420a8ca04d39fd78d0a2c539420
OpenSSL version: OpenSSL 1.0.1t  3 May 2016
allocator: tcmalloc
modules: none
build environment:
    distmod: debian81
    distarch: x86_64
    target_arch: x86_64

「–rm」オプションを指定しているので、停止するとコンテナは削除されます。ゴミが残らないのでテストにはもってこいです。

「user.js」の実装

const mongoose = require('mongoose');
const { Schema } = mongoose;

const userSchema = new Schema({
  displayName: String,
  facebookId: String
});

const User = mongoose.model('users', userSchema);

module.exports = User;

「server.js」の実装

ソースコードは以下になります。

const express = require('express');
const mongoose = require('mongoose');
const cookieSession = require('cookie-session');
const passport = require('passport');

const PORT = process.env.PORT || 3000;
const FACEBOOK_APP_ID = '{your-app-id}';
const FACEBOOK_APP_SECRET = '{your-app-secret}';
const MONGO_URL = 'mongodb://localhost:27018/test-db';

const FacebookStrategy = require('passport-facebook').Strategy;
const User = require('./models/user');

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id).then(user => {
    done(null, user);
  });
});

passport.use(
  new FacebookStrategy(
    {
      clientID: FACEBOOK_APP_ID,
      clientSecret: FACEBOOK_APP_SECRET,
      callbackURL: '/auth/facebook/callback'
    },
    (accessToken, refreshToken, profile, done) => {
      if (!profile) {
        return done(null, false);
      }

      User.findOne({ facebookId: profile.id })
        .then(existingUser => {
          if (existingUser) {
            done(null, existingUser);
          } else {
            new User({
              displayName: profile.displayName,
              facebookId: profile.id
            })
              .save()
              .then(user => done(null, user));
          }
        })
        .catch(err => done(err, null));
    }
  )
);

mongoose.connect(MONGO_URL);

const app = express();

app.use(
  cookieSession({
    maxAge: 30 * 24 * 60 * 60 * 1000,
    keys: ['facebook-auth']
  })
);
app.use(passport.initialize());
app.use(passport.session());

app.get(
  '/auth/facebook',
  passport.authenticate('facebook', {
    scope: ['public_profile']
  })
);

app.get(
  '/auth/facebook/callback',
  passport.authenticate('facebook'),
  (req, res) => {
    res.send({ message: 'The user is logging in' });
  }
);

app.get('/api/logout', (req, res) => {
  req.logout();
  res.send({ message: 'The user logged out' });
});

app.get('/api/user', (req, res) => {
  res.send(req.user);
});

app.listen(PORT, () => {
  console.log(`Server is starting on ${PORT}...`);
});

「{your-app-id}」と「{your-app-secret}」には自分のIDとシークレットの値を入れて下さい。データベースのURLは「mongodb://localhost:27018/test-db」にしています。Dockerコンテナ作成時に設定したポート27018ですね。

リソースのアクセス許可の範囲

Facebookのリソースにはアクセス許可の権限が細かく決められています。その設定は「passport.authenticate」の「scope」で行っています。

今回はデフォルトである「public_profile」を設定しています。利用者の公開プロフィールの一部のアイテムを取得できます。

詳しいアクセス許可に関しては公式サイトを確認して下さい。

動作確認

サーバーの起動

それでは、作成した「server.js」を起動しましょう。

$ node server.js
Server is starting on 3000...

ログインの確認

ブラウザを開き、「http://localhost:3000/auth/facebook」にアクセスしましょう。

ログインできました！

データベースの値の確認

次に、Robo 3TからMongoDBに接続します。

「test-db」にユーザ情報が登録されています。

ユーザ情報の取得

「http://localhost:3000/api/user」にアクセスしてみましょう。

データベースに登録されていたユーザ情報と同じ情報が表示されています。

ログアウトの確認

最後に、「http://localhost:3000/api/logout」にアクセスしてみましょう。

ログアウトされました！「http://localhost:3000/api/user」にアクセスしてもユーザ情報は取得できません。

最後に

いかがでしたか？FacebookログインのAPIはPassportを使うことでいとも簡単に実装できます。まさにサクッとです。この簡単なログイン実装を使わない手はありません。何かサービスを作る時にソーシャルログインとして導入してみてはいかがですか？

環境

PC : macOS High Sierra 10.13.3
Robo 3T : 1.1.1
NodeJS : v9.5.0
Yarn : 1.3.2
express : 4.16.2,
cookie-session : 2.0.0-beta.3,
mongoose : 5.0.7
passport : 0.4.0
passport-facebook : 2.1.1
Docker : 17.12.0-ce
MongoのDockerイメージ : 3.6.2

この記事を書いた人
最新の記事

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。