質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

Q&A

0回答

425閲覧

Vue、Firebase を使用したメール認証機能を実装したい

kwtkwt

総合スコア21

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

0グッド

0クリップ

投稿2022/02/18 07:08

前提・実現したいこと

現状Firebaseを使用し、新規登録、ログイン機能の実装はできている。

新規登録の際、メール認証機能を実装しようとしているのですが、メールに添付された認証URLをクリックするより前に、ログイン状態になっており、認証URLをクリックする意味がなくなっております。

新規登録をした瞬間は、未ログイン状態で、メール認証URLをクリックしたら、ログインできるような実装にしたいです。

発生している問題・エラーメッセージ

特にありません。

該当のソースコード

Signup.vue

javascript

1<template> 2 <div class="signup"> 3 <h2>会員登録</h2> 4 <table> 5 <tr> 6 <th>メールアドレス:</th> 7 </tr> 8 <tr> 9 <td><input type="email" v-model="email"/></td> 10 </tr> 11 <tr> 12 <th>パスワード:</th> 13 </tr> 14 <tr> 15 <td><input type="password" v-model="password"/></td> 16 </tr> 17 </table> 18 <button @click="signUp">登録</button> 19 </div> 20</template> 21 22<script> 23import { getAuth, createUserWithEmailAndPassword, sendEmailVerification } from 'firebase/auth' 24 25export default { 26 data () { 27 return { 28 email: '', 29 password: '' 30 } 31 }, 32 methods: { 33 signUp: function () { 34 const auth = getAuth() 35 createUserWithEmailAndPassword(auth, this.email, this.password) 36 .then((userCredential) => { 37 const user = userCredential.user 38 console.log(user) 39 this.sendEmail() 40 this.$router.push('/login') 41 }) 42 .catch((error) => { 43 const errorCode = error.code 44 const errorMessage = error.message 45 console.log(errorCode) 46 console.log(errorMessage) 47 }) 48 }, 49 sendEmail: function () { 50 const auth = getAuth() 51 sendEmailVerification(auth.currentUser) 52 .then(() => { 53 console.log(89899) 54 }) 55 .catch((error) => { 56 const errorCode = error.code 57 const errorMessage = error.message 58 console.log(errorCode) 59 console.log(errorMessage) 60 }) 61 } 62 } 63} 64</script> 65

試したこと

createUserWithEmailAndPasswordメソッドで、登録が行われているようですが、登録と同時にログイン状態になってしまうようです。。

補足情報(FW/ツールのバージョンなど)

@vue/cli 4.5.15

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問