どうも、つよぽん(@tsuyopon_xyz)です!
今回はFirebaseの紹介「第16回目」の記事となります^^
前回の「【動画解説】Firebase Authenticationの概要」では、Firebase Authenticationの概要を解説しました。
今回は実際に「Firebase Authentication」を使って認証機能を実装する様子を見せながら解説していきます。
動画を観るだけでなく、一緒に手を動かしながら学習を進めていただくことで、より深い理解が得られるかと思います。
今回の解説動画は少し長くなるので全部で4回に分けて解説しております。
全4回の内容は以下のとおりです。
- Firebaseプロジェクトと連携するまで
- 入力フォームの実装(メールアドレス、パスワードの記入用)
- ユーザーの新規登録・認証メールの送信の実装
- ログイン・ログアウトの実装
それでは4本の解説動画を以下に貼っておきます。
目次
Firebase Authenticationでメール認証の様子を動画で解説(全4本)
①Firebaseプロジェクトと連携するまで
Firebaseと連携する前の下準備を行っていきます。
また、解説内では「React」を使って解説を進めております。
React以外のフロントエンド描画系のライブラリ(VueやAngularなど)をお使いの方は、Reactコードの部分を、適宜自身の環境に置き換えてご覧になっていただけたらと思います。
②入力フォームの実装(メールアドレス、パスワードの記入用)
あくまでも「Firebase Authentication」を使った認証機能の実装が解説の目的であるため、入力フォームは何もスタイルをあてずに作っております。
③ユーザーの新規登録・認証メール送信の実装
ユーザーの新規登録の実装を行っています。
また、登録されたユーザーが不正なユーザーでないことを確認する「メール認証」の実装方法についても解説します。
④ログイン・ログアウトの実装
ログイン・ログアウトの機能を実装します。
参考リンク
- Firebase Authentication
- ウェブサイトで Firebase Authentication を使ってみる
- Firebase を JavaScript プロジェクトに追加する
- sendEmailVerification(認証メールを送信するメソッド)
- currentUser(現在ログイン中のユーザー情報を取得できるプロパティ)