When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

Supabase。無料OSS/APIフル活用!サクッと作るログイン認証・パスワードリセット機能開発実践講座
Supabase & Angular & TypeScriptで作るユーザー認証機能開発。ユーザー登録、ログイン、ログアウトからパスワードリセット、メール通知、認証ガードまで。セキュアなユーザー管理、完全網羅の決定版!

This Course Includes
udemy
5 (16 reviews )
5 total hours
japanese
Online - Self Paced
course
Udemy
About Supabase。無料OSS/APIフル活用!サクッと作るログイン認証・パスワードリセット機能開発実践講座
<コースの概要>
SupabaseとAngular、TypeScriptを駆使して、実践的なユーザー認証機能を開発してみませんか?本コースでは、家電量販店ECアプリを題材に、ユーザー登録、ログイン、ログアウト、パスワードリセット、メール通知、認証ガードまで、モダンなWebアプリケーションに必要なセキュアな機能を全て網羅。初心者から上級者まで、あなたのスキルを次のレベルに引き上げる内容が満載です。
Supabaseの強力なAPIとAngularのフレームワークを組み合わせた開発を通じて、リアルなプロジェクトの構築プロセスを体験し、即戦力として活躍できる実践力を養いましょう。次世代のWeb開発をリードするための技術を、このコースで手に入れてください!
<他教材との違い>
本コースと他教材(書籍やYoutube動画教材等)との違いは以下の通りです。
一貫した学習体験: 1本完結型コースであり、ネット検索やマニュアル確認の手間を省きます。
詳細な解説: Supabase, Angular, TypeScriptの技術や手順を、なぜその手順を選ぶのか、その理由や背景を詳細に説明します。
柔軟な学習環境: 全レクチャー動画をダウンロード可能で、場所を問わずどこでも学習できます。
実践的なサポート: 全ハンズオンに完成版のコードを添付し、コーディングミスによる原因調査の手間を省きます。
<コースの内容>
本コースの内容は以下の通りです。
コース概要
ユーザー認証機能デモ
本コース受講にあたって
自己紹介
本コースのねらい
ハンズオン
Supabase開発編1 準備① Supabaseプロジェクト作成
Supabase開発編2 準備② メール通知設定(Gmail SMTP Server)
Supabase開発編3 準備③ 開発プロジェクトセットアップ
Supabase開発編4 準備④ Supabaseクライアントライブラリインストール
Supabase開発編5 ユーザー登録機能① カスタムバリデーション
Supabase開発編6 ユーザー登録機能② Supabaseサインアップ
Supabase開発編7 ログイン機能① カスタムバリデーション
Supabase開発編8 ログイン機能② Supabaseサインイン
Supabase開発編9 ログイン機能③ ナビゲーションバー(表示制御)
Supabase開発編10 ログイン機能④ ナビゲーションバー(ユーザーメニュー追加)
Supabase開発編11 ログアウト機能 Supabaseサインアウト
Supabase開発編12 認証ガード機能 ガード設定
Supabase開発編13 リセットリンク送信機能① カスタムバリデーション
Supabase開発編14 リセットリンク送信機能② Supabaseリセットリンク
Supabase開発編15 パスワードリセット機能① カスタムバリデーション
Supabase開発編16 パスワードリセット機能② Supabaseリセットパスワード
ボーナスレクチャー
ボーナスレクチャー
What You Will Learn?
- Supabaseの設定とプロジェクト構築の概要理解(Supabaseプロジェクトの作成, Supabaseクライアントライブラリのインストールと設定, メール通知設定).
- Supabase APIを活用したユーザー認証機能開発の実践力向上①(ユーザー登録, ログイン, ログアウト機能の開発).
- Supabase APIを活用したユーザー認証機能開発の実践力向上②(パスワードリセット機能の開発, バリデーションチェック機能の開発).
- ユーザー認証状態に応じたアクセス制御機能開発の実践力向上(Angularの認証ガードの設定と導入, ナビゲーションバーの表示制御, ユーザーメニューの追加とアクセス制御).