FirebaseでSSOをやってみた（非推奨）

非推奨としているのはローカルで実験したのみで、セキュリティリスクをあまり考慮していないからです。

最初に

今回のやり方はFirebase公式で紹介されている方法ではないです。
とりあえずローカル環境で動かしたってだけなのでセキュリティについても漏れがあります。
また、参考にした記事にあるcsstは実装していません。もし本番運用される際は理解した上で追加実装してください。

（参考記事で紹介されているcsstはCSRF対策のもので、CSRFトークンではなくJWTで対応したのだと思います）

構成図

実装

Vue

Vue.jsのメインとなるコードはこれだけです。

xxx.js

Copied!

const response = await axios.get('http://localhost:5000/customToken', {withCredentials: true});
firebase.auth().signInWithCustomToken(response.data.firebaseToken);

Tips: ProjectBのAuthenticationにユーザーが存在しなくても、signInWithCustomTokenで認証できます。

Express

• CORS
• サブドメインでクッキーの共有（今回はlocalhostなので関係なし）
  • サブドメインの異なるサービス間で cookie を共有する

最後に

認証周りの実装は考慮することが多くて大変ですね。
ProjectAのAutheticationをAuth0に置き換えれば Sessionを使うことなくSSOの実現が可能です。

Auth0は公式でSSOの実装例、Firebaseとの連携方法も紹介されています。詳しい料金は調べてませんが、月1万、年12万で認証周りのセキュリティが強化でき、保守コストが下がるなら全然安いと感じました。

参考