Vue.jsでGoogle認証を組み込む

前回(https://www.mkhs.work/wordpress2/?p=274)Google Firebaseでソーシャル認証の設定を行いました。今回はVue.jsでGoogle認証の組込みを行います。コンポーネントのサンプルは下記です。

<template>
  <div>
    <button class="btn btn-secondary" v-on:click="authMethod">
      認証
    </button>
    <p class="h5">
      {{ data.email_address }}
    </p>
  </div>
</template>
<script>
import { reactive} from 'vue'
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
export default {
props:{
},
setup(){
const authMethod = ()=> {
  const firebaseConfig = {apiKey: &quot;XXXXX&quot;, 
                          authDomain: &quot;XXXXX&quot;,
                          databaseURL: &quot;XXXXX&quot;,
                          projectId: &quot;XXXXX&quot;,
                          torageBucket: &quot;XXXXX&quot;,
                          messagingSenderId: &quot;XXXXX&quot;,
                          appId: &quot;XXXXX&quot;,
                          measurementId: &quot;XXXXX&quot;}
  initializeApp(firebaseConfig);                            
 
  const provider = new GoogleAuthProvider()
  const auth = getAuth();
  signInWithPopup(auth, provider).then((result) =&gt; {
    const user = result.user
    data.email_address = user.email
  }).catch((error) =&gt; {
    const errorCode = error.code
    const errorMessage = error.message
    const email = error.email
    console.log(&#39;errorCode: &#39; + errorCode + &#39;/errorMessage: &#39; + errorMessage + &#39;/email: &#39;+ email)
  })
}

  const data = reactive({
    email_address: &#39;&#39;
  })
  return {
    data, authMethod
  }
}

}
</script>

XXXXXは伏字です。伏字部分はプロジェクトの設定画面で確認できます。

また、下図の通りコードのサンプルがありますので、コピペできて便利です。


サンプルでは、認証ボタン押下でGoogleのアカウント選択画面が現れ。。。


ログインするアカウントを選択すると、認証したユーザーのメールアドレスを表示します。