firebase 如何在Blazor WASM中为JS添加导入

yrwegjxp  于 2023-02-16  发布在  其他
关注(0)|答案(1)|浏览(132)

bounty已结束。回答此问题可获得+100声望奖励。奖励宽限期将在18小时后结束。javirs希望引起更多人关注此问题。

我正在尝试使用firebase auth与blazor WASM,其中托管在一个github页面。
我从CDN加载所有需要的JS到我的index.html,看起来像这样:

<!DOCTYPE html>
<html lang="en">

<head>
   //lots of other stuff
</head>
<body>
  //some blazor
  <script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";

        import {
            getAuth,
            onAuthStateChanged,
            GoogleAuthProvider,
            signInWithPopup,
            signOut,
        } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";

        import {
            getFirestore,
            collection,
            addDoc,
            query,
            orderBy,
            limit,
            onSnapshot,
            setDoc,
            updateDoc,
            doc,
            serverTimestamp,
        } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js';

        import {
            getStorage,
            ref,
            uploadBytesResumable,
            getDownloadURL,
        } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-storage.js';
        import { getMessaging, getToken, onMessage } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-messaging.js';
        import { getPerformance } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-performance.js';

        

        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: "AIzaSyB3EobtWgtzNrOL2Qde3nM-JCfsPdAqRGg",
            authDomain: "vikingarena-5fb20.firebaseapp.com",
            projectId: "vikingarena-5fb20",
            storageBucket: "vikingarena-5fb20.appspot.com",
            messagingSenderId: "127848345256",
            appId: "1:127848345256:web:d31f8969ea0806d04a1c9d"
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
    </script>
    
   //other scripts
   <script src="js/VikingJS.js"></script>
</body>
</html>

然后我有我的VikingJS.js文件,我尝试做的事情,如谷歌登录:

async function signIn() {
    var provider = new Auth.GoogleAuthProvider();
    await Auth.signInWithPopup(Auth.getAuth(), provider);
}

我使用JSInterop从blazor调用它,但是得到:ReferenceError: GoogleAuthProvider is not defined
下面是调用位:

private async Task Login() {
    await JSRuntime.InvokeVoidAsync("signIn");
}

我如何从firebase加载所有这些方法,以便在js文件中访问它们?

wydwbb8l

wydwbb8l1#

尝试将app变量(您在index.html文件中创建的Firebase应用程序对象)添加到signIn函数中。

async function signIn() {
    const provider = new GoogleAuthProvider();
    const auth = getAuth(app);
    await signInWithPopup(auth, provider);
}

在JSInterop调用中也是如此,以包括Firebase应用程序对象。

private async Task Login() {
    await JSRuntime.InvokeVoidAsync("signIn", app);
}

相关问题