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

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

まろ

まろ

こんにちは。夏のにおいほど切ないものはないですね。楽しい思い出も、本当にただそれだけでしかなくて、人は離れ離れになって。そこにあるはずないのに何かありそうな、蜃気楼だけを眺めているんです。まろCです。

passportは、node.js用の認証モジュールです。Twitter、Facebookをはじめとした、主要なSNSログインを実装できるのはもちろん、その他多くの認証に対応しています。
その認証を連載でご紹介していきたいと思います。

今回は、第一弾として、Twitterでのログインをnode.jsで実装していきたいと思います。

初回なのでnode.jsとexpressをインストール

expressフレームワークを使用して実装を進めていきたいと思います。

node.jsのインストール

node.jsをインストールしていない環境の方はまず、こちらの記事を参考にインストールします。

せっかくなので話題のiojsを選択すると調子がいいですね。

Twitter Appsにアプリケーションを登録

Twitter Appsからログインさせるアプリケーションを登録していきます。

右上のCreate News Appをクリックして登録していきます。

スクリーンショット 2015-06-02 18.01.23

注意すべきはCallback URLの設定です。
今回はサンプルのため、ドメイン以外は適当な値を入れました。ここを入れておかないと、エラーとなり、Twitterのログイン画面にリダイレクトしません。
そのため、全ての項目に入力して保存すると、「Keys ans Access Tokens」のタブにConsumer Key(API Key)とConsumer Secret(API Secret)とが表示されますので、メモしておきます。アプリケーションに組み込みます。

expressのインストール

以下の手順でアプリケーションのひな形を生成していきます。

$ cd {project dir}
$ npm init //今回は名前を任意にきめたら後はエンター連打でOKです
$ npm install express --save //フレームワークをインストール
$ npm install express-generator -g //ジェネレーターのインストール
$ npm install express -e //ejsのテンプレートでアプリケーションを作成
$ npm install //パッケージをインストール

passportのインストール

認証ライブラリである、passportをnpmからインストールしていきます。
今回はTwitterで認証するため、passport-twitterもインストールします。
セッション管理のモジュールも一緒にインストールしておきましょう。

$ npm install passport --save //passport本体のインストール
$ npm install passport-twitter --save //twitter認証用のインストール
$ npm install express-session --save //セッションモジュール

 

ここまでのディレクトリ構造は以下のようになるかと思います。

├── app.js
├── bin
│   └── www
├── node_modules
│ 
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   ├── oauth.js //後で追加します。
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

ログインボタン画面の作成

この章から、実際にコードを書いていきましょう。
まずは、views/index.ejsを編集してログインボタンを設置。
ちなみに装飾はmaterializecss.comで装飾していきます。
こちらはcdnからの読み込みです。
また、ログイン後はボタンを非表示にして、自身の画像と表示名を表示するようにします。

<% if(Object.keys(session).length > 0) { %>
    <div><img src="<%= session.user.photos[0].value %>"></div>
    <div><%= session.user.displayName %></div>
<% } else { %>
    <a href="/oauth" class="btn-large waves-effect waves-light" style="text-transform: none;">Twitterでログイン</a>
<% } %>

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

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

この記事のシェア数

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

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