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

<!-- wp:paragraph -->
<p>前回(<a rel="noreferrer noopener" href="https://www.mkhs.work/wordpress2/?p=274" target="_blank">https://www.mkhs.work/wordpress2/?p=274</a>)Google Firebaseでソーシャル認証の設定を行いました。今回はVue.jsでGoogle認証の組込みを行います。コンポーネントのサンプルは下記です。</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"js","langName":"JavaScript"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;button class=&quot;btn btn-secondary&quot; v-on:click=&quot;authMethod&quot;&gt;
      認証
    &lt;/button&gt;
    &lt;p class=&quot;h5&quot;&gt;
      {{ data.email_address }}
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import { reactive} from &#39;vue&#39;
  import { initializeApp } from &#39;firebase/app&#39;;
  import { getAuth, signInWithPopup, GoogleAuthProvider } from &quot;firebase/auth&quot;;

  export default {
    props:{
    },
    setup(){
      const authMethod = ()=&gt; {

      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
      }
    }
  }
&lt;/script&gt;
</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>XXXXXは伏字です。伏字部分はプロジェクトの設定画面で確認できます。</p>
<!-- /wp:paragraph -->

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/17f62188-2691-84bf-b696-7d30e833e0d9.png)

<!-- wp:paragraph -->
<p>また、下図の通りコードのサンプルがありますので、コピペできて便利です。</p>
<!-- /wp:paragraph -->
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/eafbf657-339a-1290-24b7-9e2701e65c8d.png)

<!-- wp:paragraph -->
<p>サンプルでは、認証ボタン押下でGoogleのアカウント選択画面が現れ。。。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":322,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.mkhs.work/wordpress2/wp-content/uploads/2022/01/image-29.png" alt="" class="wp-image-322"/></figure>
<!-- /wp:image -->
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/4c34eadc-1b5b-bc53-1620-75983d7a040a.png)

<!-- wp:paragraph -->
<p>ログインするアカウントを選択すると、認証したユーザーのメールアドレスを表示します。</p>
<!-- /wp:paragraph -->

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/c619221d-257b-4155-e1ff-74ce63a948d1.png)