时间戳

首页 > 解决方案 > 为什么我在我的 cordova 应用程序中收到此错误：“Firebase：错误（auth/redirect-cancelled-by-user）”

reactjs - 为什么我在我的 cordova 应用程序中收到此错误：“Firebase：错误（auth/redirect-cancelled-by-user）”

问题描述

我已按照https://firebase.google.com/docs/auth/web/cordova中的所有步骤操作，但是每当我运行应用程序时，我都会收到此错误“Firebase：错误（auth/redirect-cancelled-by-user） ”。我没有取消身份验证，所以我不知道我为什么会收到这个。

这是我的 JavaScript 代码：

import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const GoogleAuthScript = (setAlertMsg) => {

const auth = getAuth();

signInWithRedirect(auth, new GoogleAuthProvider()).then(() => {

return getRedirectResult(auth);

}).then((result) => {

const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
const user = result.user;

}).catch((error) => {

const errorCode = error.code;
const errorMessage = error.message;

setAlertMsg(errorMessage);

});


}

export default GoogleAuthScript;

这是我的 config.xml：

<?xml version='1.0' encoding='utf-8'?>

<widget id="com.conquest.testapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>app</name>

<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>

<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>

<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

<platform name="android">
<allow-intent href="market:*" />
<preference name="AndroidLaunchMode" value="singleTask" />
<preference name="android-minSdkVersion" value="22" />
<preference name="AndroidXEnabled" value="true" />
<resource-file src="google-services.json" target="app/google-services.json" />
<framework src="src/android/plugin.gradle" custom="true" type="gradleReference"/>
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />
<preference name="GradlePluginKotlinEnabled" value="true" />
 <preference name="GradlePluginKotlinCodeStyle" value="official" />
 <preference name="GradlePluginKotlinVersion" value="1.6.0-M1" />
</platform>
    
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>

<universal-links>
<host name="my-domain.page.link" scheme="https" />
<host name="my-domain.firebaseapp.com" scheme="https">
<path url="/__/auth/callback" event="authCalled" />
</host>
</universal-links>

</widget>

这是我的 index.html 代码，其中包含了一个相对链接标签：

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

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="alternate" href="android-app://com.conquest.test/https/quizstarapp.page.link/__/auth/callback" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>  
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<title>App</title>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>

</html>

最后，这是我的应用程序组件的代码，我从中调用登录函数：

import { useState, useEffect } from "react";
import { HashRouter } from "react-router-dom";
import { Box, ThemeProvider, Button, Alert } from "@mui/material";
import { DarkTheme } from "./theming/theme";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import GoogleAuthScript from "./scripts/GoogleAuthScript";
import { getAuth, signInWithRedirect, getRedirectResult, cordovaPopupRedirectResolver, OAuthProvider, OAuthCredential, GoogleAuthProvider } from "firebase/auth/cordova";

const checkForUser = async () => {

const result = await getRedirectResult(getAuth()).then(async(result) => {
const credentials = new OAuthCredential(result);
const user = await credentials.providerId.user;
console.log(user);
});

}


const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};

const App = () => {

useEffect(() => {

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

//checkForUser();

}, [firebaseConfig])

const [theme, setTheme] = useState(DarkTheme);
const [alertMsg, setAlertMsg] = useState("");

return(

<HashRouter>
<ThemeProvider theme={theme}>
<Box
sx={{
position:"absolute",
width:"100vw",
height:"auto",
minHeight:"100vh",
top:"0",
left:"0",
display:"flex",
backgroundColor:"background.default",
alignItems:"center",
justifyContent:"center",
}}
>

<Button
variant="contained"
onClick={() => {
GoogleAuthScript(setAlertMsg);
}}
>
Log in with Google
</Button>

<Alert
sx={{
position:"fixed",
bottom:"1rem",
left:"1rem",
}}
>
{alertMsg}
</Alert>

</Box>
</ThemeProvider>
</HashRouter>

);

}

export default App;

标签： reactjscordovafirebase-authenticationdeep-linking

解决方案

推荐阅读