인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
Programming

/

Web Development

Firebase シリーズ #1：ソーシャルログイン・電話番号・位置認証 完全ガイド

🔥 HTML + Tailwind CSS + ピュアJavaScriptだけで完成させるFirebaseユーザー認証！ ソーシャルログイン・電話・位置認証まで、複雑なバックエンドなしに簡単かつ迅速にアカウントシステムを構築します。

（5.0）受講レビュー 3件

受講生 33名

HTML/CSS
JavaScript
Firebase
Serverless
TailwindCSS

初級者のための講座です。

こんなことが学べます

  • Firebase認証 4種類（ソーシャル、電話番号、位置情報、メールアドレス）でアカウントシステムを完全構築

  • Tailwind CSS で レスポンシブデザイン を 素早く 適用する方法

  • 純粋なJavaScriptでログイン状態管理およびデータ処理

  • ログインUX改善！ ユーザーに優しい認証UI設計方法

Firebaseシリーズ＃2：AI漢字おすすめ＆手書き学習プラットフォーム講義がついにオープンしました！
AIおすすめシステム+漢字手書き学習機能まで盛り込んだプロジェクト 多くの関心と受講お願い致します😊

定価29,700ウォン川のショートカット！

バックエンドなしでログインシステムを作成できますか？

ほとんどのウェブサイトやアプリにはログイン＆会員登録が必須です。
Firebase Authenticationを使用すると、ソーシャルログイン、携帯電話認証、位置認証までバックエンドなしで実装できます。

このレッスンでは、HTML / CSS、TailwindCSS、JavaScript、Firebase、およびサーバーレスで完成型認証システムを構築する方法を学びます。
大会、ハッカートン、キャプストーンプロジェクトでも活用できるよう、本番ですぐに適用可能な会員登録＆ログインシステムを一緒に作ってみてください！

複雑なバックエンドは必要ありません。 Firebase 1つで強力なアカウントシステムを完成させましょう！

この講義の特徴

📌バックエンドなしで強力なユーザー認証システムを構築！
Firebase Authenticationを活用して、ソーシャルログイン、携帯電話認証、位置ベース認証まで簡単かつ迅速に実装する実践ノウハウを提供します。

📌ハッカートン・大会・キャプストンプロジェクトですぐに適用！
Firebase Security Rules、UIデザイン、データ管理方法まで、迅速にMVP（最小機能製品）を開発できます。

📌理論よりも実習中心！ （理論10％＋実習90％）
直接コードを作成してテストし、Firebase認証が実際のプロジェクトでどのように機能するかを確認します。

📌小・中・高・大学生大会＆プロジェクトに最適化！
Firebaseを活用して素早くプロトタイプを開発し、実戦で活用できるように直接従って学習する実習型講義です。


HTML、JavaScriptの基礎だけを知っていれば誰でも簡単にフォローできます！

ソーシャルログイン・携帯電話・位置認証まで！ Firebaseユーザー認証完全ガイドの紹介動画

こんな方におすすめです

バックエンド開発、どうしたらいいですか？

Web基礎は知っているが、会員登録・ログイン機能を直接実装してみたい学生・開発者

ハッカートン・キャプストンプロジェクト
ソーシャルログイン、携帯電話認証、位置認証をFirebaseで素早く簡単に実装したい方

バックエンドなしのログインシステム
React・Node.jsなしでHTML、CSS、JavaScriptだけでFirebase認証システムを構築したい方

受講後はこんなことができますよ！

  • Firebaseでログインシステムを自分で作成して活用できます。

  • ソーシャルログイン、携帯電話認証、位置認証を実装し、実際のサービスにも適用できる実力を備えています。

  • セキュリティとパフォーマンスを考慮した認証システムを作成できます。

  • Firebase Security Rulesを設定し、安全なユーザー認証システムを構築できます。


  • React・Node.jsがなくてもFirebaseだけでWebサービスを開発できます。

  • HTML、CSS、JavaScriptだけで完成型ログイン・会員登録機能を実装できます。 🚀

このような内容を学びます。

Firebase：電子メール認証、ユーザー管理

Firebase Authenticationの電子メール認証は簡単に見えますが、セキュリティとスケーラビリティを考慮しないと、安定したサービス運用が困難になる可能性があります。

このレッスンでは、単純な電子メールログインの実装を超えて、

セキュリティ設定、ユーザーデータ管理、実践から適用可能なFirebase認証戦略までカバーしています。

Firebase：携帯電話認証、OTPセキュリティ

Firebaseの携帯電話認証は、電子メールよりも高速で簡単なログイン方式です。しかし、単にOTPを送信して入力するだけで十分でしょうか？

reCAPTCHA認証を活用した自動化攻撃防御！
より安全で効率的な携帯電話認証を実装する方法を学びましょう！

Firebase: Google Authenticator TOTP 認証

Firebase AuthenticationにGoogle AuthenticatorベースのTOTP認証を追加すると、セキュリティをさらに強化できます。

このレッスンでは、単純な電子メールログインの実装を超えて、
TOTPベースの2段階認証（2FA）設定とGoogle Authenticatorの連携とコード検証までをカバーし、より安全な認証システムを構築する方法を学びます。

Firebase：GPSベースの位置認証

Firebase Authenticationに位置ベースの認証を追加すると、セキュリティを強化できます。

このレッスンでは、Navigator Geolocation APIを使用してユーザーの場所を確認し、 Leaflet.jsを使用して認証可能領域を設定し、指定された地域内でのみログインを許可する方法について説明し、より安全な位置ベースの認証システムを構築する方法を学びます。

受講前の注意

練習環境

  • 講義はWindows 10の基準で説明されています。他のOS環境でも完璧に開発が可能です！

  • レッスンでは Visual Studio Code を使用します。

学習資料

  • ノッション、フラッグハブリンクでお届けします！

選手の知識と注意事項

  • 基本的なHTMLタグ（h1〜h6、inputなど

    のタグ）

  • async awaitを理解していればいいですね！

  • javascript変数、関数宣言

こんな方に
おすすめです！

学習対象は
誰でしょう？

  • バックエンドなしでログインシステムを作りたい方々

  • Firebase認証を活用して実務プロジェクトを経験してみたいウェブ開発者

  • 会員登録・ログイン機能を含むポートフォリオウェブサイトを自分で作ってみたい方

  • 小・中・高・大学生の大会、キャップストーンプロジェクトで早く認証システムを構築したい方々

前提知識、
必要でしょうか？

  • 基本的なHTMLタグ

  • JavaScript 変数、関数の作り方

こんにちは
です。

188

受講生

8

受講レビュー

25

回答

5.0

講座評価

3

講座

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

カリキュラム

全体

39件 ∙ (6時間 47分)

講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなに役立つ受講レビューを書いてください！