Help us understand the problem. What is going on with this article?

Sign in with Slack x Firebase Authenticationやってみた話

More than 1 year has passed since last update.

Sign in with Slack x Firebase Authenticationやってみた話

by mogamin3
1 / 17

この資料は5分LT用に作成されたもののため、だいぶ端折って説明されています。

https://yuruhachi-it.connpass.com/event/141835/


Sign in with Slackとは

  • https://api.slack.com/docs/sign-in-with-slack
  • 名前の通り「Slackアカウントを使ったログイン」を実現できる仕組み。
  • (ログイン時に要求する権限によっては)ユーザー情報やチーム情報を取得する事が可能
  • あんまり知られてないような気がした(僕が知らなかっただけかも)

こんなケースに使えそう:thinking:

  • Slackのアカウント情報と連携したWebサービス
  • 社員だけに限定公開するサイト

※ちなみにいろいろサンプルを用意しようとしたら全然間に合いませんでした:sob:


Firebase Authenticationとは

  • DBやらを用意せずとも認証・ユーザーの永続化などを一手にやってくれるFirebaseのサービスの一つ
  • Firebase内の他のサービスの認証にも用いられる
    • Cloud FirestoreやCloud Storageなどで用いられるセキュリティールールなどでも使用するFirebaseの基盤とも言えるサービス
  • 標準でGoogle/Facebook/Twitter等のソーシャルログインに対応している
  • Slackは残念ながら非対応
    • だが、カスタム可能な認証方法が用意されているのでこちらを利用する

カスタム認証について

  • Firebase Authenticationに用意されている認証プロバイダを利用する場合はフロントエンドのコードだけで認証を行う事が可能
// 例えばGoogleログイン
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
  • この方法はカスタム認証では利用できない。

カスタム認証のフロー

  1. サーバーサイドでFirebaseのAdmin SDKを使ってトークンを発行する
  2. トークンをクライアントに受け渡す
  3. クライアントはFirebase SDKのsignInWithCustomTokenメソッドにトークンを渡す

以上のフローでサインインを行う。


今回のケースに当てはめる

B3730765-4CEA-49AF-B732-399230E194AB.jpeg

  1. クライアントからSlackの認証ページへ飛ぶ
  2. ユーザーはSlackの画面でアクセス許可を行う
  3. Slackは認証用codeを載せて指定しておいたリダイレクト先に飛ぶ(今回はCloud Functionsを利用)
  4. codeを使ってSlackユーザーのアクセストークンを取得、必要なら永続化などを行う
  5. FirebaseのAdmin SDKを使ってトークンを発行する
  6. トークンを載せてクライアントにリダイレクト
  7. クライアントはsignInWithCustomTokenメソッドを叩く

コード見た方が簡単だと思うのでもしよろしければ

https://github.com/uutarou10/sign-in-with-slack

サーバサイド(Cloud Functions)とクライアント(React)でどちらもTypeScriptで実装されています。


1. クライアントからSlackの認証ページへ飛ぶ

  • 事前にSlack Appを作成しておく
    • 必要な権限を付与しておく

image.png

  • あとは slack.com/oauth/authorize?client_id=CLIENT_ID&scope=identity.basic Slack指定のURLへのリンクを用意しておく

2. ユーザーはSlackの画面でアクセス許可を行う

image.png


3. Slackは認証用codeを載せて指定しておいたリダイレクト先に飛ぶ

  • ユーザーが許可を行うと、指定しておいたリダイレクト先に飛ぶ
    • ここだけ唯一サーバーサイドが必要となるのでFirebase Cloud Functionsを利用
  • その際にcodeというクエリパラメータで認証用の一時的なトークンを渡してくる

4. ユーザーのアクセストークンを取得、永続化

  • 先ほどのcodeを使ってoauth.accessというエンドポイントへリクエストを投げると、アクセストークンを取得できる
  • 必要であれば永続化処理などを行う

5. FirebaseのAdmin SDKを使ってトークンを発行する

  • FirebaseのAdmin SDKを使ってFirebase Authenticationのカスタムトークンを作成する
const customToken = await admin.auth().createCustomToken(userCredential.user_id);

createCustomTokenメソッドにuidを渡すことで作成する。

uidは一意である必要があるので、今回はSlackのuser_idをそのまま渡した。


6. トークンを載せてクライアントにリダイレクト

const url = new URL(redirectUri);
url.search = `t=${customToken}`;
res.redirect(303, url.toString());

今回はクエリパラメータに入れてリダイレクト。


  1. クライアントはsignInWithCustomTokenメソッドを叩く
const queryPrams = new URLSearchParams(window.location.search);
const token = queryPrams.get('t');

if (token) {
  window.history.replaceState(undefined, window.document.title, window.location.href.replace(window.location.search, ''));
  await firebase.auth().signInWithCustomToken(token);
}

ハマったところ・注意すべきところ

  • Cloud FunctionsからGoogle外のAPI(Slack API)を叩くにはBlazeプラン(従量課金プラン)にする必要あり
    • もちろん無料枠はあるので滅多なことでは課金されない:heart:
  • カスタムトークンを作る場合は、GCPのIAMの画面でサービスアカウントに権限をつける必要あり
    • めっちゃハマった
    • ここに思いっきり書いてた。ドキュメントをしっかり読もう。。。

所感

  • 基本的にはドキュメントに書いてあるフローをそのまま実装すれば動く
  • Slack APIは実に様々な操作ができるので、付ける権限によってはかなり面白いことが色々できそう
  • サンプル用意全然間に合わなかった:sob:
mogamin3
fringe81
Fringeは、最新のテクノロジーとプロフェッショナルによるサービスにより、社会課題に仮説を立てて市場に広げていくことで、数十年という長期的なスパンで価値を生み出し続け、より良い世界を創る集団です。 既存の領域に限らず、時流を読み、仮説を生み出し、テクノロジーの力で優れたサービスを生み出し続けます。
https://www.fringe81.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした