「Passport」の記事 - Crieit

slack流量計ver3をリリースしました。

2020-04-27T21:53:23+09:00

slack流量計とは

サービス運営者コミュニティ「運営者ギルド」のslackの統計情報を可視化するアプリケーションです。

ver2リリース記事

ver3で何が変わったの？

VPSに移設

これまでslackに統計情報を集計するbotアプリケーションとして運用していましたが、サーバをVPSに移設しました。

WEBアプリケーション化

貴重なslackのリソースを消費せずにWEBで閲覧できるようになりました。(要slackサインイン)

puppeteerでのスクリーンショットは廃止

使っている技術

ReactJS
NodeJS/Express/TypeScript
passport
node-cron
chart.js
slack/client

技術的な話

react-bootstrap-table2をbootstrap CSSを適用せずに作る

分析機能を作ることが多いので、表を多用するのですが、react-bootstrap-table2というコンポーネントを結構使っています。

これまではbootstrap CSSを適用した後にこれでもかというぐらいCSSを上書きしていたのですが、今回は自力でキャレットを実装できました。
ページネーションもlist-style-type: none;に気づいてサクサク実装。
CSSいじるの楽しい！

th{
    font-size: 12px;
    .dropdown>.caret{
        &::after{
          font-family: "Font Awesome 5 Free";
          content: "\f0d7";  
        }
    }
    .dropup>.caret{
      &::after{
        font-family: "Font Awesome 5 Free";
        content: "\f0d8";  
      }
    }
    .caret{
      &::after{
        font-family: "Font Awesome 5 Free";
        content: "\f0d7";  
      }
    }
  }

  ul.pagination{
  display: flex;
  list-style-type: none;
  text-align: center;
  li.page-item{
    >a.page-link{
      text-decoration: none;
      background-color: #555555;
      padding: 3px;
      margin-right: 3px;
      color: white;
    }
    &.active > a.page-link{
      text-decoration: none;
      background-color: #bfbfbf;
      padding: 3px;
      margin-right: 3px;
      color: #555555;
    }
  }
}

passportを使ったslackサインインの実装

これは前回twitterサインインの実装をしたのが役に立ちました。

以下ソース抜粋

import passportConfig from './passportConfig';
import * as session from 'express-session';
const MySQLStore = require('express-mysql-session')(session);
passportConfig();
const passport = require('passport');

app.use(passport.initialize());
app.use(passport.session()); 
app.use(
  session({
    secret: '＊＊＊＊＊＊',
    resave: false,
    store: new MySQLStore(dbConfig),
    saveUninitialized: false,
    cookie:{
      httpOnly: false,
      secure: false,
      maxage: 1000 * 60
    }
  })
);

passport-slackはシリアライズ/デシリアライズを使っていないようなので、
実装個所は変わりますが、認証が成功した際にセッションに情報を格納するといけました。

(req: Request, res) => {
        req.session.user = req.account;
        res.redirect(BACKEND);
      }

React/NodeJS/Passportでtwitterログインを実装してみた

2020-04-14T20:37:13+09:00

こちらの記事をベースにしてReactJS/NodeJSのシステムにtwitterログインを組み込んでみた。
https://qiita.com/itagakishintaro/items/e5a0481b51e6a17b304c

主に異なるのは型指定が緩めななんちゃってtypescriptを使っているところか。

実装したもの

蓋々交換機能

https://cap-baseball.com/cap_exchange

技術的なこと

passport-config.ts

export default function passportConfig() {
  var TWITTER_CONSUMER_KEY = "*****";
  var TWITTER_CONSUMER_SECRET =   "*******";
  var passport = require("passport"),
    TwitterStrategy = require("passport-twitter").Strategy;

  // Sessionの設定
  passport.serializeUser(function (user, done) {
    done(null, user);
  });
  passport.deserializeUser(function (obj, done) {
    done(null, obj);
  });

  passport.use(
    new TwitterStrategy(
      {
        consumerKey: TWITTER_CONSUMER_KEY,
        consumerSecret: TWITTER_CONSUMER_SECRET,
        callbackURL: "https://********/auth/twitter/callback",
      },
      function (token, tokenSecret, profile, done) {
        passport.session.user = profile;

        // tokenとtoken_secretをセット
        profile.twitter_token = token;
        profile.twitter_token_secret = tokenSecret;
        process.nextTick(function () {
          return done(null, profile);
        });
      }
    )
  );
}

auth.ts

NodeJSでtwitter認証からのコールバックなどを担当するコントローラ。

import * as express from "express";
import * as session from 'express-session'; 
import { Request } from "./interface/express.Request";
const passport = require("passport");

export class Auth{
    public router: express.Router;
    constructor() {
        this.router = express.Router();
        this.router.get("/twitter", passport.authenticate('twitter'));
        this.router.get("/twitter/success", this.success);
        this.router.get("/twitter/callback",
                passport.authenticate('twitter', 
                    { successRedirect: 'https://******/api/v2/auth/twitter/success',
                      failureRedirect: 'https://******/' })
        )}


    private success(req:Request,res:express.Response):void{
       if(req.session.passport !== undefined){
        res.json(req.session.passport.user.username);
       }else{
           res.sendStatus(401);
       }
    }
}

express.Requestインターフェースの拡張

import * as Express from 'express';
export interface Request extends Express.Request {
 session:any;
}

app.ts

import { Auth } from './auth';
import * as session from 'express-session';
import passportConfig from './passport-config';
passportConfig();
const passport = require("passport");

app.use(passport.initialize()); 
app.use(passport.session()); 
app.use(
  session({
    secret: '********',
    resave: false,
    saveUninitialized: false,
    cookie:{
      httpOnly: true,
      secure: true,
      maxage: 1000 * 60 * 30
    }
  })
);

ReactでNodeJS/Passportから認証情報を受け取る

credentialsオプションが必要。

  const response = await fetch('/auth/twitter/success',
  {
    method:'GET',
    credentials: "include",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      "Access-Control-Allow-Credentials": true
    }
  });

認証が終わったタイミングで認証情報を受け取る

認証のためのウインドウを開き、
そのウインドウが閉じられたタイミングで親の画面をリロードする。
リロードの際に認証情報を受け取っている。

onClick={()=>{
                    const authWindow = window.open('/auth/twitter','newTab');
                    var timer = setInterval(function() { 
                        if(authWindow.closed) {
                            clearInterval(timer);
                            window.location.reload();
                        }
                    }, 1000);
                }}

PassportでTwitterに遷移する前に処理を行う

2019-03-09T01:04:54+09:00

PassportでのTwitterログインは簡単にできるようになっているが、公式のマニュアルだと説明が簡単すぎて、Twitterに遷移する前に処理を入れたい場合にどうすればいいか分かりづらい。

例えばログイン時にいたページに戻るためにパラメータにURLを渡して、ログイン後はそこに戻りたい場合。URLをセッションに保存しておきたいので処理を入れたい。

結局authenticateはMiddlewareを返すだけなので処理をしたあとそれを呼べばよいだけ。

  app.get('/auth/twitter', (req, res, next) => {
    if (req.query.back) {
      req.session.loginBack = req.query.back
    }
    passport.authenticate('twitter')(req, res, next)
  })

passport-twitterでFailed to find request token in sessionエラー

2019-02-13T21:59:32+09:00

久しぶりにpassport-twitterを使ってみたところ、Failed to find request token in sessionというエラーが出てログインができませんでした。

このエラーを調べてみると、だいたいよく見つかる情報として、localhostだったのに127.0.0.1に戻って来てるから、とか、とりあえず127.0.0.1に統一しておけばいい、のような情報が見つかります。

しかし今回はどうも統一してもうまくいかずエラーが改善しなかったため、他に原因がありそうでした。

詳しくはわかりませんが、セッションの設定を下記のようにすることで改善しました。

app.use(
  require('express-session')({
    secret: process.env.APP_KEY,
    resave: true,
    saveUninitialized: false,
    cookie: { secure: process.env.NODE_ENV == 'production' }
  })
)

resave, saveUninitialized, cookieを上記のように指定しています。元々resaveとsaveUninitializedはデフォルトがあるだろうしそのままでいいだろう、と思って省略していたのですが、よくよく見るとビルド時に下記のようなログが出ていました。

express-session deprecated undefined resave option; provide resave option server/index.ts:46:35
express-session deprecated undefined saveUninitialized option; provide saveUninitialized option server/index.ts:46:35

READMEに

The default value is true

とあったのでデフォルトがあると思っていたのですが、よくよく続きを読むと

The default value is true, but using the default has been deprecated

ということで無指定はdeprecatedでした。よくよく調べ直して設定してみたところうまく動くようになりました。とりあえずsaveUninitializedがデフォルトと違うようなのでこちらが問題だったのかもしれません（正直このオプションによる挙動の違いはマニュアルを見ても全くわからないのですが…）。何にしろ同様のパターンでうまくいかない方はこのあたりを調整してみると良いかもしれません。

ちなみに、express-mysql-sessionを使用した時はresaveはtrueにしないと保存したセッション情報を何度も別のもので上書きしてしまうようでした。使用しているstoreによっても変わってくるようなので適宜確認して見る必要がありそうです。

Nuxt.js+Expressで簡単にTwitter認証

2018-08-16T12:02:02+09:00

Nuxt.jsとExpressでアプリケーションを作成する場合のTwitter認証でのログインを試してみました。Node.jsでのTwitter認証はPassportというライブラリを使用すると非常に簡単でした。細かく検証はしていませんがSSR（サーバーサイドレンダリング）の場合でも問題ないと思われます。

このあたりで作ったプロジェクトをベースにして試しています。

Nuxt.js+Expressでとにかく簡単にORM

Nuxt.js v1.4.2
Passport-twitter v1.0.4

インストール

何はともあれまずはインストールします。Passport本体とTwitter用の拡張です。

基本的なところは公式のマニュアル通りですので、よくわからなくなった場合やバージョンが違う場合はそちらを参考にしてください。

Documentation: Twitter

yarn add passport passport-twitter

初期設定

Passportの設定

まずはplugins/passport.jsとして初期化スクリプトを作成します。TWITTER_CONSUMER_KEY等は環境変数として指定しておいてください。（dotenv等を使うと便利です）

下記はSequelizeでユーザーデータとして保存する場合のサンプルも入れています。

var passport = require("passport"),
  TwitterStrategy = require("passport-twitter").Strategy;

module.exports = function(app) {
  const models = app.get("models");
  const User = models.User;

  passport.use(
    new TwitterStrategy(
      {
        consumerKey: process.env.TWITTER_CONSUMER_KEY,
        consumerSecret: process.env.TWITTER_CONSUMER_SECRET,
        callbackURL: `${process.env.APP_URL}/auth/twitter/callback`,
        includeEmail: true // メールアドレスが必要な場合
      },
      async function(token, tokenSecret, profile, done) {
        let user = await User.findOne({
          where: { twitter_id: profile.id }
        });

        if (!user) {
          user = User.build({
            unique_id: profile.username,
            name: profile.displayName,
            email: profile.emails[0].value,
            location: profile._json.location,
            bio: profile._json.description,
            url: profile._json.url,
            image: profile.photos[0].value,
            twitter_id: profile.id,
            twitter_token: token,
            twitter_secret: tokenSecret
          });
          await user.save();
        }

        done(null, user.get({ plain: true }));
      }
    )
  );

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

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

  return passport;
};

認証用ルーティング

認証用のルーティングを作成します。今回はroutes/auth.jsとしてファイルを分けました。アクションにそのままPassportの処理を指定するようなので下記のようにしてルーティング設定全体を関数化して読み込む形にしました。

const { Router } = require("express");

module.exports = function(app, passport) {
  const router = Router();

  router.get("/twitter", passport.authenticate("twitter"));

  router.get(
    "/twitter/callback",
    passport.authenticate("twitter", {
      successRedirect: "/",
      failureRedirect: "/"
    })
  );

  app.use("/auth", router);
};

アプリケーションに組み込み

これらをserver/index.jsで読み込んでアプリケーションに組み込みます。

const passport = require("../plugins/passport")(app);

app.use(
  session({
    secret: "your secret"
  })
);
app.use(passport.initialize());
app.use(passport.session());

require("../routes/auth")(app, passport);

基本的な部分はこれで完了です。あとは実際に動かしていくための処理を入れていきます。

Nuxt.jsと連携させる

PassportでのログインはExpress側のセッションに保存しているだけのため、これをNuxt.js側にも渡します。アプリケーション全体に絡むことのため、Storeを使ってNuxt.js上のどこからでもアクセスできるようにします。Nuxt.jsの場合は下記のように適当にファイルを一つ追加するだけで簡単にStoreが利用できます。

store/index.js

export const state = () => ({
  authUser: null
});

export const mutations = {
  setUser(state, authUser) {
    state.authUser = authUser;
  }
};

export const actions = {
  nuxtServerInit({ commit }, { req }) {
    if (req.session.passport && req.session.passport.user) {
      commit("setUser", req.session.passport.user);
    }
  }
};

Storeの場合setUserでなくSET_USERが使われることが多い気がします。

あとはもう下記のようにゆるふわな感じで適当にログインしているか判断できます。

スクリプト側でもthis.$store.state.authUserみたいな感じで利用できます。

まとめ

荒い感じの書き方も一部あるかもしれませんが、とりあえず非常に簡単にTwitterログインを行ってNuxt.jsと連携させることができました。また動きのおかしいところなどあれば随時追記していきます。

他にもGoogleアカウントのログインなども公式のドキュメントに書かれています。