今まではFirebaseの個別の認証プロバイダでログインしていましたが、今回はここまで対応した全プロバイダのいずれかでログインできる仕組みを作ってみます。
以下の画面のように複数の認証方法から自由に選択することができます。
続きを読む
今まではFirebaseの個別の認証プロバイダでログインしていましたが、今回はここまで対応した全プロバイダのいずれかでログインできる仕組みを作ってみます。
以下の画面のように複数の認証方法から自由に選択することができます。
続きを読む
これまでFirebaseへ様々な認証をお試してしてきました。
今回は電話番号を使ったSMS認証です。
メールアドレスやSMSは匿名性の高い物が一人で量産できてしまいますが、電話番号であれば何かしらの契約が必要になりますのでハードルを高くすることが可能です。
この認証方法ではユーザーが入力した電話番号宛にFirebaseからSMS(昔でいうショートメール)が送信されます。SMS内にある暗証番号をログインページで入力してもらうことで本人確認が行えるというわけです。
続きを読む
Firebaseへメールアドレス認証、Twitter認証、Facebook認証、Google認証、匿名認証、お次はGitHubです。
エンジニア向けのサイトだとGitHubでログインさせたくなりますよね。
FirebaseのWebコンソールへログインしたら、メニュー「Authentication」→「ログイン方法」とたどります。
画面の真ん中あたりにある「GitHub」のアコーディオンメニューを開き、「有効にする」にチェックしたあと、コールバックAPI
をメモします。
ここまで出来たらGitHubへ移動します。
Firebaseへメールアドレス認証、Twitter認証、Facebook認証、匿名認証まで終わったので、今回はGoogle認証です。
TwitterやFacebookはプラットフォーム側のサイトで色々作業が必要でしたが、Google認証ではその必要が一切ありません。FirebaseがGoogleに買収された恩恵ここにありです。
続きを読む
Firebaseへメールアドレス認証、Twitter認証、匿名認証と続き、今回はfacebookでの認証に挑戦します。
Facebookアプリを作成する際に、実際に本番で利用するためには「プライバシーポリシー」が掲載されたURLが必要になります。開発段階では不要ですが公開を考えている場合には早めに用意しておくことをおすすめします。
Facebookにログインし、開発者サイトから登録を行います。
登録する手順も書こうと思ったのですが、10年以上前に登録を終えてしまっていたためここでは割愛します。FacebookはTwitterと違って複数のアカウントが作れない(作りづらい)のですよね(´・ω・`)
開発者サイトの右上のメニュー「マイアプリ」→「新しいアプリを追加する」をクリック
アプリの名称とメールアドレスを入力し「アプリIDを作成してください」をクリック
続きを読む
以前はFirebaseへメールアドレスでのログインを行いましたが、今回はTwitterでの認証に挑戦したいと思います。
まず最初にTwitterでデベロッパー登録を行う必要があります。承認されるまでに数時間〜数日かかりますので思いついたら早めに申請しておくのがおすすめです。
その後Twitter上でOAuthアプリを作成します。といっても何も難しいことはなく必要な項目をフォームに入力するだけです。このときにCallback URL
の入力を求められたら、いったんFirebseのWebコンソールへ移動します。
Twitterのデベロッパーサイトは日本語訳されていませんので、私もそうなのですが英語が苦手な方はGoogle翻訳をタブで開きながら行えばなんとかなります。
続きを読む
Firebaseの匿名認証はイメージとしてはセッションIDのような物で、ユーザーにログインなど特別な操作をせずともブラウザ(クライアント)を識別する一意のIDを付与してくれます。もちろんメールやSNSなど何らかのログインを行った場合は移行することも可能です。
最初にFirebaseのWebコンソールで匿名認証を有効にする必要があります。
コンソールにログインしたら、メニュー「Authentication」→「ログイン方法」とクリック。
以前Authenticationによるログインを取り上げましたが、その際にログアウト(サインアウト)処理をすっぱり忘れていましたw
結論から言うと以下の通りsignOut()
メソッドを実行するだけです。成功したらthen()
の箇所に好きな処理を書いてあげます。
firebase.auth().onAuthStateChanged( (user) => {
firebase.auth().signOut().then(()=>{
console.log("ログアウトしました");
})
.catch( (error)=>{
console.log(`ログアウト時にエラーが発生しました (${error})`);
});
});
前回、Firestoreを利用してリアルタイムな通信が行えるチャットを作成しましたが、今回はこのチャットに書き込みためにはログインが必要な状態に仕様変更したいと思います。
第1回はメールアドレスとパスワードによる認証、第2回はメールアドレス宛にメールを送信し文中のURLをクリックするとログイン状態になる機能の実装に挑戦しました。
今回は次のような仕組みに挑戦してみます。
前回はメールアドレスとパスワードによる認証でしたが、今回は入力されたメールアドレスにメールを送信し届いたURLをクリックしたらログイン状態になる「メールリンク認証」の実装をします。
続きを読む
Firebaseの機能を順次試していきたいと思います。
FirebaseではAuthentication
を利用することで様々な認証を用いることができます。今回実装するメールアドレスの他に各種SNSやSMSなどにも対応可能です。Webの他にiOSやAndroidなどにも導入可能。
今回は単純なログイン機能をWebページに実装してみます。
メールアドレスとパスワードを入力すると登録やログインできるようになります。
Firebaseのコンソールにログインし、新しくプロジェクトを作成するか、既存のプロジェクトを選択します。
プロジェクトのダッシュボードに移動したら、早速Authentication
の設定を進めていきます。
まずは左側のメニューの「Authentication」をクリックし、右ペインが切り替わったら「ログイン方法」タブをクリック。
「メール/パスワード」の行をクリックし、「有効にする」のスライダーをクリック。
その後「保存」ボタンをクリック。
この後JSを書き始めるのですが、その前にプロジェクトの情報を取得します。プロジェクトのコンソール右上にある「ウェブ設定」ボタンをクリック。
JSの設定部分の雛形が表示されますので、これをコピーします。
これでブラウザでのFirebaseの必須の設定はひとまずこれで完了です。
簡単でしたねw
今回は認証部部のUIがまるっとセットになったfirebaseui-web
を使っていきます。
ここでは次の3つのファイルを作成しています。