ログイン

[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編) その3

第1回はメールアドレスとパスワードによる認証、第2回はメールアドレス宛にメールを送信し文中のURLをクリックするとログイン状態になる機能の実装に挑戦しました。

今回は次のような仕組みに挑戦してみます。

  1. メールアドレスとパスワードを入力しログイン
  2. ログイン後、メールアドレスの認証が終わってなければ確認メール送信
  3. 確認メール内にあるURLをクリックするとメールアドレスの認証完了
    続きを読む

[Firebase] Authenticationでメール認証 (Web編) その1

Firebaseの機能を順次試していきたいと思います。
FirebaseではAuthenticationを利用することで様々な認証を用いることができます。今回実装するメールアドレスの他に各種SNSやSMSなどにも対応可能です。Webの他にiOSやAndroidなどにも導入可能。

今回は単純なログイン機能をWebページに実装してみます。
メールアドレスとパスワードを入力すると登録やログインできるようになります。

Authenticationでログイン

コンソール上の設定

Firebaseのコンソールにログインし、新しくプロジェクトを作成するか、既存のプロジェクトを選択します。

プロジェクトのダッシュボードに移動したら、早速Authenticationの設定を進めていきます。
まずは左側のメニューの「Authentication」をクリックし、右ペインが切り替わったら「ログイン方法」タブをクリック。

「メール/パスワード」の行をクリックし、「有効にする」のスライダーをクリック。
その後「保存」ボタンをクリック。

この後JSを書き始めるのですが、その前にプロジェクトの情報を取得します。プロジェクトのコンソール右上にある「ウェブ設定」ボタンをクリック。

JSの設定部分の雛形が表示されますので、これをコピーします。

これでブラウザでのFirebaseの必須の設定はひとまずこれで完了です。
簡単でしたねw

認証処理をJSで書く

今回は認証部部のUIがまるっとセットになったfirebaseui-webを使っていきます。

ここでは次の3つのファイルを作成しています。

config.js
前項でコピペしたコンソールの内容を保存します。
login.html
ログイン画面のHTML
done.html
ログイン完了画面のHTML

続きを読む