SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
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の自前サービス
に導入してみた

Contenu connexe

Tendances

AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)Trainocate Japan, Ltd.
 
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法Tetsutaro Watanabe
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)mosa siru
 
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみようSolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみようShinsuke Sugaya
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!mosa siru
 
If文から機械学習への道
If文から機械学習への道If文から機械学習への道
If文から機械学習への道nishio
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことAmazon Web Services Japan
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門Masahito Zembutsu
 
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜Yoshiki Nakagawa
 
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそうPython 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそうRyuji Tsutsui
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなKentaro Matsui
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean ArchitectureAtsushi Nakamura
 
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計sairoutine
 
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDayマイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay都元ダイスケ Miyamoto
 
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」Takuto Wada
 
人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with KarateTakanori Suzuki
 
短期間で新技術を学ぶ技術
短期間で新技術を学ぶ技術短期間で新技術を学ぶ技術
短期間で新技術を学ぶ技術Takafumi ONAKA
 
忙しい人の5分で分かるMesos入門 - Mesos って何だ?
忙しい人の5分で分かるMesos入門 - Mesos って何だ?忙しい人の5分で分かるMesos入門 - Mesos って何だ?
忙しい人の5分で分かるMesos入門 - Mesos って何だ?Masahito Zembutsu
 

Tendances (20)

AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
 
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
 
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみようSolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみよう
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
 
If文から機械学習への道
If文から機械学習への道If文から機械学習への道
If文から機械学習への道
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
 
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
 
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajpAt least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
 
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそうPython 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
 
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
 
ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開
 
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDayマイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
マイクロサービス時代の認証と認可 - AWS Dev Day Tokyo 2018 #AWSDevDay
 
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
 
人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate
 
短期間で新技術を学ぶ技術
短期間で新技術を学ぶ技術短期間で新技術を学ぶ技術
短期間で新技術を学ぶ技術
 
忙しい人の5分で分かるMesos入門 - Mesos って何だ?
忙しい人の5分で分かるMesos入門 - Mesos って何だ?忙しい人の5分で分かるMesos入門 - Mesos って何だ?
忙しい人の5分で分かるMesos入門 - Mesos って何だ?
 

Similaire à 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
 

Similaire à 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サービス開発
 

Plus 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
 

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

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