省エネエンジニア

Flutter、vue.js修行中。

【Vue】【Quasar】Google認証

こんにちは。
今回はGoogle認証を作っていこうと思います。

Googleプラグインはすでに入っている前提で書いていきますので、そちらのインストールがお済みでない場合はこちらを参考にしてみてください!

qkuronekop.hatenablog.jp

Google認証はメールリンクに比べると手間が少ないですね。
scriptのところだけ書いておきます。

<script>
import firebase from 'firebase/app';
import 'firebase/auth';

export default {
  name: 'PageIndex',
  methods: {
    toGoogle() {
      const provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          console.log('success');
          console.log(result);
        })
        .catch((error) => {
          console.log('error');
          console.log(error);
        });
    },
  },
};
</script>

このtoGoogleをボタンイベントにつけておきます。
ボタンをクリックするとポップアップが立ち上がり、どのGoogleアカウント使うかの選択画面になります。
アカウントを選択すると(私の場合すでにログインしているので)認証完了です。
ログインしていない場合にはログインに進むと思います。

Google認証を使うと、メールアドレスやユーザー名も取得できます。

次は、カレンダーを使ってみようと思います。