サブドメイン前提のチーム機能開発で踏んだoauthの罠の話 in express

サブドメイン前提のチーム機能開発で踏んだ

OAuthの罠の話 in express

株式会社パエリア@hiro93n | やまぐちたかひろ

2016/2/9 Node学園 19時限目

1

自己紹介

2

IoTのサービスデザインとか考えてるUXデザイナー兼エンジニア。

バズワード過ぎるのがつらいです。

@hiro93nやまぐち たかひろ Node.js歴ゆるく1年くらい

3

ステッカーで威嚇する日々

　なおイカはよわいです

4

さる2016年新春

チーム系ドキュメントサービスを作った

• 世の中のドキュメントサービスでも良かったが記事に個別権限をつけられるものがなかった

• この際、リビングデッドになっていた既存サービスのリソースをこの際活用したかった

• 会社のリソースは使えないのでひとりで開発

6

7

チーム管理

権限管理

ざっくり構成と開発内容

9

app (express4)

db1

User Team

Docs Tags

• アプリケーションは共通 • UserとTeamは共通 • 記事やTagなどはチーム属性持ち

• 元々のappに対しTeamに関わるModel、機能を追加

db2db(mongodb)

redisElastic search

チーム機能に必要としたもの

10

•チームの作成手段 •チームの管理手段（メンバー入替）

•記事の閲覧権限管理手段

チームとドメイン

11

統一App

http://hoge.co.tumin.jp

チームA

http://teamA.co.tumin.jp

teamAApp

サブドメインを各チームに割り振り利用

チーム作成のフロー

1. ユーザがチームドメインを入力する

2. ドメインが使われてないかチェックする

3. 問題なければユーザがログイン or ユーザ登録

で認証した上でチームをdbに登録する

4. チーム利用開始

12

チーム作成時の認証でのOAuth

• アカウント開設時にURLの指定を求められる

• サブドメインは日々増えて行く

•サブドメイン分のアカウントが必要になる？？？

13

３大OAuthで試してみた

Facebook

15

🙆App Domainsにサブドメイン指定で解決

Twitter

16

そもそもサブドメインを入れるところがない😇

Twitter

17

🙆callbackロックなし設定にすれば解決

GitHub

18

救いなし😇

結果

19

直接指定サイト

サブドメインサイト

Facebook 🙆ログイン可能 🙆ログイン可能

Twitter 🙆ログイン可能 🙆ログイン可能(他でもOK)

GitHub 🙆ログイン可能 ログイン不可😇

ドメインの厳しさ問題

• Facebook、Twitterはユーザー自身で設定を変更することによりサブドメイン利用できるがGithubはドメインどころがディレクトリまで前方一致していないとURI mismatchで怒られる

• そう思うと、local(mail)がある意味一番気楽にできます。Slackもmailですしね…

20

じゃあ、GitHubの場合無理なの？

• アカウントログインを司るアプリがcallbackを受け取った後、新たにサブドメインにセッションを渡し、リダイレクトさせればOK

• セッションのサブドメイン対応としてはexpress-

sessionのcookieにサブドメイン指定する方法がある(“session passport subdomain”などで検索)

21

ちなみにGoogleも実装してみて調べた

22

サブドメイン許されず😇

Google login実装にも罠

• Googleでの認証をしようとする場合はOAuthクライアントIDの取得だけでなくGoogle+ APIを有効化する必要がある

• passport公式サイトで勧められる`passport-

google-oauth`にはドキュメントがないので頑張りましょう><

23

余談：既存サービスを社内流用する効果

• 元々自分が書いたコードではなかったこともあり、コードを深く読まないとまず書けない。結果的に引き出しがかなり増える

• 元々のサービスデザインの無駄を発見でき、いろんな意味で反省できる

• 既存サービスで利用しているnpm modulesのバージョンアップについて地雷を先行して踏める

24

よかったら触ってみてください

25

ツーミンCo｜http://hoge.tumin.jp

えんじょい！