PROGRAMMING

Googleログイン機能【Vue.js】

今回はSlackクローンにGoogleのログイン機能をつけていきたいと思います。

今日の内容
・Googleログイン機能

今日はシンプルにgoogleの機能の実装についてを詳しくやっていきます。

学習内容

googleログイン機能

googleでのログイン機能をつけるのって難しそうおいうイメージがあると思いますが、firebaseを使えばすぐに実装することが出来ます。

まずは、firebaseからAuthenticationのページにいきましょう。

そしたらGoogleの部分をクリック。

右上のボタンを有効にして、プロジェクトのネームとメールアドレスを入力します。

上のプロジェクトネームはなんでもいいです。

メールアドレスもなんでもいいです。

これでfirebaseでの設定は終わりです。

次にpage/index.vueに移って、作業をしていきましょう。

下のは現在のファイルの状態です。

ここからログインできるようにしていきます。

<template>
  <div class="container"></div>
</template>
<style>
.container {
  height: 100%;
}
</style>

下のが完成したコードです。

このコードを上から解説していこうと思います。

<template>
  <div class="container">
    <button @click="login">ログイン</button>
  </div>
</template>
<script>
import { firebase } from '~/plugins/firebase'

export default {
  methods: {
    login() {
      const provider = new firebase.auth.GoogleAuthProvider()
      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          const user = result.user
          console.log(user)
        })
        .catch((error) => {
          window.alert(error)
        })
    },
  },
}
</script>
<style>
.container {
  height: 100%;
}
</style>

まずはログインボタンを追加します。

<template>
  <div class="container">
    <button @click="login">ログイン</button>
  </div>
</template>
<script>

<button></button>でボタンを追加します。

@はv-on:の省略形です。<button @click="login">ログイン</button>では、ボタンをクリックするとloginというメソッドが呼び出されるように設定します。

 methods: {
    login() {
      const provider = new firebase.auth.GoogleAuthProvider()
      firebase
        .auth()
        .signInWithPopup(provider)

この部分は下記のページから抜粋しました。

まずは、下記のようにGoogle プロバイダ オブジェクトのインスタンスを作成します。

const provider = new firebase.auth.GoogleAuthProvider()

つまり、これでログイン方法はgoogleでログインしますとproviderに定義しているわけですね。

そして、次はsigninメソッドを実行するようにします。

firebase.auth().signInWithPopup(provider)

.signInWithPopupとはsigininメソッドの一つで、実行するとモーダルが開いてログイン画面が開きます。

providerを引数にしていますね。

つまりここでは、モーダルが開いてgoogleでログインできるようにするということですね。

そして、最後にログインした時の処理を書きます。

.then((result) => { 
  const user = result.user
          console.log(user)
        })
        .catch((error) => {
          window.alert(error)
        })

ログインに成功した時にユーザーの情報が出力されるようになっています。

そして、失敗した時にはエラーメッセージが出るように設定してあります。

これでgoogleのログイン機能が実装できたはずです。

確認してみましょう。

きちんとログインできていました。

まとめ

これでgoogleのログイン機能を実装することが出来ました。

次回はログインモーダルについてやっていきたいと思いますが、sendgridのAPIを使った自動メール機能を気分で作ったので、次回はそっちを紹介しようか迷っています。。。

最後まで読んでくださりありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.