1.添加项目/创建项目
https://console.firebase.google.com/u/0/
为项目取名 等。
2. 查看项目设置
3.添加应用
查看项目设置的同一页，点击「添加应用」，如图，是已经添加的应用。
添加应用时，选择web应用``</>``。
4.查看说明，复制配置项
「添加应用」之后，在同一页，可看到代码段：
在uniapp项目中，先按说明安装firebase,
再复制代码，到main.js。
5.添加第三方授权登录信息
6.在login.vue添加google登录
我的项目在pages/login/login.vue， 你可以调试好之后，把配置写在main.js
<text class="py-3 text-main ml-5" @click="googleSignIn()">Google登录</text>
// 其他代码
<script>
import { initializeApp } from '@firebase/app';
import { getAuth, GoogleAuthProvider, signInWithPopup } from '@firebase/auth';
// 其他代码
async googleSignIn() {
// Your web app's Firebase configuration
const firebaseConfig = {
// 这里是复制来的
};
// 初始化Firebase
// 在 main.js 或应用的初始化文件中
// 初始化 Firebase
const fbapp = initializeApp(firebaseConfig);
const auth = getAuth();
const GoogleProvider = new GoogleAuthProvider();
GoogleProvider.addScope('https://www.googleapis.com/auth/userinfo.email');
GoogleProvider.addScope('https://www.googleapis.com/auth/userinfo.profile');
signInWithPopup(auth, GoogleProvider)
.then((result) => {
//result 有用户的信息，根据后端要求拿需要的，如果是弹窗,授权成功会自动关闭弹窗
//这里处理你需要的逻辑
console.log('- google result -')
console.log(result)
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
console.log('- result.user -')
console.log(user)
// IdP data available using getAdditionalUserInfo(result)
})
.catch((error) => {
//可处理授权失败后的逻辑
console.log(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);
});
},
</script>
// 其他代码7.点击Google登录看效果
弹出授权框：因为我的项目id是haishort, 授权框里显示的是：haishort.firebaseapp.com，正式上线后，您可以申请自定义的名称，但是需要填写OAuth权限请求页面并通过审核，请看笔者写的这一篇。
你授权完成后，这个弹出框会自动关闭。然后，
控制台打印的结果如下：
8.上线还要添加您的网域
在这里添加网域。
再进入「管理服务账号权限」
进入Google Cloud 的「凭据」
在OAuth2.0客户端ID，点编辑信息。
可看到如图是默认的，可再添加你自己的。
OAuth授权请求页面，还没有去申请。
本文终。
参考文章：
web项目集成Google登录教程
包括：一键快捷功能（一键式登录弹窗）
https://blog.csdn.net/m0\_62332650/article/details/135949290
在网页中接入谷歌（Google）帐号登录
包括：有Go语言项目代码github
https://blog.twofei.com/784/#comment-1522
利用Firebase进行第三方google登录（web）
https://juejin.cn/post/7070710954623221791
前端 vue 实现 Google账户登录 功能
https://juejin.cn/post/7184701797506744375
