中安拓也のブログ

プログラミングについて書くブログ

Firebase

Angular + Firebase Realtime Databaseでメンテナンスと強制バージョンアップのポップアップを表示する

はじめに Firebaseが提供しているデータベースについて 環境 環境構築 補足 Realtime Databaseのデータ構造を構築する メンテナンスと強制バージョンアップのポップアップを表示する 動作確認 メンテナンスメッセージの表示 強制バージョンアップメッセージ…

Angular + Firebase でGitHub認証

はじめに 関連記事 環境 Step1: FirebaseコンソールでGitHub認証を有効にする Step2: GitHubからクライアントIDとクライアントシークレットを取得する Step3: GitHubログインボタンのテンプレートを作成する Step4: リダイレクトモードでFirebase認証(GitHub…

Angular + Firebase でGoogle認証

はじめに 関連記事 環境 FirebaseコンソールでGoogle認証を有効にする Googleのログインボタン作成 Step1: Googleのロゴアイコンを取得 Step2: GoogleカラーをIonicに追加 Step3: ログインボタンのテンプレートを作成 Step4: リダイレクトモードでFirebase認…

【Angular】リダイレクトモードでFirebase認証を行う

はじめに 環境 リダイレクトモードでFirebase認証 ポップアップモードのFirebase認証 参考サイト はじめに FirebaseのSNS認証には、ポップアップウィンドウを表示するポップアップモードとログインページにリダイレクトするリダイレクトモードの2種類の形式…

【Angular + Firebase】アプリケーションをデプロイする

はじめに 前提条件 環境 デプロイ準備 アプリケーションを本番ビルドする デプロイ実施 参考サイト はじめに AngularとFirebaseを使って作成したアプリをFirebaseのHostingという機能を使ってデプロイします。 前提条件 Angularプロジェクトは作成ずみ Fires…

Angular + Firebase でメモアプリを作りました

作ったメモアプリ。名前はスリーメモ はじめに スリーメモの機能 SNS認証 フォルダ スリーメモで使われている技術 はじめに Firebaseの勉強のためにスリーメモというアプリを作りました。Evernoteみたいなメモアプリです。モバイル対応はまだできていないの…

【Angular + Firebase】ログイン中のアカウントの情報を表示する

はじめに 環境 ログイン中のアカウントの情報を表示する 認証のサービスクラスを作成する ヘッダーにアカウントの情報を表示する HTMLテンプレート コンポーネントクラス 参考サイト ログイン中のアカウントの情報を表示している はじめに ログインしている…

Angular + Firebase でFacebook認証

はじめに 環境 Facebook for Developersアカウントを作成 アプリの登録 FirebaseコンソールでFacebook認証を有効にする 「Facebookでログイン」ボタンを作成する Facebook認証機能の実装 補足: Facebook認証を利用したアカウント登録機能の実装 参考サイト …

Angular + Firebase でTwitter認証

はじめに 環境 TwitterのAPIキーとAPIシークレットを取得する Twitter Developer アカウントの作成 アプリの登録 FirebaseコンソールでTwitter認証を有効にする 「Twitterでログイン」ボタンを作成する Twitter認証機能の実装 補足: Twitter認証を利用したア…

【Angular】Guardで認証されていないアカウントをブロックする

やりたいこと 前提 Guardを作成する ログインしてないアカウントをホーム画面に入れない ログイン済みのアカウントをログイン画面に入れない 動作確認 未ログインのアカウントをホーム画面に遷移させない ログイン済のアカウントをログイン画面に遷移させな…

【Angular】Firebase認証からログアウトする

AngularとFirebaseを使ったログイン処理については、下記の記事ですでに実装済みのため、今回はログアウト処理を実装していきます。 関連記事 バージョン情報 実装 ヘッダーにログアウトボタンをつける ログアウト処理を実装する 動作確認 関連記事 Angular…

【Angular】HttpInterceptorを使ってスピナーを表示する

スピナーが表示されている様子 はじめに バージョン情報 開発 AppModuleの設定 スピナーコンポーネントの作成 スピナーサービスの作成 インターセプターの作成 AppModuleの設定 動作確認 HttpClientによるHTTPリクエスト HttpClientを使わない場合 参考サイ…

Angular + Firebase でアカウント登録画面の作成

AngularでFirebase認証(その1) Firebaseのセットアップ - 中安拓也のブログ AngularでFirebase認証(その2) Angular Materialを使ったログイン画面の作成 - 中安拓也のブログ AngularでFirebase認証(その3) Firebase Authentication の呼び出し - 中安拓也…

AngularでFirebase認証(その3) Firebase Authentication の呼び出し

前回の記事はこちら 引き続き、AngularとFirebaseを使って認証機能を作成していきます。 前回はログイン画面の見た目を作成したので、今回はそのログイン画面にFirebase Authenticationを使って認証機能を導入していきます。 テストアカウントの作成 認証機…

AngularでFirebase認証(その2) Angular Materialを使ったログイン画面の作成

前回の記事はこちら 引き続き、AngularとFirebaseを使って認証機能を作成していきます。 前回ではFirebaseコンソールで認証機能を有効化したあと、AngularプロジェクトにAngularFireをインストールするところまで実施しました。 今回の記事では、AppModuleの…

AngularでFirebase認証(その1) Firebaseのセットアップ

Angularにメールアドレスとパスワードを使用するFirebase認証を実装していきます。 Firebaseのセットアップ Angularプロジェクトのセットアップ バージョン情報 参考サイト Firebaseのセットアップ 自分のGoogleアカウントでFirebaseの管理画面にログインし…