您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

vue-cli集成firebase(含google及短信验证码firebase登录)

发布时间：2022-10-19 22:44:16编辑：雪饮阅读（）

短信验证码及短信验证码的验证

首先是用vue ui创建一个脚手架项目，然后呢，我们npm安装了firebase的相关。

我们在firebase控制台上创建了新项目后，由于每个项目都有分web、ios和安卓等。那么这里主要就是实现web了，我们就要在这个新项目下创建web应用，创建后就可以看到相关的配置资料了。

那么接下来拿到这些配置资料，去实现短信验证码发送及登录，我只想要发送就行了，但是他也包含登录，那么这个登录你自己看情况咯，可以用也可以不用。貌似这个短信发送也支持国内号，像我的139开头的就支持，但是不是所有号都支持，海哥的号就不支持，也可能是其它原因吧。

这个firebase需要一个验证捕获程序RecaptchaVerifier就是像12306一样那种有点变态的验证。。。，当然并不是每次都出现，好像有某种规律吧，就是防止恶意刷短信数量吧。

当然这个recaptcha是否可以为类似null之类就没有亲自尝试了。

这个recaptcha如果想要大多数情况下隐藏起来（未必完全隐藏，至少在不起眼的角落里）。

那么可以通过其的size参数设置为invisible即可，另外这个recaptcha是需要绑定到一个页面元素的，这里以页面元素id为sign-in-button为例，则该短信验证码实现程序如：

<template>

  <div class="home">

    <div>

      <input v-model="phoneNumber" placeholder="输入手机号"/>

      <button id="sign-in-button" v-on:click="fn1">发送短信验证码</button>

    </div>

    <div>

      <input v-model="code" placeholder="输入验证码"/>

      <button v-on:click="fn2">验证短信验证码</button>

    </div>

  </div>

</template>

<script>

import { initializeApp } from 'firebase/app';

import { signInWithPhoneNumber,getAuth,RecaptchaVerifier} from "firebase/auth";

const firebaseConfig = {

  apiKey: "AIzaSyDZgBzK3WWgfVhsxFxKnhRNBecvOSe7Qok",

  authDomain: "ccat-5ba6c.firebaseapp.com",

  projectId: "ccat-5ba6c",

  storageBucket: "ccat-5ba6c.appspot.com",

  messagingSenderId: "913510634757",

  appId: "1:913510634757:web:52828d850dc6e5b705d36c",

  measurementId: "G-XQM7EZV06M",

};

 

initializeApp(firebaseConfig);

const auth = getAuth();

export default {

  name: 'HomeView',

  components: {

 

  },

  data() {

    return {

      code:"",

      confirmationResult:null,

      phoneNumber:'+8613916354914',

    }

  },

  mounted:function(){

 

  },

  methods:{

    fn1(){

      var that=this;

      var appVerifier=new RecaptchaVerifier('sign-in-button', {

        'size': 'invisible',

        'callback': (response) => {

          console.log("捕获验证程序:",response);

        }

      }, auth);

      signInWithPhoneNumber(auth, this.phoneNumber, appVerifier)

          .then((confirmationResult) => {

            // SMS sent. Prompt user to type the code from the message, then sign the

            // user in with confirmationResult.confirm(code).

            window.confirmationResult = confirmationResult;

            console.log("使用手机号登录结果",confirmationResult);

            that.confirmationResult=confirmationResult;

            //验证验证码

            // that.fn2(confirmationResult);

          }).catch((error) => {

        console.log("手机号登录失败:"+error);

        // Error; SMS not sent

        // ...

      });

    },

    async fn2(){

      if(!this.code){

        return alert("请输入验证码");

      }

      var verifyRes= await this.confirmationResult.confirm(this.code);

      console.log("verifyRes",verifyRes);

      if(typeof(verifyRes.user)!="undefined" && typeof(verifyRes.user.uid)!="undefined"){

        return alert("验证码验证成功");

      }

      else{

        return alert("验证码验证失败");

      }

    }

  },

}

</script>

google谷歌登录

了解了短信验证码发送验证及登录后，goole登录其实都是差不多的，感觉反而还更简单，实例如：

<template>

  <div class="about">

    <button id="sign-in-button" v-on:click="fn1">谷歌登录</button>

  </div>

</template>

<script>

import { GoogleAuthProvider,signInWithPopup,getAuth} from "firebase/auth";

import {initializeApp} from "firebase/app";

const firebaseConfig = {

  apiKey: "AIzaSyDZgBzK3WWgfVhsxFxKnhRNBecvOSe7Qok",

  authDomain: "ccat-5ba6c.firebaseapp.com",

  projectId: "ccat-5ba6c",

  storageBucket: "ccat-5ba6c.appspot.com",

  messagingSenderId: "913510634757",

  appId: "1:913510634757:web:52828d850dc6e5b705d36c",

  measurementId: "G-XQM7EZV06M",

};

 

initializeApp(firebaseConfig);

const auth = getAuth();

const provider = new GoogleAuthProvider();

export default {

  name: 'HomeView',

  components: {

 

  },

  data() {

    return {

      code:"",

      confirmationResult:null,

      phoneNumber:'+8613916354914',

    }

  },

  mounted:function(){

 

  },

  methods:{

    fn1(){

      signInWithPopup(auth, provider)

          .then((result) => {

            // This gives you a Google Access Token. You can use it to access the Google API.

            const credential = GoogleAuthProvider.credentialFromResult(result);

            const token = credential.accessToken;

            console.log("token",token);

            // The signed-in user info.

            const user = result.user;

            console.log("user",user);

            // ...

          }).catch((error) => {

        // Handle Errors here.

        const errorCode = error.code;

        const errorMessage = error.message;

        // The email of the user's account used.

        const email = error.customData.email;

        // The AuthCredential type that was used.

        const credential = GoogleAuthProvider.credentialFromError(error);

        // ...

 

        console.log("发生了异常 errorCode",errorCode);

        console.log("发生了异常 errorMessage",errorMessage);

        console.log("发生了异常 email",email);

        console.log("发生了异常 credential",credential);

      });

    },

    fn2(){

 

    }

  }

}

</script>

注意：

这里以web的应用为例，则实际上每个web应用都有几个支持的登录方法，如果说上面的短信验证码发送验证登录不了，则去控制台的build下面开启下对应的短信的方法，同理google也是这个道理。