モチベーション 最近は、クライアント（iOSやAndroid, Webクライント）とAPIサーバを別立てして開発していくことは多いと思います。 弊社も例にもれず、こういった構成で開発をしています。 なおAPIサーバのユーザー認証は、firebaseのトークンをJWT認証することで実現しています。 ただし、下記の理由でトークンの扱いが多少面倒なので、今回スクリプトを書いて解消したいと思います。 APIサーバをRuby on Railsで開発している。しかし、firebaseはRuby向けのSDKを公開していない（2020年7月時点）。 Libraries - Firebase - Google firebaseのトークンは1時間で有効期限がくる ゴール nodejs経由でfirebaseにアクセスし、トークンを取り出す処理をコンソールアプリを作成する 正直言語はなんでも良いのです。 今季は、

Webエンジニアのブログです。

Firebase Authentication は手軽に認証の仕組みが使えてとても良いです。今回は Vue.js を使って SSR (ServerSideRendering) と SPA (SinglePageApplication) 両方に対応した使い方をまとめておきます。 というのも普通の SPA であれば特になんの問題もなく使えるのが SSR にも対応した形にしようとすると、とても苦労したというのがあり自分でまとめておかないと忘れてしまいそうになるからです。 使うもの Vue.js Vue Router Vuex Firebase SPA で普通に認証をしてみる Vue.js + Vue Router を使って認証が必要なページを用意し、Firebase Authentication で認証が通っている場合は閲覧できるようにしてみます。ここではサンプルとして Google ログインを

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら

FirebaseのAuth機能でログイン済み ログイン情報を使って、プロフィール画面を表示 プロフィール画面をリロードすると、何も表示されなくなる ゴールはプロフィール画面でリロードしても、もう一度情報を取得して、情報を表示させることです。 解決策：createdでonAuthStateChangedを呼び出す 結論からいうと、Vueのライフサイクルcreatedで、firebase.auth().onAuthStateChangedを呼び出せなOK！ そして、所望の処理(私の場合は、プロフィール情報を取得)を入れましょう。

前回に引き続き、FirebaseAuth を使ったログイン認証でアカウントに複数の認証プロバイダをリンクさせることを試していたときのこと uga-box.hatenablog.com 既存のユーザーアカウントに紐付けたい認証プロバイダの認証情報をリンクさせるには、リンク先となるプロバイダ（既存の方）に一度ログインするようユーザーに促す必要があり、選択肢としてはポップアップ ウィンドウをユーザーに表示するか、プロバイダのログインページにリダイレクトすることによりログインを促すことができる このうちポップアップ ウィンドウを表示させようとしたときに問題がおきた それはポップアップブロックが生じてしまうこと ポップアップブロック Google Chromeでは、悪質な迷惑広告を取り締まる理由でポップアップの自動表示がデフォルトでブロックされており、このログイン用のポップアップウィンドウも漏れなく

ドキュメント見るの辛い人向けに置いておきます。 1.Firebaseのコンソールで電話番号認証を許可 AuthenticationタブからONにするだけです これでアプリケーションで使えるようになります 料金体系 Sparkプランは1万/月でいけるので、試しにテストしてみたかったり小規模なサービスではこれで十分かと思います 1万を超過するようなログイン、登録が発生する場合はBlazeプランにあげたほうが確実です。 Blazeプランの場合は従量課金制度で1万を超過した分に対して1件あたりの金額がかかってきます。 料金を確認 2.reCAPTCHAで認証を設定 主に不正行為を防止する目的でこれ設定する必要があります。 例えばよくある画像を選んでロボットではないことを確認するアレです。 <template> <div> <a id="sign-in-button" @click="sendMes

Firebase Authenticationでメールアドレス＆パスワード認証に次いで面倒な電話番号認証について。 Firebaseの電話番号認証フロー 電話番号認証を有効にしたりするところは他の認証と変わらないので省略。 以下はUIを自前で実装する場合のもの。 共通 RecaptchaVerifier インスタンスを作成してreCAPTCHAを表示 電話番号の入力フォームも表示 電話番号を入力 reCAPTCHAを入力 サインイン Auth.signInWithPhoneNumberで確認コードを送信 →携帯の番号ではなかったり、bot判定されるなどしたらエラー →エラーならreCATPCHAリセット 確認コード入力フォーム表示 確認コードを入力 ①で返されたConfirmationResultオブジェクトのconfirmメソッドで確認コードを検証 ④が成功すると、ユーザーは正常にログイ

Firebase Authenticationを利用する認証でメールアドレス＆パスワード、メールリンク、Google、Twitter…と一通り実装してみたなかではメールアドレス＆パスワード認証が一番面倒臭かった。 この記事はその面倒くさいメアド認証にまつわる各種手順を脳内整理がてらメモったものです。 殆どはFirebaseの公式ドキュメントに書いてあることなので、主要な関数名などにはドキュメントへのリンクを貼ってあります。 メールアドレス＆パスワードで新規登録 Firebaseだとメールアドレスを使う認証では「メールアドレス＆パスワード」と「メールリンク」が選択できる。 メールアドレス＆パスワードを利用した場合、確認メール送信までがフェーズ１という感じ。 メールアドレス・パスワード入力 登録の確認（auth().fetchSignInMethodsForEmail） ユーザーアカウント作成

email, password認証はよく使うのでメモ。 前提 asyncの中で利用すること想定（そのコード割愛） 既にemailが登録されているかどうか 専用の関数が欲しいところですが、内容です。 いくつか方法があるようですが、下記のように確認できるようです。 const providers = await firebase.auth().fetchSignInMethodsForEmail(email); if (providers.findIndex(p => p === firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) !== -1) { console.log("登録されています"); return; } fetchSignInMethodsForEmail()を実行すると、既にemail-passowrd

Firebase Authentication、とても便利ですよね。 今回、Firebase Authenticationを使って、Googleログインしたアカウントに対して、電話番号を紐付けます。 Firebaseの準備 Fireabse Authの設定方法はこちら。 ログイン方法として、電話番号とGoogleを有効にしておいてください。 googleアカウントでの認証 まずはgoogleアカウントで認証させます。 signInWithPopupというメソッドを使います。 電話番号での認証 次に、電話番号での認証です。 reCAPTCHAの設定がちょっとめんどくさいので注意しましょう。 signInWithPhoneNumberというメソッドを使います。 アカウントに複数の認証プロバイダをリンク ここまで完了したら、 currentUserに対して、linkAndRetrieveData

Firebase Admin SDKで一般的なWebサービスの構成にFirebase Authenticationを使った認証処理を組み込む。Node.jsFirebaseFirebaseAuthentication 概要 Firebase #2 Advent Calendar 2019の14日目の記事です。 Firebase Authenticationを使用した記事は数多くあるのですが、一般的なWebサービスのサーバーサイドでの認証にFirebase Authenticationを利用する記事が見当たらなかったので、サンプル実装を書いてみました。 今回のFirebase Authenticationの想定ユースケース 自前でのユーザー管理は行いたい 認証部分のみFirebase Authenticationを導入し、Googleアカウントとの紐付けを行いたい。認証処理の実装の省略したい

背景 Vue.js + Firebase だけWebサービス作れるやーん！っていう言説が非常に多い気がする昨今（私も同意です） ちょっと前までは、「APIキーはサーバサイドにおいておくのがセキュリティの鉄則！」だった気がします。 で、Vue.js + Firebaseでサーバレスでアプリをつくるとなると、APIキーはクライアントに置かれることになります。 そこらへんって本当に大丈夫なの、って疑問に思ってたので調べてみました。 結論 結論から先に述べると、「問題なし」 Realtime Databaseとかの権限設定が適切に設定されている前提ならば 特に問題ない 調べたもの やはりあるよねStackOverFlow stackoverflow.com 内容 質問（意訳） Firebaseのキーって見てる人全員にさらされちゃってるけど、それでいいんかい？ このキーの目的ってなんなんだよ？公開さ

界隈でちょくちょく質問されているのを見るので調べたことをまとめてみました。 結論だけで言うと、「よい」です。 Firebase apiKey? なに? Firebase project を作成すると projectId はもちろん apiKey や databaseURL などが作成され、これを使うことで機能が使えるようになります。Firebase console でいうと Project 設定などから [アプリを追加] すると取得できます。 詳しい手順はこちら。https://support.google.com/firebase/answer/7015592?authuser=0 var config = { apiKey: "CcN0p0MAIzavPCNkmXSyAy4xhKwCF6CqbX5TcvL", authDomain: "example.firebaseapp.com",

概要 プロジェクトを作り直すなんて状況によってはできない話ですが、プロジェクト作成時にリージョン設定を適切な値に変更しなかったためにやるためになった記録です(;´д｀)トホホ 読者対象 これからFirebaseのプロジェクトを作成する方で、ドキュメントを読まずにサクサク進める性格の方（あの時の自分） いきなり理由 画像の赤線を見てもらえば一目瞭然です。 要するにFireStoreのリージョンを後から変更できないため、プロジェクト作成時にデフォルトのまま進んでしまっているとアメリカにデータを置くことになるからです。 既存プロジェクトだとFireStoreの利用開始時に設定するかもしれませんが、現在は新規プロジェクト作成時に設定するようです。 実際はFireStore内に変更設定の項目あるんじゃない？と思われる方にドキュメントから引用です。 https://firebase.google.co

概要 firebaseuiとVue.jsを使ったログイン処理 一度ログインしたらログインフォームは非表示にする。（匿名ログインは除く） 匿名ログインは「ゲスト」として表示する。 匿名ログイン後、SNSアカウントでログインしたら統合させる。 環境 Windows10 Node.js　v10.15.0 Vue.js　2.9.6 Firebase　6.4.0 環境構築 windowsにNode.jsをインストール 推奨版をインストール https://nodejs.org/ja/ Node.jsのバージョン確認 https://qiita.com/strsk/items/925644e124efcc964625

これまでFirebaseへ様々な認証をお試してしてきました。 メールアドレス認証 Twitter認証 Facebook認証 Google認証 匿名認証 今回は電話番号を使ったSMS認証です。 AuthenticationでSMSログイン メールアドレスやSMSは匿名性の高い物が一人で量産できてしまいますが、電話番号であれば何かしらの契約が必要になりますのでハードルを高くすることが可能です。 この認証方法ではユーザーが入力した電話番号宛にFirebaseからSMS(昔でいうショートメール)が送信されます。SMS内にある暗証番号をログインページで入力してもらうことで本人確認が行えるというわけです。 AuthenticationでSMSログイン Firebase Webコンソールの設定 ソースコード config.js index.html done.html 実行結果 解説 最初に選択される国