前置き
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_9db02f41d0392738ea0e9d513a4b1057-1024x757.png?resize=920%2C680)
既に作成されたSNSアカウントで
ログインできるって便利ですよね✨🚲
今回はFacebookでログインしてみましょう🙋♀️
メールアドレスログインと
要領は同じです!
コードもこちらに付け足します✍️
ということで
firebaseAuthを使います💡
Step1: FBアプリの作成
外部のアカウントでログインするため
もろもろ必要になります🌟
Facebookサインインについてはこちら👀
Before you begin
1は済んでいるので2から始めましょう!
Facebook for Developers
ここでアプリを作成し
App IDとApp secretを確認していきます💡
1. まずはFBアカウントでログイン
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_8f83141a2b56ee6abbddb05ee57ec72f-1024x585.png?resize=920%2C526)
2. マイアプリをクリック
(ログインの文字がマイアプリに変わってます)
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_aa39d617950539ebe34dd11c46630b5c-1024x585.png?resize=920%2C526)
3. 新しいアプリを作成
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_5b6b52acf8659f9e5b267c72e57d9e14-1024x350.png?resize=920%2C314)
4. アプリ名を入力
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_90d3e2bb79513a69c55529717798c562-1024x552.png?resize=920%2C496)
「アプリIDを作成してください」をクリック
セキュリティチェックが通ればアプリが作成されます🌟
Step2: FBアプリの連携
1.App IDとApp secretを確認
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_af5be3dba81ac911f05e08aa2bb8cdd2-1024x546.png?resize=920%2C491)
アプリが作成されると
そのままアプリのダッシュボードへ行きます。
サイドメニュー 設定 > ベーシック
2. firebaseに貼り付ける
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_28c64d9d6bc1b6e81404388a97875261-1024x659.png?resize=920%2C592)
firebaseのプロジェクトサイドメニューAuthentication
> Sign-in method > Facebook
> App ID とApp secretをペースト
3. OAuth リダイレクト URIをコピー
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_0b01d9081d35bebd60aaf724b7efe313-1024x531.png?resize=920%2C477)
App ID と App secretの下にあります🌟
Step3: OAuthリダイレクトURIの設定
1. Facebookログインの設定
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_7b9657eaecbf227f9c8c9a346c65444c-1024x635.png?resize=920%2C571)
製品を追加 > Facebookログイン > 設定
2. 設定に移る
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_65cc3ec51bc809ea9d33d73ad65126cd-1024x422.png?resize=920%2C379)
クイックスタートの画面に飛びますが
サイドメニューの設定をクリックします!
3. 有効なOAuthリダイレクトURIを入力
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_baccad49b69983c1d987e1510b45bc56-1024x503.png?resize=920%2C452)
ここにfirebaseでコピーしたURIを貼り付けます!
これで設定は完了です🤗✨
Step4: コードを追加
Handle the sign-in flow with the Firebase SDK
解説
store/index.js
必須項目:1, 5
Optional:2, 3, 4
ということで必須項目だけ
Vuexにコピペしていきます。
- actions loginFacebookを作成
ログインできたら
ログイン状態をtrueにしたいので
それを行うcheckLoginをdispatchで呼ぶ - 不要な物を削除
コメント
セミコロン(;)
var token
var user
コード
) 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) }) }, loginFacebook ({ dispatch }) { var provider = new firebase.auth.FacebookAuthProvider() 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 }, } |
) 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="loginFacebook" > facebookでログイン </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}) }, loginFacebook () { this.$store.dispatch('loginFacebook') }, } } </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> |
ログインはこれだけです🌟
意外とシンプルですよね!
アカウント作成や、
ログアウトの仕方はまた別記事にて♪