すべてのカテゴリ

Firebase のログイン機能の設定前回は、Vue と Firebase を利用してログイン機能を実装する方法を紹介しました。今回は、Firebase 側のもう少し詳しい設定について紹介します。Firebase のログイン機能Firebase のログイン機能については、前回の記事では簡単に触れただけでした。どちらかというと、Vue の記述方法を中心に紹介したので、今回は、Firebase のログイン機能を中心に紹介します。Firebase はデータベースやオンラインストレージなどいろいろな機能を提供しています。本来は、Web サーバー側でサポートする機能を簡単なインターフェースで利用できるようにしているのが便利な点です。その中の機能の一つがログイン（ユーザー認証）機能です。このログイン機能もいくつかの方法が提供されてます。シンプルに、E-Mail アドレスとパスワードでユーザー管理する方法から、メジャーなインターネットのサービス、Google や Facebook といったサービスのユーザー認証（ログイン）を通して、利用者を特定する方法、携帯の電話番号を利用する方法など、必要に応じて選べるようになっています。Firebase の利用には、Google のアカウントが必要です。この連載でも、何度か紹介していますが、Firebase を利用するにはまずは Google にアカウントを作成してください！Firebase コンソールFirebase の各種設定をするには、基本的にFirebase コンソールを利用します。「コンソール」といっていますが、要は Web サイトです。このサ

セキュリティルールに必須！〜利用者の特定Firebase のセキュリティルールを設定する上で必要なポイントは「人」「場所」「出来る事」と言う話を紹介しました。その中の一つの「人」を区別するには、ユーザー認証（ログイン）が必要になります。一見シンプルなログインですが区別の仕方によって作り方も使い方も変わってきます。この記事では、ユーザー認証をどの様に利用するかを紹介します。どのような「区別」が必要か？ユーザー認証（ログイン）を利用すれば、使っている人が誰なのかを特定することができます。Firebase のセキュリティルールを設定する上で利用者を区別する必要があるので、ユーザー認証はある意味必須です。しかし、実際にどの様に利用するかで実際のサービスの実装は変わってきます。前回の記事でも紹介していますが、利用者の区別の方法は幾つかあります。それによってユーザー認証（ログイン）の処理が必要な場所も変わってきます。もちろん、開発するサービスやアプリの機能によってそのやり方も大きく変わってしまいます。そこで、この記事では現在紹介している「ブログサービス」を例に考えてみます。ブログサービスの場合はユーザー認証は不要！？Firebase のセキュリティルールを設定するためには、利用者の区別ができれば良いわけです。従って、ブログサービスの場合は、基本は「ユーザー認証」は行わないと言う方法が一般的に使われます。 ユーザー認証を行わないでどうやって区別するかという事ですが、あくまで「基本的に」行わないと言う事です。つまり、一般の利用者は「何もしない＝ユーザー認証をしない」と言う方法で区別します。一方

Firebase のセキュリティルールは「人・場所・できる事」Firebase のセキュリティルールは一見複雑そうに見えますが、基本は「人」、「場所」、「出来る事」をまとめる事です。この記事では、Firebase のセキュリティルールの基本を紹介します！Firebase のセキュリティールールとは何か？Firebase を Web ブラウザ（フロントエンド）から利用する際には、Firebase のセキュリティルールを設定する事が必須になります。ところで、このセキュリティルールとは何かご存知ですか？まずは、そこから紹介します。 セキュリティルールは一言で言えば、「誰がどこで何をしていいかを決める」事です。従って、セキュリティルールを設定する上でのポイントは：＊　誰（人）＊　どこ（場所）＊　出来ること（何をするか）この三つを決めれば良い事になります。人を特定する誰がどこですか何をして良いかを決めるためには、最初に必要な事は「人を特定」する必要があります。 Web のアプリやサービスで人を特定する方法は、基本的には「ユーザ名」で区別しています。特定のユーザー名のパスワードを知っていればその人と見做すという仕組みです。これを、ユーザー認証機能とかログイン（サインイン）機能と呼んでいます。Firebase の場合は、大きく三つの方法があります。Firebase コンソールにアクセスできる人（管理者）とそれ以外の人ログインしている人としていない人ユーザー認証をして個別のユーザーとして区別Firebase のコンソールで必要な操作が間に合うのであれば、特にユーザー認証（ログイン）の機能を作る

Firebase のログイン機能だけを使う！前回の記事で、Web サイトのアクセス権限を細かく設定するには、ユーザー認証機能（ログイン機能）が必要だということを投稿しました。アクセスする利用者を区別するためには、ユーザー認証などによる利用者の特定が必要不可欠ですが、それ以外にもユーザー認証のイベントの検出やセッションの管理など必要な事はたくさんあります。他の部分は、SQL などのデータベースを利用するなどする場合でも、こうしたユーザー認証（ログイン機能）に関連して必要な実装には手間も時間もかかります。Firebase を使うというと全てのバックエンドに関連した機能を Firebase で実装するように考えがちですが、一部の機能だけを利用するというのもありです！ユーザー認証はログインだけではない！ユーザー認証の中心的な機能はログイン機能です。ユーザ名とパスワードを入力して「本人を特定する」というのは機能の中心であることに間違いはありません。このユーザー名とパスワードでの認証自体は、自分で作成してもそれほど複雑ではありません。基本的にユーザーのデータベースとパスワードの一致をチェックする機能があれば実現できるので実装としては比較的簡単です。しかし、セキュリティを考えるとパスワードをそのままの形でデータベースに保存するのは問題があるので、通常は暗号化（ハッシュ化）して保存するのが普通です。さらに、パスワードを忘れた場合のリカバリーの処理や、パスワードの変更などの処理が必要になります。さらに、ログインの状態が変化するイベントの検出も重要です。ログアウトした場合は、特定の利用者のみに限定

FirebaseとVueで作るお問い合わせ管理以前Webサービス制作で同じような記事を投稿しています。しかし、今回はFirebaseを使ってという点でお改めて記事を書き直していますのでご覧ください。（以前は「Webサービス」を主体に紹介しています） FirebaseとVueを組み合わせて使う場合、「npm」の活用が便利です。Firebaseのモジュールもインストールしてしまえば、簡単にVueのプロジェクトのコードから呼び出す事ができます。Vueを使うための準備Vue CLIのインストール FirebaseもVueも「npm」を活用した方が便利です。CDNのリンクをHTMLに張り付けても使えますが、WebサービスやWebアプリを開発する上で、利用価値の高い、既存のモジュールを手軽に取り込めるのは大きな魅力です。 まずは、Vueを使うための仕組みVue CLIをインストールします。[npm install -g ＠vue/cli]便利なUIを活用 コマンドラインからもVueは使えますが、UIが便利です。npmのコマンドで、「vue ui」と入力して、見やすいUI上でVueのプロジェクトの管理をするのが便利です。 Vueのプロジェクトを作ります。 Vueの場合標準ではJavaScriptを使う設定になっているので、Typescriptを使って開発をする場合には、マニュアルで必要なオプションを選択する必要があります。難しい設定はないので、一度マニュアルで設定して、設定内容を保存しておけば次回以降はその設定を読み込めば自動的に設定されます。予め設定されているプロジェクトの不要なファ