강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

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

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

  • dakgangjung123
로그인
인증
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 変数、関数の作り方

こんにちは
です。

460

受講生

25

受講レビュー

46

回答

5.0

講座評価

6

講座

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

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

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

 

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

 

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

カリキュラム

全体

39件 ∙ (6時間 47分)

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

受講レビュー

全体

5件

5.0

5件の受講レビュー

  • openuriz님의 프로필 이미지
    openuriz

    受講レビュー 2

    平均評価 5.0

    5

    33% 受講後に作成

    • 닭강정
      知識共有者

      안녕하세요. openuriz님. 소중한 별점 남겨주셔서 감사합니다. 덕분에 다음 강의를 준비하는 데 큰 힘이 됩니다. 앞으로도 학습에 많은 도움이 되길 바랍니다!

  • 하하호호님의 프로필 이미지
    하하호호

    受講レビュー 3

    平均評価 5.0

    5

    95% 受講後に作成

    윈도우기반 응용프로그램 개발자인데 웹쪽으로는 개인적 스터디로 강의 들었습니다. 다양한 인증 관련해서 책 한권 사는 것 보다 훨씬 실무적인 내용이라 도움이 많이 되었네요!

    • 닭강정
      知識共有者

      안녕하세요, 할수있다12님! 정말 감사하고 좋은 수강평 남겨주셔서 진심으로 감사드립니다. 인증 관련해서 실무적인 도움을 받으셨다는 말씀에 강의자로서 매우 큰 보람을 느낍니다. 앞으로도 웹 개발이라는 새로운 영역에서도 할수있다12님의 역량이 멋지게 발휘되기를 진심으로 응원합니다. 필요하시거나 궁금한 부분이 생기시면 언제든 편하게 문의 주세요! 다시 한 번 소중한 수강평에 감사드리며, 늘 건승하시길 바랍니다!

  • 이주영님의 프로필 이미지
    이주영

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    • 닭강정
      知識共有者

      소중한 의견 남겨주셔서 감사합니다. 강의가 유익하게 다가가셨기를 바라며, 관련하여 추가로 궁금하신 점이 있으시면 언제든 문의 부탁드립니다.

  • hdr.ecssh님의 프로필 이미지
    hdr.ecssh

    受講レビュー 3

    平均評価 5.0

    5

    13% 受講後に作成

    • 닭강정
      知識共有者

      수강해 주셔서 감사합니다! 유익한 강의가 되길 바라며, 열심히 학습하시길 응원하겠습니다! 😊

  • neobns.jwlee님의 프로필 이미지
    neobns.jwlee

    受講レビュー 20

    平均評価 4.8

    5

    31% 受講後に作成

    왜 이제서야 .... 지금이라도 만난것이 행운입니다

    • 닭강정
      知識共有者

      안녕하세요. neobns.jwlee님! 이제라도 만나게 되어 정말 다행입니다! 앞으로도 함께 좋은 경험을 쌓아가길 바라며, 많은 도움이 되길 바랍니다. 소중한 수강평 감사합니다!

¥2,343

dakgangjung123の他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!