LoginSignup
1
2

More than 5 years have passed since last update.

Passport.js の Typetalk 用 Strategy を作った話

Last updated at Posted at 2019-02-02

概要

Passport.js の Typetalk 用 Strategy として passport-typetalk を作ったので紹介する記事です。

前提知識

Typetalk って何?という方は こちら

Passport.js とは?

Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application.

jaredhanson という方が作った Node.js 製の認証用のミドルウェアです。Omniauth の Node.js 版みたいなやつと思ってます。

Strategy って何?

Passport.js にはプラグイン機構があり、認証を行いたいサービスに対応したプラグインを使用することでいわゆる「Facebook でログイン」のような仕組みを手軽に実装することができます。今回、僕が作った passport-typetalk は Typetalk の OAuth2 認証に対応した Strategy となります。

使い方

1) Typetalk でアプリケーションを登録します。
https://typetalk.com/my/develop/applications/register

Screen Shot 2019-02-03 at 2.40.04.png

入力項目
アプリケーション名 passport-typetalk test
Grant Type Authorization Code
ホームページ URL http://localhost:3000
リダイレクト URI http://localhost:3000/auth/typetalk/callback

登録すると、ID などが発行されます。

2) 環境変数を設定します。

$ export TYPETALK_CLIENT_ID=XXXXXXXXXXX # Client ID の値を使ってください
$ export TYPETALK_CLIENT_SECRET={YOUR_TYPETALK_TOPIC_ID} # トピックの ID を記載します。

3) サンプル用のサーバを実装します。

$ touch passport-typetalk.js

サンプルコード

const TypetalkStrategy = require("passport-typetalk").Strategy,
    config = require("./config"),
    express = require("express"),
    passport = require("passport");

var app = express(),
    port = 3000;

passport.use(new TypetalkStrategy({
    "callbackURL": "http://localhost:3000/auth/typetalk/callback",
    "clientID": process.env.clientID,
    "clientSecret": process.env.clientSecret,
    "scope": [
        "my",
        "topic.read"
    ]
}, (accessToken, refreshToken, profile, cb) => cb(null, profile)));

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

passport.deserializeUser(function deserializeUser (obj, cb) {
    cb(null, obj);
});

app.use(require("morgan")("combined"));
app.use(require("cookie-parser")());
app.use(require("body-parser").urlencoded({"extended": true}));
app.use(require("express-session")({
    "resave": true,
    "saveUninitialized": true,
    "secret": "keyboard cat"
}));

app.use(passport.initialize());
app.use(passport.session());

app.get("/", (req, res) => {
    res.send('<a href="/auth/typetalk">Login with Typetalk</a>');
});

app.get("/profile", (req, res) => {
    res.send(`<p>ID: ${req.user.id}</p><p>Name: ${req.user.name}</p>`);
});

app.get(
    "/auth/typetalk",
    passport.authenticate("typetalk")
);

app.get(
    "/auth/typetalk/callback",
    passport.authenticate("typetalk", {"failureRedirect": "/"}),
    (req, res) => {
        res.redirect("/profile");
    }
);

app.listen(port);

4) サーバを起動します。

$ node passport-typetalk.js

5) http://localhost:3000 にアクセスします。

6) "Login with Typetalk" をクリックします。

Screen Shot 2019-02-03 at 2.43.26.png

7) "許可" をクリックします。

Screen Shot 2019-02-03 at 2.43.31.png

8) 認証が完了し、ユーザ情報が表示されます。

Screen Shot 2019-02-03 at 2.43.43.png


手順は以上となります。いかがだったでしょうか?フィードバック歓迎です :pray:

1
2
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
1
2