#はじめに
前回、Vue.jsを学び
Vue.jsを使って何を作るか？
Vue.jsを使ってやってみたい事は何か？
ということを考えてみた。
#Vue.jsを使って何を作るか？
真っ先に思いついたのが、コロナ渦の影響によりテレワークが多くなってきている昨今
出退勤の管理を行うところも増えてきている。
もちろん勤怠管理システムを使っているところもあるだろうが、
簡単にGSSを使って管理するところもあるので
GSSと連携したSPAの出退勤管理を作ろうと考えました。
#Vue.jsを使ってやってみたい事は何か？
上記で何を作るかが決まったので、やってみたい事は何か？
管理をする上で必要なものは認証だと考えています。
なのでGoogle認証や、Firebase認証を使ってログインしたユーザの出退勤を管理・・・とまでは考えています。
（あくまでもざっくりベース）
#Firebase認証
Google認証よりまず、Firebase認証を試してみました。
以前GoogleやTwitter、Facebook等の認証系は触ったことはありましたが、
Firebaseはそれより簡単に設定できました。
１．Filebaseでプロジェクトを作成
Filebaseにアプリを追加するだけ！（とても簡単！）
２．認証方法を設定
Authenticationページでmethodを有効にするだけ！（とても簡単！）
３．プロジェクトにアプリを追加
FilebaseのAPI_KEYや認証ドメインを取得するためにアプリを追加するだけ！
今回はWebページですので以下画面になります。
これだけです！
あとは追加したアプリのAPI情報をvue.jsの方に設定して認証するだけで簡単に認証することができました！
vue.js側の設定
methods: {
signIn: function () {
firebase
.auth()
.signInWithEmailAndPassword(this.username, this.password)
.then(
(user) => {
alert("Success!");
this.$router.push("/");
},
(err) => {
alert(err.message);
}
);
},
}
#終わりに
vue.js側の設定も簡単で、こんなにも簡単に認証ができるとは思わなかったのでビックリしました。
JavaだとAPIキーからトークンを取得したり・・・なんやかんやして認証APIを叩いたりしていたので結構大変だった印象があります。
※もちろんライブラリを使えば楽に実装はできたのでしょうが・・・
次回はGoogle認証を試してみたいと思います。