見出し画像

初心者がVue.js+Firebaseで認証付きチャットを作ってみた

Vue.jsとFirebaseに入門したくて、公式チュートリアルをやってみました😁

 Firebaseでプロジェクトを作成

Firebaseコンソールで、「プロジェクトを追加」から必要情報を登録していきます。流れてくるフォームに入力していくだけです。

認証方法を選ぶ

プロジェクトを作成したら、コンソールTOPページの一覧に追加されます。そこからプロジェクトTOPに入れます。

プロジェクトTOPに入り、左メニューから「Authentication」> 「ログイン方法」を開きます。Firebaseでサポートしている認証方法は下記のようです(2020/01/26現在)。

- メール/パスワード
- 電話番号
- Google
- Playゲーム
- Game Center (Beta)
- Facebook
- Twitter
- GitHub
- Yahoo!
- Microsoft
- Apple
- 匿名

こんなにサポートされているのは驚きでした!🤩

今回は公式チュートリアルに従って、Twitterを「有効」にします。
「有効」にするとAPIキーとAPIシークレットのフォームが出てきますが、一旦そのままにして、次に進みます。

Twitter開発者アカウントを申請

Twitterと連携するには、Twitterアプリケーションを作成して、APIキーを取得する必要があります。

私はまず、

ここでTwitter開発者アカウントを申請しなければなりませんでした。「Create an app」をクリックすると申請画面に飛びます。

まず、「What is your primary reason for using Twitter developer tools?」で、APIの利用目的を選択します。今回は個人的なアプリケーション用ですが、ぱっと見た感じ当てはまりそうなものがなかったので、「Doing something else」を選択しました。(私は英語が得意ではありません。もしかするとフィットする選択肢があったかもしれませんが、スルーします。笑)
スクリーンショット 2020-01-26 12.51.07

次に、「This is you, right?」で、アカウント情報を設定します。
自分のTwitterアカウントをdeveloperアカウントとして登録します。
ここでは、2段階認証によって設定を行います。自分の電話番号を登録して、送信されてくる認証コードで認証を完了させます。

加えて、住んでいる国とニックネームを決めて、次に進みます。

スクリーンショット 2020-01-26 12.59.10

次に進むと、申請理由を具体的に "英語で" 述べよ、と言われます。
ここはもう、頑張るしかないです。
質問内容は以下の通りです。意味は、Google翻訳に頼りました。

- In English, please describe how you plan to use Twitter data and/or APIs. The more detailed the response, the easier it is to review and approve.
- Are you planning to analyze Twitter data?
- Will your app use Tweet, Retweet, like, follow, or Direct Message functionality?
- Do you plan to display Tweets or aggregate data about Twitter content outside of Twitter?
- Will your product, service or analysis make Twitter content or derived information available to a government entity?

私は、とりあえず一番上のやつだけ、中学英語レベルの簡単な文で乗り切り、確認画面に進み、申請を完了しました。

メールが届く

Verify your Twitter Developer Account

というメールが届きます。メール内容は、

Thanks for applying for a Twitter Developer account.
Please confirm your email address to complete your application.

というものなので、とりあえず「Confirm your email」をクリックします。すると、下記ページに飛びます。

スクリーンショット 2020-01-26 14.06.31

ウェルカムされたので、とりあえずTwitter開発者アカウントは作れたようです。

Twitter アプリのセットアップ

ここでようやく、チュートリアルの手順に戻ります。
まず、Twitter アプリを作成します。
先ほどのウェルカムページに、「Create an app」とあるのでそこをクリックし、

スクリーンショット 2020-01-26 14.19.26

今度はアプリ一覧画面に遷移するので、また「Create an app」をクリックします。すると、チュートリアルに載っているキャプチャの画面が出てくるので、指示通り登録をしていきます。

Twitterアプリが作り終わったら、パーミッションを設定し、APIキーを取得して、Firebaseコンソールに戻ります。

Firebaseの設定

ここではデータベースへのアクセスルールを決めるようです。

この辺りはいまいちピンと来なこなかった、とりあえずコピペで乗り切ります。

ここまでは、Firebase側の設定だけでしたが、
次からVue.jsを使ってアプリケーションを作っていくフェーズに入ります。

Vue.jsの環境構築 with Docker

ここまで来て、Vue.jsを動かす環境構築をしていないことに気づいたので、
とりあえず、docker-composeでnodeコンテナを立てて、そこにVue CLIをインストールしたいと思います。

// 任意のディレクトリにて
$ mkdir node
$ cd node
$ touch Dockerfile
$ touch docker-compose.yml
$ mkdir ./src

Dockerfileには、下記の通り記述します。

FROM node:12.12.0-alpine

WORKDIR /usr/src/app

RUN apk update && \
   npm install -g npm @vue/cli

docker-compose.ymlには、下記の通り記述します。

version: '3'
services:
 app:
   build: .
   ports:
     - 9050:9050
   volumes:
     - .:/usr/src/app
   stdin_open: true
   tty: true
   command: /bin/sh

記述が終わったら、下記コマンドを実行し、Dockerfileをビルド&コンテナを起動します。

// nodeディレクトリ直下にて
$ docker-compose up -d --build

コンテナが立ち上がったら、

$ docker-compose exec app sh

でコンテナ内に入り、Vueプロジェクトを作成します。

/usr/src/app # vue create .

ポートの設定も変更します。
プロジェクトルートに、vue.config.jsを作成し、下記の通り記述します。

module.exports = {
 devServer: {
   port: 9050,
   host: '0.0.0.0',
   disableHostCheck: true,
 },
};

そして、サーバーを起動します。

/usr/src/app # npm run serve

http://localhost:9050 にアクセスして、下記画面が表示されれば環境構築は完了です。

スクリーンショット 2020-01-26 15.25.14

Vue.jsでFirebaseを利用する

ここはチュートリアル通りに進めていきます。

// コンテナ内にて
npm install firebase

チュートリアルでは、「Authentication」> 「ウェブ設定」をクリックして出てくるコードを貼り付ける、とありますが、いくら探してもありません。

調べてみると、このコードはFirebaseにアプリを追加すると出てくる模様。

ドキュメント通り登録すると、例のコードが出てきますので、それを指示通り、src/main.js内に貼り付けます。

さらに、下記コマンドで必要コンポーネントをインストールして、

// コンテナ内にて
npm install vue-nl2br

あとは、チュートリアル内にある、App.vueとapp.css(GitHubリポジトリ)をコピペして、再度 http://localhost:9050 にアクセスします。

「ログイン」ボタンをクリックして、いつものTwitter認証ウィンドウが表示され、認証後にhttp://localhost:9050 へリダイレクトされれば、ひとまずチュートリアル完了!!!

所感

やりながらメモついでに書いていたのですが、Twitter開発者アカウントのところで燃え尽きて、肝心のVue.jsの実装の方(認証、チャット周り)はコピペしただけになってしまいました。笑

次の記事で、Vue.jsのコードを詳しくみていきます!

下記記事、大変参考になりました。

参考

[Vue.js 公式チュートリアル] 認証付きの簡易チャットを作る!
ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4]

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

8
2019/03/01~ web開発/PHP/Laravel。 Vue.js/Docker/CircleCI 勉強中。