【動画解説】Firebase Authentication でメール認証を行う（ライブコーディング）

どうも、つよぽん(@tsuyopon_xyz)です！

今回はFirebaseの紹介「第16回目」の記事となります^^

前回の「【動画解説】Firebase Authenticationの概要」では、Firebase Authenticationの概要を解説しました。

今回は実際に「Firebase Authentication」を使って認証機能を実装する様子を見せながら解説していきます。

動画を観るだけでなく、一緒に手を動かしながら学習を進めていただくことで、より深い理解が得られるかと思います。

今回の解説動画は少し長くなるので全部で4回に分けて解説しております。

全4回の内容は以下のとおりです。

それでは4本の解説動画を以下に貼っておきます。

Firebase Authenticationでメール認証の様子を動画で解説（全4本）

①Firebaseプロジェクトと連携するまで

Firebaseと連携する前の下準備を行っていきます。

また、解説内では「React」を使って解説を進めております。

React以外のフロントエンド描画系のライブラリ（VueやAngularなど）をお使いの方は、Reactコードの部分を、適宜自身の環境に置き換えてご覧になっていただけたらと思います。

②入力フォームの実装（メールアドレス、パスワードの記入用）

あくまでも「Firebase Authentication」を使った認証機能の実装が解説の目的であるため、入力フォームは何もスタイルをあてずに作っております。

③ユーザーの新規登録・認証メール送信の実装

ユーザーの新規登録の実装を行っています。

また、登録されたユーザーが不正なユーザーでないことを確認する「メール認証」の実装方法についても解説します。

④ログイン・ログアウトの実装

ログイン・ログアウトの機能を実装します。

参考リンク

• Firebase Authentication
• ウェブサイトで Firebase Authentication を使ってみる
• Firebase を JavaScript プロジェクトに追加する
• sendEmailVerification（認証メールを送信するメソッド）
• currentUser（現在ログイン中のユーザー情報を取得できるプロパティ）

【追記】より学習しやすい専用サイトを用意しました

Firebaseの基本を学べる「Firebase入門」というのをYouTubeでも公開しているのですが、より学習しやすい「専用の学習サイト」を用意しました。

「専用の学習サイトはどんな感じなのか？」と気になっている人向けに、

以下のツイートの添付動画に紹介動画を用意したので、そちらで学習サイトのイメージを掴んでいただけたらと思います。

（以下ツイートの添付動画は、Firebaseではない別の学習コンテンツを紹介していますが、学習サイトのデザインは完全に同じものとなります。）

Web白熱教室でも公開している

「Next.js&TypeScript体験シリーズ」

をより学習しやすくするために、新しく作った学習サイトに移植して、

・スライド
・参考リンク集
・学習記録

を取れるようにしました^^

以下リンク先はWeb白熱教室
↓https://t.co/MKIlsrIORZ

添付動画は移植先の新学習サイト pic.twitter.com/4BhRvMWid5

— つよぽん@FrontHacks講師 (@tsuyopon_xyz) April 26, 2021

こちらの動画をご覧になるとわかると思いますが、以下に挙げたように、より学習しやすい環境になっているのがわかっていただけるかなと思います。

• Udemyのように学習記録が残せる
• 「前のページ」「次のページ」に簡単に移動できる

 

専用の学習サイトを使って学習を進められたい方は、以下のボタンをクリックしてご確認いただけたらと思います^^

専用サイトで「Firebase入門」を学ぶ