SlideShare uma empresa Scribd logo
1 de 18
Baixar para ler offline
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の自前サービス
に導入してみた

Mais conteúdo relacionado

Mais procurados

エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織Takafumi ONAKA
 
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014Takashi Yahata
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!mosa siru
 
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)NTT DATA Technology & Innovation
 
Redisの特徴と活用方法について
Redisの特徴と活用方法についてRedisの特徴と活用方法について
Redisの特徴と活用方法についてYuji Otani
 
backlogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見るbacklogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見るTakeru Maehara
 
日本語テストメソッドについて
日本語テストメソッドについて日本語テストメソッドについて
日本語テストメソッドについてkumake
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込むYoshiki Hayama
 
クラウド環境下におけるAPIリトライ設計
クラウド環境下におけるAPIリトライ設計クラウド環境下におけるAPIリトライ設計
クラウド環境下におけるAPIリトライ設計Kouji YAMADA
 
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発Takafumi ONAKA
 
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていることonozaty
 
3000社の業務データ絞り込みを支える技術
3000社の業務データ絞り込みを支える技術3000社の業務データ絞り込みを支える技術
3000社の業務データ絞り込みを支える技術Ryo Mitoma
 
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門増田 亨
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)mosa siru
 
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外Takuya Sato
 
暗号技術の実装と数学
暗号技術の実装と数学暗号技術の実装と数学
暗号技術の実装と数学MITSUNARI Shigeo
 
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけRDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけRecruit Technologies
 

Mais procurados (20)

エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
 
Oss貢献超入門
Oss貢献超入門Oss貢献超入門
Oss貢献超入門
 
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
 
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajpAt least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
 
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
 
Redisの特徴と活用方法について
Redisの特徴と活用方法についてRedisの特徴と活用方法について
Redisの特徴と活用方法について
 
backlogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見るbacklogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見る
 
日本語テストメソッドについて
日本語テストメソッドについて日本語テストメソッドについて
日本語テストメソッドについて
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
 
クラウド環境下におけるAPIリトライ設計
クラウド環境下におけるAPIリトライ設計クラウド環境下におけるAPIリトライ設計
クラウド環境下におけるAPIリトライ設計
 
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
 
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
 
3000社の業務データ絞り込みを支える技術
3000社の業務データ絞り込みを支える技術3000社の業務データ絞り込みを支える技術
3000社の業務データ絞り込みを支える技術
 
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
 
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
 
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
 
暗号技術の実装と数学
暗号技術の実装と数学暗号技術の実装と数学
暗号技術の実装と数学
 
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけRDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
 

Semelhante a 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
 

Semelhante a 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サービス開発
 

Mais de 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
 

Mais de 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を使ってみた
 

Último

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 

Último (8)

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 

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がオススメ! ● ただし少々の力技が伴う まとめ