Authentication

2019.03.07

[Firebase] Authenticationで複数の認証プロバイダへ同時対応する (Web編)

今まではFirebaseの個別の認証プロバイダでログインしていましたが、今回はここまで対応した全プロバイダのいずれかでログインできる仕組みを作ってみます。

以下の画面のように複数の認証方法から自由に選択することができます。

続きを読む

2019.03.06

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

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

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

AuthenticationでSMSログイン

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

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

2019.03.06

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

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

AuthenticationでGitHubログイン

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

Firebase Webコンソールの設定

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

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

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

2019.03.05

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

Firebaseへメールアドレス認証、Twitter認証、Facebook認証、匿名認証まで終わったので、今回はGoogle認証です。

AuthenticationでGoogleログイン

TwitterやFacebookはプラットフォーム側のサイトで色々作業が必要でしたが、Google認証ではその必要が一切ありません。FirebaseがGoogleに買収された恩恵ここにありです。
続きを読む

2019.03.05

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

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

Authenticationでfacebookログイン

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

facebookでデベロッパー登録

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

Facebook for Developers

https://developers.facebook.com

Facebookで人と人をつなぐコード。AI、ビジネスツール、ゲーム、オープンソース、パブリッシング、ソーシャルハードウェア、ソーシャル統合&#x...

開発者向けFacebook

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

facebookアプリを作成

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

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

 続きを読む

2019.03.02

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

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

AuthenticationでTwitterログイン

Twitterでアプリを作成

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

TwitterのDeveloper登録をする - 2019年2月版

https://blog.katsubemakito.net/articles/twitterdeveloper_join_201902

以前はTwitterのAPIを利用するためには所定の項目に入力すればそれで終わっていたのですが、最近は入力した項目をTwitter社の方が問題ないかチェックをしているようです。世知辛い世の中になったもんです(´・ω・`)今回はTwitterへデベロッパーアカウントとしての申請を行ってみます。申請するログインTwitterにログインした状態、または以下のページにアクセスし申請を行うアカウントでログインを行います。申請内容の入力「Create an app」ボタンをクリックアプリを作成するにはデベロッパーアカウントへの登録が必要云々と表示される...

ねこの足跡R

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

Twitterアプリを新規に作成する

https://blog.katsubemakito.net/articles/twitter-app-create

Twitterのログイン機能を自分のサイトに設置したり、APIを利用するためにはTwitterへ開発者登録後にアプリの作成を行う必要があります。デベロッパー登録開発者登録を行っていない場合はこちらをまずは行います。詳細は過去の記事を参照ください。Twitterの中の人が申請内容の確認作業を行うため、審査中はアプリの登録や利用などは行うことができません。タイミングによりますが私の場合は4時間程度でした。ネット上を見回すと10日前後かかった方もいらっしゃるようなので、早めにやっておいたほうが良いでしょう。この作業は最初の1...

ねこの足跡R

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

2019.02.28

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

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

匿名認証

コンソールで設定

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

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

2019.02.24

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

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

結論

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

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