Firebase

[Firebase] デプロイ対象を一部のサービスに限定する

小ネタです。
Firebaseでは特に何も考えずCLIでfirebase deployコマンドを実行するとプロジェクト内のすべてのファイルをデプロイしてくれちゃいます。意図した物であればもちろん良いのですが、例えばHostingだけ、もしくはCloudFunctionsだけといった場合には--onlyオプションを活用します。

続きを読む

Web版「Sign In with Apple」を実装する

今年のWWDCで発表された「Sign In with Apple」のWeb版(JavaScript版)を実装してみたいと思います。

今回、裏側はFirebaseを利用していますが、Authenticationは使っていませんので、一般的な環境でも参考になると思います。(執筆時点でまだFirebaseが未対応なので使いたくても使えないわけですがw)

※2019-09-23 「1.5 ユーザーを一意に特定するID」追記

続きを読む

[Firebase] AuthenticationでSMS認証 (Web編)

これまでFirebaseへ様々な認証をお試してしてきました。

今回は電話番号を使ったSMS認証です。

AuthenticationでSMSログイン

メールアドレスやSMSは匿名性の高い物が一人で量産できてしまいますが、電話番号であれば何かしらの契約が必要になりますのでハードルを高くすることが可能です。

この認証方法ではユーザーが入力した電話番号宛にFirebaseからSMS(昔でいうショートメール)が送信されます。SMS内にある暗証番号をログインページで入力してもらうことで本人確認が行えるというわけです。
続きを読む

[Firebase] AuthenticationでGitHub認証 (Web編)

Firebaseへメールアドレス認証Twitter認証Facebook認証Google認証匿名認証、お次はGitHubです。

AuthenticationでGitHubログイン

エンジニア向けのサイトだとGitHubでログインさせたくなりますよね。

Firebase Webコンソールの設定

FirebaseのWebコンソールへログインしたら、メニュー「Authentication」→「ログイン方法」とたどります。

画面の真ん中あたりにある「GitHub」のアコーディオンメニューを開き、「有効にする」にチェックしたあと、コールバックAPIをメモします。

ここまで出来たらGitHubへ移動します。

続きを読む

[Firebase] AuthenticationでFacebook認証 (Web編)

Firebaseへメールアドレス認証Twitter認証匿名認証と続き、今回はfacebookでの認証に挑戦します。

Authenticationでfacebookログイン

Facebookアプリを作成する際に、実際に本番で利用するためには「プライバシーポリシー」が掲載されたURLが必要になります。開発段階では不要ですが公開を考えている場合には早めに用意しておくことをおすすめします。

facebookでデベロッパー登録

Facebookにログインし、開発者サイトから登録を行います。

登録する手順も書こうと思ったのですが、10年以上前に登録を終えてしまっていたためここでは割愛します。FacebookはTwitterと違って複数のアカウントが作れない(作りづらい)のですよね(´・ω・`)

facebookアプリを作成

開発者サイトの右上のメニュー「マイアプリ」→「新しいアプリを追加する」をクリック

アプリの名称とメールアドレスを入力し「アプリIDを作成してください」をクリック

続きを読む

[Firebase] AuthenticationでTwitter認証 (Web編)

以前はFirebaseへメールアドレスでのログインを行いましたが、今回はTwitterでの認証に挑戦したいと思います。

AuthenticationでTwitterログイン

Twitterでアプリを作成

まず最初にTwitterでデベロッパー登録を行う必要があります。承認されるまでに数時間〜数日かかりますので思いついたら早めに申請しておくのがおすすめです。

その後Twitter上でOAuthアプリを作成します。といっても何も難しいことはなく必要な項目をフォームに入力するだけです。このときにCallback URLの入力を求められたら、いったんFirebseのWebコンソールへ移動します。

Twitterのデベロッパーサイトは日本語訳されていませんので、私もそうなのですが英語が苦手な方はGoogle翻訳をタブで開きながら行えばなんとかなります。
続きを読む

[Firebase] Authenticationで匿名認証 (Web編) その1

Firebaseの匿名認証はイメージとしてはセッションIDのような物で、ユーザーにログインなど特別な操作をせずともブラウザ(クライアント)を識別する一意のIDを付与してくれます。もちろんメールやSNSなど何らかのログインを行った場合は移行することも可能です。

匿名認証

コンソールで設定

最初にFirebaseのWebコンソールで匿名認証を有効にする必要があります。
コンソールにログインしたら、メニュー「Authentication」→「ログイン方法」とクリック。

下の方にある「匿名」のアコーディオンを開いて、「有効にする」をクリックし「保存」ボタンを押せば完了です。

続きを読む

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その4

今回はチャットで発言する内容にNGワードのチェックを入れたいと思います。
特定のキーワードが含まれている場合、「?」など伏せ字に置換する機能です。

実装方法を考える

方針

この実装方法は2つのパターンが考えられます。

クライアントでチェック
中身を覗かれるとNGワードのリストが漏洩しますし、サーバ側のAPIを直接リクエストされると機能しません。ただし高速に動作する可能性が高い。
サーバ側でチェック
NGワードのリストが漏洩する心配もなく、サーバ側APIを直接叩かれても機能する。ただしクライアント側で処理する場合に比べると低速。

あくまでFirestoreで実装した前提ですが、いずれも一長一短ありますがここはひとまずサーバ側で実装してみたいと思います。
続きを読む

[Firebase] はじめてのCloud Functions

FirebaseのCloud Functionsを利用すると巷で話題のサーバレスなシステムを構築することができます。外部にURLを公開してRESTful APIなども作成できますし、Firebase内のイベントに合わせて特定の処理を実行することが可能です。もちろんFirestoreやRealtimeDatabaseなどと連携することもできます。

functionsはNode.js上で動作するプログラムを記述することになりますので、すでにJavaScriptやTypeScriptの経験がある方なら特別な言語仕様を覚える必要が無いのも魅力でしょう。

CloudFunctionsでHelloWorld

準備

Firebaseのコンソールからプロジェクトを作成します。すでに利用しているプロジェクトがある場合はそちらを使用しても大丈夫です。

その後CLIツールのインストールを行います。詳しくは以下のページの「1 環境の準備」の項、Googleアカウントでログインするまでの部分を参照ください。

ディレクトリの初期化

すでにFirebaseで利用しているディレクトリがあればそちらに、無ければ新規にディレクトリを作成しカレントディレクトリを移ります。今回はすでに使ってるプロジェクトがあったのでそちらに移動しました。

$ cd miku3net

ではおもむろに初期化コマンドを叩きます。

$ firebase init functions

続きを読む

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その3

前々回でFirestoreを利用してリアルタイムな通信が行えるチャットを、前回はユーザー認証を導入しました。

今回は自分が書き込んだログを削除する機能を追加してみます。

サンプル

実行結果

  • 書き込むためにはログインが必要です。閲覧は未ログイン状態でも行えます。
  • 自分が書き込んだログは背景がピンク色になり、クリックすると削除できます。
  • 自由に投稿していただいて問題ありませんが、公序良俗に反する書き込みはご遠慮ください。
  • 適当なタイミングでお掃除します。

続きを読む

[Firebase] Authenticationでログアウトを実装

以前Authenticationによるログインを取り上げましたが、その際にログアウト(サインアウト)処理をすっぱり忘れていましたw

結論

結論から言うと以下の通りsignOut()メソッドを実行するだけです。成功したらthen()の箇所に好きな処理を書いてあげます。

firebase.auth().onAuthStateChanged( (user) => {
  firebase.auth().signOut().then(()=>{
    console.log("ログアウトしました");
  })
  .catch( (error)=>{
    console.log(`ログアウト時にエラーが発生しました (${error})`);
  });
});

続きを読む