javascript - Firebase - 谷歌登录循环
问题描述
编辑 - 新代码,一切都在一个函数内。
我正在制作一个在线游戏,我想在 firebase 上使用谷歌登录。问题是,当我打开网站时,我直接去谷歌登录,但登录过程是在一个不会从任何地方开始的函数中。
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "#",
authDomain: "#",
databaseURL: "#",
projectId: "#",
storageBucket: "#",
messagingSenderId: "#",
appId: "#",
measurementId: "#"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firebase
// Google sign in - firebase
function signoutgg() {
import { signOut } from "firebase/auth";
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
}
function signingg() {
import { GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
import { getAuth } from "firebase/auth";
import { signInWithRedirect } from "firebase/auth";
import { getRedirectResult } from "firebase/auth";
const auth = getAuth();
signInWithRedirect(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;
// ...
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
getRedirectResult(auth)
.then((result) => {
// This gives you a Google Access Token. You can use it to access Google APIs.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.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.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
var id_token = googleUser.getAuthResponse().id_token
import { signInWithCredential } from "firebase/auth";
// Build Firebase credential with the Google ID token.
const credential = GoogleAuthProvider.credential(id_token);
// Sign in with credential from the Google user.
signInWithCredential(auth, credential).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
}
我链接到脚本的 index.html 中正文的底部。
<script type="module" src="/node_modules/firebase/firebase-app.js"></script>
<script type="module" src="/node_modules/firebase/firebase-database.js"></script>
<script type="module" src="/node_modules/firebase/firebase-auth.js"></script>
我不明白为什么登录在函数内部时开始,我想在用户按下“使用谷歌登录”时调用该函数。
当我使用 webpack 构建 js 时,我也会收到这些警告。
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
bundle.js (1.59 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (1.59 MiB)
bundle.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
我在用着:
- 香草JS
- 节点.js
- 网页包
- 火力基地
如果您需要有关该计划的更多信息,请告诉我。
这是构建脚本。我使用常规的“构建”。
"build": "webpack --mode=production --node-env=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
我在代码中知道的唯一坏事是:
random = signingg.length;
我有这个的原因是因为我需要在某个地方声明它。这低于所有其他代码。我知道这不是一件好事。。
解决方案
我发现 WebPack 存在问题,当我的 JS 被编译时,发生了一些事情,所以每次加载脚本时函数都会运行。我没有弄清楚 WebPack 的问题。
当一切都在函数中时,脚本应该可以工作。
推荐阅读
- php - 如何从其他 PHP 服务器获得对 Rails 服务器的响应
- javascript - TouchableOpacity onPress 在 react-native-map 中的 CallOut 内不起作用
- javascript - 推送多选的数据值 只推送第一个点击的选项多次
- oracle-apex - 调用在页面 url 中传递 IR 报告 ID 的非模态对话框页面
- android - okhttp 用于注册和登录目的是否安全?
- mysql - 在 MYSQL 中返回所有结果以及有限/偏移结果的最有效方法
- java - 骆驼从队列中消费消息但无法重新创建它
- android - 如何防止 DialogFragment 在外部触摸时关闭?
- android - Flutter for Web:Android Chrome 底部的文本被截断
- java - Heroku 部署失败