Firebase

Question

编辑 - 新代码，一切都在一个函数中。

我正在制作在线游戏，我想使用 google 登录 firebase。问题是，当我打开网站时，我也直接 google 登录，但登录过程在一个不从任何地方开始的函数中。

// 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 我 link 到脚本的地方。


<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>

我不明白为什么登录在函数内部启动，我想在用户按下“使用 google 登录”时调用该函数。

我在使用 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
Node.js
Webpack
Firebase

如果您需要有关该程序的更多信息，请告诉我。

这是构建脚本。我使用常规的“构建”。

    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",

我在代码中知道的唯一不好的事情是：

random = signingg.length;

我有这个的原因是因为我需要在某个地方声明它。这是在所有其他代码之下。我知道这不是一件好事..

Answer 1

getRedirectResult 是用户登录成功后检索 OAuth 令牌的替代方法。

然后您应该使用这两种方法中的任何一种，您只需调用您的 signingg 方法并删除 getRedirectResult 调用链即可检索登录结果。

Answer 2

我发现 WebPack 有问题，当我的 JS 被编译时，发生了一些事情，所以每次加载脚本时函数运行。我没有弄清楚WebPack的问题。

当一切都在一个函数中时，脚本应该可以工作。

Firebase - google 登录循环

Firebase - google signin loop

javascript

firebase-authentication

google-signin