今回は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を使った自動メール機能を気分で作ったので、次回はそっちを紹介しようか迷っています。。。
最後まで読んでくださりありがとうございました。