SlideShare ist ein Scribd-Unternehmen logo
1 von 18
Downloaden Sie, um offline zu lesen
Firebase Authを
Nuxt + Railsの自前サービス
に導入してみた
澤井 友恵
@tomoeine
自己紹介
フリーランスWebエンジニア
澤井友恵 @tomoeine
エンジニアとしての黒歴史
● 【高校中退】趣味のHP制作
● 【大学】零細Web広告会社で1人システム部門バイト
● 【東京社会人】大手SIerに5年間SEとして勤務
● 【宮崎】2016年~ 地元勤務(Web系自社サービス)
● 【フリーランス】2018年~ 山の中で在宅ワーク
最近触るもの
● Laravel、Rails、Vue.js、AWS
宮崎の岩は最高!
自己紹介
アジェンダ
● Firebase Authenticationとは?
● ゆるすけの紹介
● NuxtでFirebase Authを使う
● 自前のバックエンド(Rails)と連携する
● まとめ
アジェンダ
Firebase Authenticationとは?
アジェンダ
● ログイン機能が簡単に作れる
● メール&パスワードや各種SNSログインに対応
● Firebaseの各サービスと連携できる
Firebase Authentication とは?
「ゆるすけ」で検索!
ゆるくスケジュール共有する「ゆるすけ」
Stripe PHP vs Laravel Cashier
$yarn add firebase
NuxtにFirebase Authを導入する
割愛
「Firebase Auth Nuxt」でググると良い記事がたくさんでてきます

自前のバックエンド(Rails)
と連携する
Stripe PHP vs Laravel Cashier自前のバックエンドと連携
Nuxtでログインできたし、
あとはバックエンドと連携するだけやな・・・
SorceryやDevise使えないのは不便やが、
まぁなんとかなるやろ・・・(課題1)
JWTのIDトークンをNuxtからRailsに渡して、
Rails側で検証して・・・ん??
Stripe PHP vs Laravel CashierRailsアプリでIDトークンを検証したい①
①認証

②IDトークン

(JWT)返却

③IDトークン

④IDトークン検証

⑤ログイン成功

Stripe PHP vs Laravel CashierRailsアプリでIDトークンを検証したい②
これこれ!!
https://firebase.google.com/docs/auth/admin/verify-id-tokens?hl=ja
https://firebase.google.com/docs/admin/setup/?hl=ja
Rubyがない!!!!
(課題2)
Stripe PHP vs Laravel Cashier認証Gemどうするの問題(課題1)
Q. SorceryやDeviseなしでも認証周り楽にする方法ないの?(課題1)
A. 「Knock」が使えました😆
Stripe PHP vs Laravel CashierAPIモードの認証ならKnock
APIモードのRailsアプリで、JWT認証が手軽にできるやつ
class Api::V1::HogePiyoController < ApplicationController
before_action :authenticate_user
def show
p current_user.id
end
Stripe PHP vs Laravel CashierRuby用のAdmin SDKない問題(課題2)
Q. Ruby用のFirebase Admin SDKがないみたいだけど、JWTの検証どうす
るの?(課題2)
A. 検証ぐらい自前でいったれ💪
 (対応言語で実装してごにゃごにゃ連携するのもあり?)
Stripe PHP vs Laravel CashierKnockのちからを借りつつJWT検証
ApplicationController
# Knockの認証メソッドをオーバーライド
module Knock::Authenticable
def define_current_entity_getter(entity_class, getter_name)
# 中略
response = client.get("https://www.googleapis.com/robot/v1/metadata/x509/securetoken@system.gserviceaccount.com")
jwks_raw = response.body
JSON.parse(jwks_raw).each do |_key, key_string|
jwks_string = key_string.gsub("-----BEGIN CERTIFICATE-----", "").gsub("-----END CERTIFICATE-----", "").delete("n")
Knock.token_signature_algorithm = "RS256"
Knock.token_public_key = OpenSSL::X509::Certificate.new(Base64.decode64(jwks_string)).public_key
begin
@payload = Knock::AuthToken.new(token: token).entity_for(entity_class)
break if @payload.present?
rescue
next
end
KnockにはJWTを公開鍵で検証する仕組みが備わっていますが、 公開鍵が固定になる

一方Firebaseの公開鍵は定期的に変更されるので、 動的に取得する必要がある

(遅くなるので鍵はキャッシュしておくと良い!) 

Stripe PHP vs Laravel Cashierログイン&新規登録
User.rb
def self.from_token_payload(payload)
// Userが入れば取得
user = find_by(sub: payload["sub"])
// いなければ新規作成
user || create!(sub: payload["sub"],
user_name: payload["name"][0..29],
remote_image_url: payload["picture"].sub(/_normal./, "_bigger."))
end
アジェンダ
● SPA+自前のバックエンド環境でも、
Firebase Authが使えた!
● RailsならKnockがオススメ!
● ただし少々の力技が伴う
まとめ
ご清聴ありがとうございました🙌
澤井 友恵
@tomoeine
Firebase Authを
Nuxt + Railsの自前サービス
に導入してみた

Weitere ähnliche Inhalte

Was ist angesagt?

Elasticsearch の検索精度のチューニング 〜テストを作って高速かつ安全に〜
Elasticsearch の検索精度のチューニング 〜テストを作って高速かつ安全に〜Elasticsearch の検索精度のチューニング 〜テストを作って高速かつ安全に〜
Elasticsearch の検索精度のチューニング 〜テストを作って高速かつ安全に〜Takahiko Ito
 
DeNAのインフラ戦略 〜クラウドジャーニーの舞台裏〜 [DeNA TechCon 2019]
DeNAのインフラ戦略 〜クラウドジャーニーの舞台裏〜 [DeNA TechCon 2019]DeNAのインフラ戦略 〜クラウドジャーニーの舞台裏〜 [DeNA TechCon 2019]
DeNAのインフラ戦略 〜クラウドジャーニーの舞台裏〜 [DeNA TechCon 2019]DeNA
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean ArchitectureAtsushi Nakamura
 
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)NTT DATA Technology & Innovation
 
Heroku connect 苦肉の四苦八苦
Heroku connect 苦肉の四苦八苦Heroku connect 苦肉の四苦八苦
Heroku connect 苦肉の四苦八苦Hideki Ohkubo
 
BuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルドBuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルドAkihiro Suda
 
REST API のコツ
REST API のコツREST API のコツ
REST API のコツpospome
 
人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with KarateTakanori Suzuki
 
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24Shin Ohno
 
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターンFluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターンKentaro Yoshida
 
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜Yoshiki Nakagawa
 
Redisの特徴と活用方法について
Redisの特徴と活用方法についてRedisの特徴と活用方法について
Redisの特徴と活用方法についてYuji Otani
 
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティスAWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティスAkihiro Kuwano
 
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割Recruit Lifestyle Co., Ltd.
 
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 3.7.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 3.7.0対応)FIWARE Orion Context Broker コンテキスト情報管理 (Orion 3.7.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 3.7.0対応)fisuda
 
Webアプリでパスワード保護はどこまでやればいいか
Webアプリでパスワード保護はどこまでやればいいかWebアプリでパスワード保護はどこまでやればいいか
Webアプリでパスワード保護はどこまでやればいいかHiroshi Tokumaru
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなKentaro Matsui
 
メタプログラミングって何だろう
メタプログラミングって何だろうメタプログラミングって何だろう
メタプログラミングって何だろうKota Mizushima
 

Was ist angesagt? (20)

Elasticsearch の検索精度のチューニング 〜テストを作って高速かつ安全に〜
Elasticsearch の検索精度のチューニング 〜テストを作って高速かつ安全に〜Elasticsearch の検索精度のチューニング 〜テストを作って高速かつ安全に〜
Elasticsearch の検索精度のチューニング 〜テストを作って高速かつ安全に〜
 
DeNAのインフラ戦略 〜クラウドジャーニーの舞台裏〜 [DeNA TechCon 2019]
DeNAのインフラ戦略 〜クラウドジャーニーの舞台裏〜 [DeNA TechCon 2019]DeNAのインフラ戦略 〜クラウドジャーニーの舞台裏〜 [DeNA TechCon 2019]
DeNAのインフラ戦略 〜クラウドジャーニーの舞台裏〜 [DeNA TechCon 2019]
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
 
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
 
Heroku connect 苦肉の四苦八苦
Heroku connect 苦肉の四苦八苦Heroku connect 苦肉の四苦八苦
Heroku connect 苦肉の四苦八苦
 
BuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルドBuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルド
 
REST API のコツ
REST API のコツREST API のコツ
REST API のコツ
 
人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate
 
Keycloakのステップアップ認証について
Keycloakのステップアップ認証についてKeycloakのステップアップ認証について
Keycloakのステップアップ認証について
 
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24
 
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターンFluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
 
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
 
Redisの特徴と活用方法について
Redisの特徴と活用方法についてRedisの特徴と活用方法について
Redisの特徴と活用方法について
 
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティスAWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
 
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajpAt least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
 
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
 
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 3.7.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 3.7.0対応)FIWARE Orion Context Broker コンテキスト情報管理 (Orion 3.7.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 3.7.0対応)
 
Webアプリでパスワード保護はどこまでやればいいか
Webアプリでパスワード保護はどこまでやればいいかWebアプリでパスワード保護はどこまでやればいいか
Webアプリでパスワード保護はどこまでやればいいか
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
メタプログラミングって何だろう
メタプログラミングって何だろうメタプログラミングって何だろう
メタプログラミングって何だろう
 

Ähnlich wie Firebase Authを Nuxt + Railsの自前サービス に導入してみた

在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選Tomoe Sawai
 
5分で伝えるAWS
5分で伝えるAWS5分で伝えるAWS
5分で伝えるAWSTomoe Sawai
 
田舎暮らし流エンジニアスキルアップ術
田舎暮らし流エンジニアスキルアップ術田舎暮らし流エンジニアスキルアップ術
田舎暮らし流エンジニアスキルアップ術Tomoe Sawai
 
メンバーズグループ福岡Meetup/メンバーズエッジに入社して変わったこと
メンバーズグループ福岡Meetup/メンバーズエッジに入社して変わったことメンバーズグループ福岡Meetup/メンバーズエッジに入社して変わったこと
メンバーズグループ福岡Meetup/メンバーズエッジに入社して変わったことMembers_corp
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情Naoki Yamada
 
2020/9/30 【エンジニア起業】小規模スタートアップがウェブサービス(SocialDog)を軌道に乗せるまで
2020/9/30 【エンジニア起業】小規模スタートアップがウェブサービス(SocialDog)を軌道に乗せるまで2020/9/30 【エンジニア起業】小規模スタートアップがウェブサービス(SocialDog)を軌道に乗せるまで
2020/9/30 【エンジニア起業】小規模スタートアップがウェブサービス(SocialDog)を軌道に乗せるまでMasafumi Konishi
 
SkyWay で ビデオチャットサービス を構築してみた!
SkyWay で ビデオチャットサービス を構築してみた!SkyWay で ビデオチャットサービス を構築してみた!
SkyWay で ビデオチャットサービス を構築してみた!Tomoe Sawai
 
チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方Wataru Sakashita
 
Challenge for statup's cto from big company nagaaki hoshi
Challenge for statup's cto from big company nagaaki hoshiChallenge for statup's cto from big company nagaaki hoshi
Challenge for statup's cto from big company nagaaki hoshiRakuten Group, Inc.
 
スマホアプリ開発者のためのWeb api開発入門の入門
スマホアプリ開発者のためのWeb api開発入門の入門スマホアプリ開発者のためのWeb api開発入門の入門
スマホアプリ開発者のためのWeb api開発入門の入門Kenyu Miura
 
ログインの全て
ログインの全てログインの全て
ログインの全てDaikiSato10
 
SierでScalaを試した結果 Web系に転職した話
SierでScalaを試した結果 Web系に転職した話SierでScalaを試した結果 Web系に転職した話
SierでScalaを試した結果 Web系に転職した話bakenezumi
 
AWS でサーバーレスを使っている話.pptx
AWS でサーバーレスを使っている話.pptxAWS でサーバーレスを使っている話.pptx
AWS でサーバーレスを使っている話.pptxRyo Higashigawa
 
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介Fumiya Sakai
 
開発初心者がAWSサービスを色々使ってアプリ開発をした話
開発初心者がAWSサービスを色々使ってアプリ開発をした話開発初心者がAWSサービスを色々使ってアプリ開発をした話
開発初心者がAWSサービスを色々使ってアプリ開発をした話MaiFujisawa
 
20180228 jazug
20180228 jazug20180228 jazug
20180228 jazugSix Apart
 
Riot.jsとフォームのデータバインディング
Riot.jsとフォームのデータバインディングRiot.jsとフォームのデータバインディング
Riot.jsとフォームのデータバインディングKeisuke Imai
 
クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発Yuuji Arakaki
 

Ähnlich wie Firebase Authを Nuxt + Railsの自前サービス に導入してみた (20)

在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選
 
5分で伝えるAWS
5分で伝えるAWS5分で伝えるAWS
5分で伝えるAWS
 
田舎暮らし流エンジニアスキルアップ術
田舎暮らし流エンジニアスキルアップ術田舎暮らし流エンジニアスキルアップ術
田舎暮らし流エンジニアスキルアップ術
 
メンバーズグループ福岡Meetup/メンバーズエッジに入社して変わったこと
メンバーズグループ福岡Meetup/メンバーズエッジに入社して変わったことメンバーズグループ福岡Meetup/メンバーズエッジに入社して変わったこと
メンバーズグループ福岡Meetup/メンバーズエッジに入社して変わったこと
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
 
2020/9/30 【エンジニア起業】小規模スタートアップがウェブサービス(SocialDog)を軌道に乗せるまで
2020/9/30 【エンジニア起業】小規模スタートアップがウェブサービス(SocialDog)を軌道に乗せるまで2020/9/30 【エンジニア起業】小規模スタートアップがウェブサービス(SocialDog)を軌道に乗せるまで
2020/9/30 【エンジニア起業】小規模スタートアップがウェブサービス(SocialDog)を軌道に乗せるまで
 
SkyWay で ビデオチャットサービス を構築してみた!
SkyWay で ビデオチャットサービス を構築してみた!SkyWay で ビデオチャットサービス を構築してみた!
SkyWay で ビデオチャットサービス を構築してみた!
 
チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方
 
Challenge for statup's cto from big company nagaaki hoshi
Challenge for statup's cto from big company nagaaki hoshiChallenge for statup's cto from big company nagaaki hoshi
Challenge for statup's cto from big company nagaaki hoshi
 
スマホアプリ開発者のためのWeb api開発入門の入門
スマホアプリ開発者のためのWeb api開発入門の入門スマホアプリ開発者のためのWeb api開発入門の入門
スマホアプリ開発者のためのWeb api開発入門の入門
 
ログインの全て
ログインの全てログインの全て
ログインの全て
 
SierでScalaを試した結果 Web系に転職した話
SierでScalaを試した結果 Web系に転職した話SierでScalaを試した結果 Web系に転職した話
SierでScalaを試した結果 Web系に転職した話
 
React way at_eight
React way at_eightReact way at_eight
React way at_eight
 
AWS でサーバーレスを使っている話.pptx
AWS でサーバーレスを使っている話.pptxAWS でサーバーレスを使っている話.pptx
AWS でサーバーレスを使っている話.pptx
 
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
 
開発初心者がAWSサービスを色々使ってアプリ開発をした話
開発初心者がAWSサービスを色々使ってアプリ開発をした話開発初心者がAWSサービスを色々使ってアプリ開発をした話
開発初心者がAWSサービスを色々使ってアプリ開発をした話
 
20180228 jazug
20180228 jazug20180228 jazug
20180228 jazug
 
20150215勉強会
20150215勉強会20150215勉強会
20150215勉強会
 
Riot.jsとフォームのデータバインディング
Riot.jsとフォームのデータバインディングRiot.jsとフォームのデータバインディング
Riot.jsとフォームのデータバインディング
 
クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発
 

Mehr von Tomoe Sawai

エンタープライズ SaaS の初期成長戦略
エンタープライズ SaaS の初期成長戦略エンタープライズ SaaS の初期成長戦略
エンタープライズ SaaS の初期成長戦略Tomoe Sawai
 
ユースケース駆動開発のワークショップやってみた!
ユースケース駆動開発のワークショップやってみた!ユースケース駆動開発のワークショップやってみた!
ユースケース駆動開発のワークショップやってみた!Tomoe Sawai
 
Flexbox しか勝たん
Flexbox しか勝たんFlexbox しか勝たん
Flexbox しか勝たんTomoe Sawai
 
フルリモートチームで スクラム開発 やってみた!
フルリモートチームで スクラム開発 やってみた!フルリモートチームで スクラム開発 やってみた!
フルリモートチームで スクラム開発 やってみた!Tomoe Sawai
 
TypeScriptで辛麺を注文する(ライブコーディング)
TypeScriptで辛麺を注文する(ライブコーディング)TypeScriptで辛麺を注文する(ライブコーディング)
TypeScriptで辛麺を注文する(ライブコーディング)Tomoe Sawai
 
初めての公開Gem作り
初めての公開Gem作り初めての公開Gem作り
初めての公開Gem作りTomoe Sawai
 
地方フリーランスとして ゆるいチームで生き抜いてる話
地方フリーランスとして ゆるいチームで生き抜いてる話地方フリーランスとして ゆるいチームで生き抜いてる話
地方フリーランスとして ゆるいチームで生き抜いてる話Tomoe Sawai
 
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろう
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろうStripe Connect with Subscriptions で サブスクプラットフォーマー になろう
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろうTomoe Sawai
 
Solidus + Stripe で爆速!?ECサイト構築
Solidus + Stripe で爆速!?ECサイト構築Solidus + Stripe で爆速!?ECサイト構築
Solidus + Stripe で爆速!?ECサイト構築Tomoe Sawai
 
宮崎移住して山の中でリモートワークしてみた(2019/6/26)
宮崎移住して山の中でリモートワークしてみた(2019/6/26)宮崎移住して山の中でリモートワークしてみた(2019/6/26)
宮崎移住して山の中でリモートワークしてみた(2019/6/26)Tomoe Sawai
 
宮崎の山の中でリモートワークしてみた
宮崎の山の中でリモートワークしてみた宮崎の山の中でリモートワークしてみた
宮崎の山の中でリモートワークしてみたTomoe Sawai
 
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試すセンスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試すTomoe Sawai
 
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみたプラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみたTomoe Sawai
 

Mehr von Tomoe Sawai (13)

エンタープライズ SaaS の初期成長戦略
エンタープライズ SaaS の初期成長戦略エンタープライズ SaaS の初期成長戦略
エンタープライズ SaaS の初期成長戦略
 
ユースケース駆動開発のワークショップやってみた!
ユースケース駆動開発のワークショップやってみた!ユースケース駆動開発のワークショップやってみた!
ユースケース駆動開発のワークショップやってみた!
 
Flexbox しか勝たん
Flexbox しか勝たんFlexbox しか勝たん
Flexbox しか勝たん
 
フルリモートチームで スクラム開発 やってみた!
フルリモートチームで スクラム開発 やってみた!フルリモートチームで スクラム開発 やってみた!
フルリモートチームで スクラム開発 やってみた!
 
TypeScriptで辛麺を注文する(ライブコーディング)
TypeScriptで辛麺を注文する(ライブコーディング)TypeScriptで辛麺を注文する(ライブコーディング)
TypeScriptで辛麺を注文する(ライブコーディング)
 
初めての公開Gem作り
初めての公開Gem作り初めての公開Gem作り
初めての公開Gem作り
 
地方フリーランスとして ゆるいチームで生き抜いてる話
地方フリーランスとして ゆるいチームで生き抜いてる話地方フリーランスとして ゆるいチームで生き抜いてる話
地方フリーランスとして ゆるいチームで生き抜いてる話
 
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろう
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろうStripe Connect with Subscriptions で サブスクプラットフォーマー になろう
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろう
 
Solidus + Stripe で爆速!?ECサイト構築
Solidus + Stripe で爆速!?ECサイト構築Solidus + Stripe で爆速!?ECサイト構築
Solidus + Stripe で爆速!?ECサイト構築
 
宮崎移住して山の中でリモートワークしてみた(2019/6/26)
宮崎移住して山の中でリモートワークしてみた(2019/6/26)宮崎移住して山の中でリモートワークしてみた(2019/6/26)
宮崎移住して山の中でリモートワークしてみた(2019/6/26)
 
宮崎の山の中でリモートワークしてみた
宮崎の山の中でリモートワークしてみた宮崎の山の中でリモートワークしてみた
宮崎の山の中でリモートワークしてみた
 
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試すセンスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
 
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみたプラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた
 

Kürzlich hochgeladen

NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案sugiuralab
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...博三 太田
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfFumieNakayama
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfFumieNakayama
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?akihisamiyanaga1
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineerYuki Kikuchi
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)UEHARA, Tetsutaro
 

Kürzlich hochgeladen (9)

NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
 

Firebase Authを Nuxt + Railsの自前サービス に導入してみた

  • 1. Firebase Authを Nuxt + Railsの自前サービス に導入してみた 澤井 友恵 @tomoeine
  • 2. 自己紹介 フリーランスWebエンジニア 澤井友恵 @tomoeine エンジニアとしての黒歴史 ● 【高校中退】趣味のHP制作 ● 【大学】零細Web広告会社で1人システム部門バイト ● 【東京社会人】大手SIerに5年間SEとして勤務 ● 【宮崎】2016年~ 地元勤務(Web系自社サービス) ● 【フリーランス】2018年~ 山の中で在宅ワーク 最近触るもの ● Laravel、Rails、Vue.js、AWS 宮崎の岩は最高! 自己紹介
  • 3. アジェンダ ● Firebase Authenticationとは? ● ゆるすけの紹介 ● NuxtでFirebase Authを使う ● 自前のバックエンド(Rails)と連携する ● まとめ アジェンダ
  • 7. Stripe PHP vs Laravel Cashier $yarn add firebase NuxtにFirebase Authを導入する 割愛
「Firebase Auth Nuxt」でググると良い記事がたくさんでてきます

  • 9. Stripe PHP vs Laravel Cashier自前のバックエンドと連携 Nuxtでログインできたし、 あとはバックエンドと連携するだけやな・・・ SorceryやDevise使えないのは不便やが、 まぁなんとかなるやろ・・・(課題1) JWTのIDトークンをNuxtからRailsに渡して、 Rails側で検証して・・・ん??
  • 10. Stripe PHP vs Laravel CashierRailsアプリでIDトークンを検証したい① ①認証
 ②IDトークン
 (JWT)返却
 ③IDトークン
 ④IDトークン検証
 ⑤ログイン成功

  • 11. Stripe PHP vs Laravel CashierRailsアプリでIDトークンを検証したい② これこれ!! https://firebase.google.com/docs/auth/admin/verify-id-tokens?hl=ja https://firebase.google.com/docs/admin/setup/?hl=ja Rubyがない!!!! (課題2)
  • 12. Stripe PHP vs Laravel Cashier認証Gemどうするの問題(課題1) Q. SorceryやDeviseなしでも認証周り楽にする方法ないの?(課題1) A. 「Knock」が使えました😆
  • 13. Stripe PHP vs Laravel CashierAPIモードの認証ならKnock APIモードのRailsアプリで、JWT認証が手軽にできるやつ class Api::V1::HogePiyoController < ApplicationController before_action :authenticate_user def show p current_user.id end
  • 14. Stripe PHP vs Laravel CashierRuby用のAdmin SDKない問題(課題2) Q. Ruby用のFirebase Admin SDKがないみたいだけど、JWTの検証どうす るの?(課題2) A. 検証ぐらい自前でいったれ💪  (対応言語で実装してごにゃごにゃ連携するのもあり?)
  • 15. Stripe PHP vs Laravel CashierKnockのちからを借りつつJWT検証 ApplicationController # Knockの認証メソッドをオーバーライド module Knock::Authenticable def define_current_entity_getter(entity_class, getter_name) # 中略 response = client.get("https://www.googleapis.com/robot/v1/metadata/x509/securetoken@system.gserviceaccount.com") jwks_raw = response.body JSON.parse(jwks_raw).each do |_key, key_string| jwks_string = key_string.gsub("-----BEGIN CERTIFICATE-----", "").gsub("-----END CERTIFICATE-----", "").delete("n") Knock.token_signature_algorithm = "RS256" Knock.token_public_key = OpenSSL::X509::Certificate.new(Base64.decode64(jwks_string)).public_key begin @payload = Knock::AuthToken.new(token: token).entity_for(entity_class) break if @payload.present? rescue next end KnockにはJWTを公開鍵で検証する仕組みが備わっていますが、 公開鍵が固定になる
 一方Firebaseの公開鍵は定期的に変更されるので、 動的に取得する必要がある
 (遅くなるので鍵はキャッシュしておくと良い!) 

  • 16. Stripe PHP vs Laravel Cashierログイン&新規登録 User.rb def self.from_token_payload(payload) // Userが入れば取得 user = find_by(sub: payload["sub"]) // いなければ新規作成 user || create!(sub: payload["sub"], user_name: payload["name"][0..29], remote_image_url: payload["picture"].sub(/_normal./, "_bigger.")) end
  • 17. アジェンダ ● SPA+自前のバックエンド環境でも、 Firebase Authが使えた! ● RailsならKnockがオススメ! ● ただし少々の力技が伴う まとめ