【連載第2回】passportを使ってoauth認証を実装してみよう【Facebook編】

【連載第2回】passportを使ってoauth認証を実装してみよう【Facebook編】

まろ

まろ

こんにちは。エンジニアのまろCです。
前回から始まったpassportを使ったoauth認証実装コラムの第二弾です。
第一弾はこちら。

今回はFacebook認証を実装していきたいと思います。
前回のソースに追記していく形となりますので、node.jsの準備、プロジェクトの作成は前回の記事を参照ください。
それでは、早速進めていきましょう!

Facebook Developerにアプリケーション登録

まずは、こちらのURLにアクセスします。

※執筆時のアプリケーション取得方法です。変更があった場合は、適宜読み替えてください。

また、Facebook連携をするときのアプリケーション登録はほとんどこの方法でできるので、今回以外の場合にも役に立つかと思います。

 

スクリーンショット 2015-08-03 17.59.09

新しく、アプリケーションを登録するので、上部メニューの「My Apps」から「Add a New App」を選択します。

 

スクリーンショット 2015-08-03 17.59.20

プラットフォームはウェブサイトを選択します。

 

スクリーンショット 2015-08-03 17.59.43

アプリ名は今回適当に設定しますが、本番ではドメインやサービス名を登録します。

 

スクリーンショット 2015-08-03 18.00.09

カテゴリも同じく、サービスにあったものを選択します。

 

スクリーンショット 2015-08-03 18.00.50

Tell us about your websiteの項目には、自分で持っているサイトを入力します。
ただし、ログイン画面のドメインと一致してる必要がありますので、ローカルでテストする場合は、http://localhost:3000と入力する必要があります。
今回は、「localhost:3000」と入力します。

ここまでが登録フローです。

 

スクリーンショット 2015-08-03 18.05.48

実装に必要なものは、「App ID」と「App Seacret」になりますので、画面上部のメニューの「My Apps」から、先ほど登録したアプリケーション、「login-test」を選択します。すると、「App ID」と「App Seacret」が表示されますので、メモします。

passport-facebookのインストール

今回使用するモジュールはnpmからインストールします。
プロジェクトのディレクトリに移動して、以下のコマンドを叩きます。

$ npm install passport-facebook --save

こちらの準備はこれでOKです。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

フロントエンドエンジニアのまろCです。 コンセプト設計中心でものづくりしています。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL