firebase-vue-test.vue

<template>
    <div>
        <h1>Hello Firebase Auth</h1>
        <button id="sign-in-button">sign in btn</button>
        <br>
        폰번호 입력: <input type="text" name="phnum" id="input-phnum" v-model="phnum">
        <button @click="phnumAuth">폰 인증 시작</button>
        <br>
        인증번호 입력: <input type="text" v-model="authcode">
        <button @click="checkCode">인증코드 확인하기</button>
    </div>
</template>

<script>
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import 'firebase/analytics';

export default {
    name: 'FirebaseAuth',
    data: function(){
        return{
            phnum: '+82 01023651187',
            authcode: '123456'
        }
    },
    mounted() {
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "",
            authDomain: "neighbor-cats1.firebaseapp.com",
            databaseURL: "https://neighbor-cats1.firebaseio.com",
            projectId: "neighbor-cats1",
            storageBucket: "neighbor-cats1.appspot.com",
            messagingSenderId: "",
            appId: "",
            measurementId: ""
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();

        firebase.auth().useDeviceLanguage();

        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
        'size': 'invisible',
        'callback': function(response) {
            console.log(response)
        }
        });

    },
    methods: {
        getPhoneNumberFromUserInput(){
            return this.phnum;
        },
        getCodeFromUserInput(){
            return this.authcode;
        },
        phnumAuth(){
            var phoneNumber = this.getPhoneNumberFromUserInput();
            var appVerifier = window.recaptchaVerifier;
            firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
                .then(function (confirmationResult) {
                // SMS sent. Prompt user to type the code from the message, then sign the
                // user in with confirmationResult.confirm(code).
                console.log("문자 전송 완료");

                window.confirmationResult = confirmationResult;

                }).catch(function (error) {
                    console.error(error);
                // Error; SMS not sent
                // ...
                });
        },
        checkCode(){
            var code = this.getCodeFromUserInput();
            window.confirmationResult.confirm(code).then(function (result) {
            // User signed in successfully.
            var user = result.user;
            console.log("유저정보")
            console.log(user);
            // ...
            }).catch(function (error) {
            // User couldn't sign in (bad verification code?)
            // ...
                console.error(error);
            });
        }
    },
}
</script>

<style scoped>

</style>