FirebaseのE-mail認証でアドレスが正しいことを確認する

E-mail認証がまだ済んでいない
この記事は約3分で読めます。

Firebaseの認証機能を使えば、面倒なログイン回りの処理がほとんど省略できて幸せになれます。
ほとんどの処理がかなり簡単に使えるのですが、1つ、E-mailが正しいことを確認する処理が若干マニュアルではわかりにくいので備忘録として残します

currentUser.emailVerified

Firebaseでは、E-mailでアカウントを作成した場合、すぐにアカウントが作成されてそのまま利用可能です。しかしユーザが本当に正しいメールアドレスを入力している保証はありません。
ちゃんと確認のメールを送って、それが届いて、メール本文中の確認用リンクを踏んで初めて「正しい」と確認できるのです。

ありがたいことにFireBaseではこの確認作業もあらかじめ用意されているので、いちいち自前で用意しなくても済みます。

ユーザがログインした際、

firebase.auth().currentUser

でログインユーザの情報を取得できます。
同様に、

firebase.auth().currentUser.emailVerified

でログイン中のユーザが入力したメールアドレスが認証済みか否かを取得できます。これはBoolで帰ってきます。なお、googleアカウントによるログインでは、.currentUser.emailVerifiedは常にTrueを返すようです。

認証が終わってないなら認証メールを投げる

ユーザがアカウントを作成したときに入力したメールアドレスは、

firebase.auth().currentUser.email

で取得できます。
firebase.auth().currentUser.emailVerifiedがFalseだったときに、firebase.auth().currentUser.emailのメールアドレス宛に確認メールを投げます。確認メールは

firebase.auth().currentUser.sendEmailVerification()

で送信できます。
メールアドレスは特に指定しなくても、勝手にログインユーザ宛に送ってくれます。

実際にプログラムするとこんな感じです

// Nipoのソースからコピペしたので、独自の命令とかもあります。
    async emailAuthMixin_sendVerifyMail () {
      try {
        await this.$firebase.auth().currentUser.sendEmailVerification()
        alert('E-mailをおくりました')
      } catch (e) {
        console.error(e)
        alert('なんか失敗したようですね') 
      }
    }

一応公式サイトリンク

Nipoのどこで使われてるの?

E-mailの所有者確認が完了していない場合、「プロフィール画面」にて認証メールを催促するボタンが表示されます。

E-mail認証がまだ済んでいない

E-mail認証がまだ済んでいないため、確認用のメールを送信リクエストできる

認証メールの件名は、FireBaseの設定画面から変更できますが、文面は変更できません。(言語を日本語にすることはできます)

Firebase 認証メールの設定

Firebase 認証メールの設定。件名は変更可能だが本文の変更はできない

 

 

 

ここまで読んでくれてありがとうございますっ
Nipoに興味を持ちましたか?すぐ始められますよ

個人情報の入力も無し。ワンクリックで体験アカウントで利用可能です。そのまま正式アカウントへ昇格もOK。Nipoが使えないと思ったらブラウザを閉じるだけです

開発者ブログ
あなたの「いいね」が明日への希望となりますので、助けると思ってぽちっとお願いします
クラウド日報 Nipo

コメント

  1. > なお、googleアカウントによるログインでは、.currentUser.emailVerifiedは常にTrueを返すようです。

    この部分、こちらの環境で行うとGoogleアカウントでもFalseが返ってくるのですが…
    公式にも特に説明ないようなのですが、該当のコードやリファレンスあれば送ってもらえるとありがたいです

  2. 山本さま コメントありがとうございます。近々このサイトは静的サイトジェネレータで作り変えるので、コメントが書ける時間も残りわずかとなりました。
    今現在、Nipo(この記事の元となるアプリ)ではソーシャルログイン機能を廃止してしまいました。
    ご質問の箇所については、
    await this.$firebase.auth().currentUser.reload()
    を行ってからやってみるとどうでしょう?
    該当箇所付近のコードは次のとおりです。使用言語はVueです。

    async emailAuthMixin_authReload () {
    await this.$firebase.auth().currentUser.reload()
    if (this.$firebase.auth().currentUser.emailVerified) {
    // 認証が通った
    this.$store.commit(‘user/setVerifyState’, ‘done’)
    this.$q.notify({ message: ‘メールアドレスが確認されました’, timeout: 2500, color: ‘info’, icon: ‘info’, actions: [{ label: ‘閉じる’, color: ‘white’ }] })
    } else {
    this.$q.notify({ message: ‘認証がまだ済んでいないようです’ })
    }
    },

  3. 助かりました! ありがとうございます。