VueプロジェクトとFirebaseのAuthenticationでユーザ認証を実装する方法をメモしておきます。
Vue.jsやFirebaseに必要なコマンドがインストールされていること、Firebaseにプロジェクトが作成された前提で紹介していきます。
目次
Firebase Authenticationとは
Firebase Authenticationは、Webやネイティブアプリアプリにおいてユーザー認証に関する機能を提供するサービスです。
Firebase Authenticationを使用することで、ユーザーがアプリにログインする際に、メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなど複数のログイン方法を使用できるようになります。
ここでは、ユーザ登録からログイン・ログアウトまでの認証・実装をまとめています。
Vueプロジェクト作成
vue-cliというVue.jsを開発するための準備をしてくれる便利ツールでVueプロジェクト(プロジェクト名は任意)を新規作成します。
1 | $ vue init webpack sample_auth |
作成したプロジェクトに移動して、yarn devでサーバを起動します。
1 2 | $ cd sample_auth $ yarn dev |
FirebaseにWebアプリのプロジェクトを作成
Firebaseで作成したプロジェクトにアプリを追加します。今回はVue.jsで実装するため、Webアプリを選択します。
Webアプリの設定を行っていきます。
入力が完了し、アプリを登録したら完了です。
Firebaseの設定をVue.jsに追加
次にアプリが作成されたら「Firebase SDK snippet」の構成を選択し、表示されたスクリプトをコピーします。
コピーしたスクリプトを下記ファイルのAPI情報に貼り付けます。
firebase.initializeAppでFirebaeseでFirebaseを初期化し、Firestoreを使用できるようにしています。
・src/plugins/firebase.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import firebase from 'firebase/app'; const firebaseApp = firebase.initializeApp({ // ここにFirebaseのAPI情報をコピペ apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', authDomain: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', databaseURL: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', projectId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', storageBucket: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', messagingSenderId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }); export const db = firebaseApp.firestore(); |
main.jsに設定したファイルをインポートできるよう下記を追記します。
・src/main.js
1 | import './plugins/firebase' |
認証方法の設定
次に認証方法を設定します。今回はメールアドレスで認証できるように設定しました。
Firebaseの「Authentication」から「ログイン方法」タブを押し、「メール / パスワード」を選択します。
有効にするにしたら保存を押下し、完了です。
認証周りのルーティング
認証周りのルーティングを設定しておきます。Signup、Signin、HomeのViewを作っておき、それぞれのルーティングを書いていきます。
・src/router.js
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 | import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Signup from '@/components/Signup' import Signin from '@/components/Signin' import firebase from 'firebase' Vue.use(Router) let router = new Router({ routes: [ { path: '*', redirect: 'signin' }, { path: '/home', name: 'Home', component: Home, meta: { requiresAuth: true } }, { path: '/signup', name: 'Signup', component: Signup }, { path: '/signin', name: 'Signin', component: Signin } ] }) export default router |
ユーザ登録画面の実装
ユーザ登録画面を実装します。最低限のHTMLなためデザインは各自で当ててください。
まず、ユーザ登録に必要なメールアドレスとパスワードを設置します。今回はニックネームも必要なため追加しています。
登録ボタンがクリックされると、createUserWithEmailAndPasswordメソッドで入力したメールアドレスとパスワードでアカウントが作成されます。メールアドレスの重複や入力不備の場合はアラートでエラーメッセージが表示されます。
アカウント作成後にニックネームがプロフィールに更新されるようになっています。その後、ログインページに遷移します。
・src/components/Signup.vue
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 | <template> <div> <h2>新規アカウント登録</h2> <input type="text" placeholder="メールアドレス" v-model="email"> <input type="text" placeholder="ニックネーム" v-model="username"> <input type="password" placeholder="パスワード" v-model="password"> <div> <button @click="signUp">登録</button> </div> <p>既にアカウントを持っていますか？<br> <router-link to="/signin">サインインはこちら</router-link> </p> </div> </template> <script> import firebase from 'firebase' export default { data () { return { email: '', password: '', username: '' } }, methods: { signUp: function () { firebase.auth().createUserWithEmailAndPassword(this.email, this.password) .then((result) => { result.user.updateProfile({ displayName:this.username }); alert('アカウントを作成しました') this.$router.push('/singin') }) .catch(error => { alert(error.message) }) } } } </script> |
ユーザログイン画面の実装
ユーザログイン画面を実装します。ユーザ登録したメールアドレスとパスワードを入力するフォームを作成します。
サインインボタンをクリックすると、signInWithEmailAndPasswordメソッドで入力したメールアドレスとパスワードでユーザ認証を行います。
ユーザ認証が完了したらホーム画面に遷移するようになっています。ユーザ認証に失敗した場合は、エラーモーダルが表示されるようになっています。
・src/components/Signin.vue
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 | <template> <div> <h2>ログイン画面</h2> <input type="text" placeholder="メールアドレス" v-model="email"> <input type="password" placeholder="パスワード" v-model="password"> <div> <button @click="signIn">サインイン</button> </div> <p>アカウントを持っていませんか？<br> <router-link to="/signup">新規アカウント登録はこちら</router-link> </p> </div> </template> <script> import firebase from 'firebase' export default { data () { return { email: '', password: '' } }, methods: { signIn: function () { firebase.auth().signInWithEmailAndPassword(this.email, this.password) .then((user) => { this.$router.push('/home') }) .catch((error) => { alert(error.message) }) } } } </script> |
ユーザホーム・ログアウト画面の実装
ユーザホーム・ログアウト画面を実装します。
サインアウトボタンをクリックすると、signOutメソッドでユーザのログイン状態が解除され、ログイン画面に遷移されます。
・src/components/Home.vue
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 | <template> <div> <h2>こんにちは {{ name }}さん</h2> <button @click="signOut">サインアウト</button> </div> </template> <script> import firebase from 'firebase' export default { data() { return { name: firebase.auth().currentUser.displayName } }, methods: { signOut: function () { firebase.auth().signOut().then(() => { this.$router.push('/signin') }) } } } </script> |
サインアウトモーダル
ユーザがサインアウトする前にVuetifyを使って確認モーダルを表示したい場合の例を載せておきます。
サインアウトボタンをクリックすると確認モーダルが表示され仕様です。
・src/components/Home.vue
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 | <template> <div> <h2>こんにちは {{ name }}さん</h2> <v-tab @click="showSignOutModal"> サインアウト </v-tab> <v-row justify="center"> <v-dialog v-model="sign_out_dialog" persistent max-width="390"> <v-card> <v-card-title class="headline">サインアウト確認モーダル</v-card-title> <v-card-text>サインアウトします。よろしいですか？</v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="green darken-1" text @click="sign_out_dialog = false">キャンセル</v-btn> <v-btn color="green darken-1" text @click="signOut">サインアウト</v-btn> </v-card-actions> </v-card> </v-dialog> </v-row> </div> </template> <script> import firebase from 'firebase' export default { data() { return { name: firebase.auth().currentUser.displayName, sign_out_dialog: false, } }, methods: { showSignOutModal : function() { this.sign_out_dialog = true }, signOut: function () { firebase.auth().signOut().then(() => { this.$router.push('/signin') }) } } } </script> |
ログインされていない場合のリダイレクト処理
最後にユーザがログインしていない場合のリダイレクト処理を実装します。
先ほど作成したrouter.jsにrouter.beforeEachでルーティング前の処理を書いていきます。ユーザがログインしていない場合は、ログインページにリダイレクトしています。
・src/router.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | … router.beforeEach((to, from, next) => { let requiresAuth = to.matched.some(record => record.meta.requiresAuth) let currentUser = firebase.auth().currentUser if (requiresAuth) { if (!currentUser) { next({ path: '/signin', query: { redirect: to.fullPath } }) } else { next() } } else { next() } }) export default router |
以上、Vue.js + Firebaseによる認証の実装方法でした。