前端 vue 实现 Google账户登录 功能

Google账户登录

1. 获取网页应用的配置代码段

要获取网页应用的配置代码段，请执行以下操作：

• 登录 Firebase，然后打开您的项目。
• 在概览页面上，点击添加应用。
• 选择将 Firebase 添加到您的网页应用。
• 复制该代码段并将其添加到应用的 HTML 中。

firebase.google.com/docs/auth/w…

console.firebase.google.com/

找到项目配置

选择网页开发，点下面的小图标

填写名字点击注册即可

下载 npm install firebase

然后将'针对要使用的产品来初始化 Firebase 并开始使用相应 SDK.'贴到自己的方法里，点击调用即可

添加Google登录

然后就可以使用google账户登录了

• 如果注册了找不到，在项目设置里面下滑，找到'您的应用', 复制firebaseConfig就可以替换了

• 全部代码

utils.js

  // Google 登录
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

export function googleLogin() {
  const firebaseConfig = { // 这里替换成你的
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  }
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const provider = new GoogleAuthProvider();
  const auth = getAuth();
  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;
      // The signed-in user info.
      const user = result.user;
      console.log('已登录的用户信息：',user)
      // ...
    }).catch((error) => {
      // 此处处理错误。
      const errorCode = error.code;
      const errorMessage = error.message;
      // 使用的用户帐户的电子邮件。
      const email = error.customData.email;
      // 使用的AuthCredential类型。
      const credential = GoogleAuthProvider.credentialFromError(error);
      // ...
    });
}

view.vue

<template>
  <div @click="onclick">使用谷歌登录</div>
</template>

<script>
import { googleLogin } from '../utils/util.js'
export default {
  methods: {
    onclick() {
      googleLogin()
    }
  }
}
</script>

<style>

</style>