前置き
メールアドレスログインと
要領は同じです!
コードもこちらに付け足します✍️
ということで
firebaseAuthを使います💡
使わなくてもできますが
その場合はやることが
3倍には増えます…笑
Google Cloud Platformから
OAuthクラウドIDを発行したり
tokenの照会をするコードを書いたり😦💦
firebaseAuthを使うと
すっっごく!!!
簡単に!!!
実装できます🌟
コードを追加
Googleサインインについてはこちら
まずはAuthentication > Sign-in method
Googleを選択
メールアドレスを選択し保存するだけ!
準備は整ったので
公式Contens2つめに参りましょう♪
Handle the sign-in flow with the Firebase SDK
必須項目:1, 5
Optional:2, 3, 4
ということで必須項目だけ
Vuexにコピペしていきます。
コード
) file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
import firebase from '~/plugins/firebase' export const state = () => ({ user: { uid: '', email: '', login: false, }, }) export const getters = { user: state => { return state.user } } export const actions = { login({ dispatch }, payload) { firebase.auth().signInWithEmailAndPassword(payload.email, payload.password) .then(user => { console.log('成功!') dispatch('checkLogin') $router.push('/') }).catch((error) => { alert(error) }) }, loginGoogle ({ dispatch }) { var provider = new firebase.auth.GoogleAuthProvider() firebase.auth().signInWithPopup(provider).then(function (result) { dispatch('checkLogin') }).catch(function (error) { console.log(error) }) }, checkLogin ({ commit }) { firebase.auth().onAuthStateChanged(function (user) { if (user) { commit('getData', { uid: user.uid, email: user.email }) commit('switchLogin') } }) }, } export const mutations = { getData (state, payload) { state.user.uid = payload.uid state.user.email = payload.email }, switchLogin (state) { state.user.login = true }, } |
解説
- actions loginGoogleを作成
ログインできたら
ログイン状態をtrueにしたいので
それを行うcheckLoginをdispatchで呼ぶ - 不要な物を削除
コメント
セミコロン(;)
var token
var user
) pages
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<template> <div class="login"> <p v-if="user.login" class="text" > {{ user }} </p> <form v-else class="form" @submit.prevent > <label class="label"> <span class="label"> email </span> <input class="input" type="text" v-model="email" > </label> <label class="label"> <span class="label"> password </span> <input class="input" type="password" v-model="password" > </label> <button class="button" type="submit" @click="login" > Login </button> <button class="button" type="submit" @click="loginGoogle" > googleでログイン </button> </form> </div> </template> <script> export default { computed: { user () { return this.$store.getters['user'] }, }, data () { return { email: '', password: '', } }, methods : { login (email, password) { this.$store.dispatch('login', {email: this.email, password: this.password}) }, loginGoogle () { this.$store.dispatch('loginGoogle') }, } } </script> |
) pages
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div class="page"> <p v-if="user.login" class="text" > ログインに成功! </p> </div> </template> <script> export default { computed: { user () { return this.$store.getters['user'] }, }, } </script> |
ログインはこれだけです🌟
アカウント作成や、
ログアウトの仕方はまた別記事にて♪