views4GCPのストレージサービスについてまとめてみた。Authenticationの特徴や認証の仕組みについて解説しました。今回は実際に、認証を実装したWebアプリを作っていく様子をお見せしたいと思います。Authenticationを使うとこんな簡単にログイン画面が作れるんだということを実感していただける内容になっていると思います。いったフロントエンドフレームワークを使っていないので、これらのフレームワークに馴染みのない方でも簡単に作ることができると思います。本稿の内容を実際に試すには以下のツールが必要です。バージョンは検証時に筆者が使用したバージョンです。できれば最新版を推奨します。6.0.1これらのツールのインストール手順を紹介します。インストールしている場合はスキップしてください。使用しているOSに対応するインストーラー(推奨版)をダウンロードします。ダウンロードしたインストーラーを実行してインストールを行います。instructionsの手順に従ってインストールします。コマンドが使えるようになります。以下のコマンドを実行するとバージョンを確認できます。コマンドが使えるようになります。コマンドが使えるようになります。バージョンを確認してみましょう。プロジェクトを作成するhttps://firebase.google.com/にアクセスします。右上の「コンソールへ移動」をクリックします。「プロジェクトを追加」クリックします。ダイアログが表示されます。パスワード認証を有効化する左端のメニューから「Authentication」をクリックすると現れる画面の「ログイン方法を設定」ボタンをクリックします。パスワード」をクリックします。ダイアログが現れるので、上のトグルを有効にした後保存をクリックします。アプリを追加する左のメニューバーの歯車マークをクリックし、「プロジェクトの設定」を選択します。「マイアプリ」の項目の中にプラットフォームを選択するアイコンがあるので「Web」のアイコンをクリックします。(アイコンの上にマウスポインタを置くと「Web」と表示されます)アプリのニックネームを入力し、「アプリを登録」ボタンをクリックします。スクリプトが表示されるのでコピーして「次へ」ボタンをクリックします。(このスクリプトはあとで使うのでどこかに保存しておいてください)「次へ」をクリックします。「コンソールに進む」をクリックします。ディレクトリを作って移動します。ここをアプリのルートディレクトリとします。ディレクトリ内で次のコマンドを実行します。initHostingにカーソルを合わせてSpaceキーを押した後にEnterを押します。プロジェクトを選択します。Enterを押します。完了するとappディレクトリ直下にfirebase.jsonとpublicディレクトリが作成されます。firebase.jsonHTMLでログイン画面のレイアウトを設定するpublic/index.htmlでアプリのトップページの画面レイアウトを定義します。デフォルトで定義されているコードを以下のコードに置き換えます。ここで先ほどコピーしたスクリプトを指定位置に貼り付けます。</body></html>こんな感じのレイアウトができます。ログイン画面のレイアウトを記述しました。次はユーザーの新規登録(サインアップ)/ログイン/ログアウトの処理を記述する必要があります。いってもfirebaseのライブラリを使うだけなので複雑な処理を書く必要はありません。firebase.json長くなるので、重要な部分のみ抜粋して解説します。GitHubで全ソースコードを公開していますので興味のある方はこちらをご覧ください。オブザーバーを設定します。onAuthStateChangedを実行するとオブザーバーがユーザーのログイン/ログアウトを監視し、ユーザーがログイン/ログアウトをすると引数内の関数を実行します。変数にサインインしたユーザーの情報が入力されます。今回はユーザーのメールアドレスとUID(ユーザーID)を取得してブラウザに表示するようにしてみます。log(`ログインしました。upボタンをクリックするとonSignUpButtonClicked関数が実行されます。引数に渡すとユーザーをサインアップ(新規作成)した後にログインします。log(`サインアップしました。log(`サインアップできませんでした。同じメールアドレスを持ったユーザーが存在してパスワードが一致した場合にそのユーザーでログインします。log(`ログインできませんでした。現在ログインしているユーザーをログアウトさせます。log("ログアウトしました。log(`ログアウトできませんでした。デプロイする次のコマンドを実行するだけでデプロイは完了です。deployデプロイが完了するとコンソールにURLが表示されるのでブラウザでアクセスします。クリックするとユーザーが新規登録されます。Firebaseのコンソールから確認してみましょう。ユーザーを管理するFirebaseコンソールにアクセスしてAuthenticationを開くと登録されているユーザーの一覧が表示されています。同じUIDのユーザーが登録されていることが確認できます。最後に最後までご覧いただきありがとうございました。今回作ったアプリのソースコードはこちらで公開していますので、興味があったらご覧ください。基礎編をご覧になっていない方はこちらも是非ご覧ください。