サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express
-
Upload
takahiro-yamaguchi -
Category
Technology
-
view
1.231 -
download
2
Transcript of サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express
![Page 1: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/1.jpg)
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
株式会社パエリア@hiro93n | やまぐちたかひろ
2016/2/9 Node学園 19時限目
1
![Page 2: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/2.jpg)
自己紹介
2
IoTのサービスデザインとか考えてるUXデザイナー兼エンジニア。
バズワード過ぎるのがつらいです。
@hiro93nやまぐち たかひろ Node.js歴ゆるく1年くらい
![Page 3: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/3.jpg)
3
ステッカーで威嚇する日々
![Page 4: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/4.jpg)
なおイカはよわいです
4
![Page 5: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/5.jpg)
さる2016年新春
![Page 6: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/6.jpg)
チーム系ドキュメントサービスを作った
• 世の中のドキュメントサービスでも良かったが記事に個別権限をつけられるものがなかった
• この際、リビングデッドになっていた既存サービスのリソースをこの際活用したかった
• 会社のリソースは使えないのでひとりで開発
6
![Page 7: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/7.jpg)
7
チーム管理
![Page 8: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/8.jpg)
権限管理
![Page 9: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/9.jpg)
ざっくり構成と開発内容
9
app (express4)
db1
User Team
Docs Tags
• アプリケーションは共通 • UserとTeamは共通 • 記事やTagなどはチーム属性持ち
• 元々のappに対しTeamに関わるModel、機能を追加
db2db(mongodb)
redisElastic search
![Page 10: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/10.jpg)
チーム機能に必要としたもの
10
•チームの作成手段 •チームの管理手段(メンバー入替)
•記事の閲覧権限管理手段
![Page 11: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/11.jpg)
チームとドメイン
11
統一App
http://hoge.co.tumin.jp
チームA
http://teamA.co.tumin.jp
teamAApp
サブドメインを各チームに割り振り利用
![Page 12: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/12.jpg)
チーム作成のフロー
1. ユーザがチームドメインを入力する
2. ドメインが使われてないかチェックする
3. 問題なければユーザがログイン or ユーザ登録
で認証した上でチームをdbに登録する
4. チーム利用開始
12
![Page 13: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/13.jpg)
チーム作成時の認証でのOAuth
• アカウント開設時にURLの指定を求められる
• サブドメインは日々増えて行く
•サブドメイン分のアカウントが必要になる???
13
![Page 14: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/14.jpg)
3大OAuthで試してみた
![Page 15: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/15.jpg)
15
🙆App Domainsにサブドメイン指定で解決
![Page 16: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/16.jpg)
16
そもそもサブドメインを入れるところがない😇
![Page 17: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/17.jpg)
17
🙆callbackロックなし設定にすれば解決
![Page 18: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/18.jpg)
GitHub
18
救いなし😇
![Page 19: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/19.jpg)
結果
19
直接指定サイト
サブドメインサイト
Facebook 🙆ログイン可能 🙆ログイン可能
Twitter 🙆ログイン可能 🙆ログイン可能(他でもOK)
GitHub 🙆ログイン可能 ログイン不可😇
![Page 20: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/20.jpg)
ドメインの厳しさ問題
• Facebook、Twitterはユーザー自身で設定を変更することによりサブドメイン利用できるがGithubはドメインどころがディレクトリまで前方一致していないとURI mismatchで怒られる
• そう思うと、local(mail)がある意味一番気楽にできます。Slackもmailですしね…
20
![Page 21: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/21.jpg)
じゃあ、GitHubの場合無理なの?
• アカウントログインを司るアプリがcallbackを受け取った後、新たにサブドメインにセッションを渡し、リダイレクトさせればOK
• セッションのサブドメイン対応としてはexpress-
sessionのcookieにサブドメイン指定する方法がある(“session passport subdomain”などで検索)
21
![Page 22: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/22.jpg)
ちなみにGoogleも実装してみて調べた
22
サブドメイン許されず😇
![Page 23: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/23.jpg)
Google login実装にも罠
• Googleでの認証をしようとする場合はOAuthクライアントIDの取得だけでなくGoogle+ APIを有効化する必要がある
• passport公式サイトで勧められる`passport-
google-oauth`にはドキュメントがないので頑張りましょう><
23
![Page 24: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/24.jpg)
余談:既存サービスを社内流用する効果
• 元々自分が書いたコードではなかったこともあり、コードを深く読まないとまず書けない。結果的に引き出しがかなり増える
• 元々のサービスデザインの無駄を発見でき、いろんな意味で反省できる
• 既存サービスで利用しているnpm modulesのバージョンアップについて地雷を先行して踏める
24
![Page 25: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/25.jpg)
よかったら触ってみてください
25
ツーミンCo|http://hoge.tumin.jp
![Page 26: サブドメイン前提のチーム機能開発で踏んだOAuthの罠の話 in express](https://reader033.fdocuments.net/reader033/viewer/2022042515/58a997671a28abc2518b51b3/html5/thumbnails/26.jpg)
えんじょい!