我正在使用 Expo AuthSession 通过 IdentityServer4 实现登录我的应用程序。
当我尝试使用我的 Google 帐户登录 IdentityServer 时,仅在 ANDROID 中遇到问题。
AuthSession 在我的设备中打开浏览器,我可以登录,但之后,当我对询问我是否要允许我收到的访问权限的通知回答“是”时,我会在 React Native 应用程序中关闭。
我注意到,如果我在浏览器中注册我的谷歌帐户之前,问题就会消失并且我能够登录。
我使用的代码是这样的:
import * as AuthSession from "expo-auth-session";
import jwtDecode from "jwt-decode";
import * as React from "react";
import { Alert, Button, Platform, StyleSheet, Text, View } from "react-native";
// You need to swap out the Auth0 client id and domain with the one from your Auth0 client.
// In your Auth0 client, you need to also add a url to your authorized redirect urls.
//
// For this application, I added https://auth.expo.io/@arielweinberger/with-auth0 because I am
// signed in as the "arielweinberger" account on Expo and the name/slug for this app is "with-auth0".
//
// You can open this app in the Expo client and check your logs to find out your redirect URL.
const auth0ClientId = "ppSP6KhARumIUKQl5J02GTABifmBdDGy";
const auth0Domain = "expo-auth0.us.auth0.com"
const authorizationEndpoint = `https://${auth0Domain}/authorize`;
const useProxy = Platform.select({ default: false });
const redirectUri = AuthSession.makeRedirectUri({ useProxy, native:"myapp://" });
export default function App() {
const [name, setName] = React.useState(null);
const [request, result, promptAsync] = AuthSession.useAuthRequest(
{
redirectUri,
clientId: auth0ClientId,
// id_token will return a JWT token
responseType: "id_token",
// retrieve the user's profile
scopes: ["openid", "profile"],
extraParams: {
// ideally, this will be a random value
nonce: "nonce",
},
},
{ authorizationEndpoint }
);
// Retrieve the redirect URL, add this to the callback URL list
// of your Auth0 application.
console.log(`Redirect URL: ${redirectUri}`);
React.useEffect(() => {
if (result) {
if (result.error) {
Alert.alert(
"Authentication error",
result.params.error_description || "something went wrong"
);
return;
}
if (result.type === "success") {
// Retrieve the JWT token and decode it
const jwtToken = result.params.id_token;
const decoded = jwtDecode(jwtToken);
const { name } = decoded;
setName(name);
}
}
}, [result]);
return (
<View style={styles.container}>
{name ? (
<Text style={styles.title}>You are logged in, {name}!</Text>
) : (
<Button
disabled={!request}
title="Log in with Auth0"
onPress={() => promptAsync({ useProxy })}
/>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
title: {
fontSize: 20,
textAlign: "center",
marginTop: 40,
},
});
我解决了。当我调用promptAsync时,我可以添加一些选项,其中之一是showInRecents(浏览的网站是否应该在Android多任务处理程序中显示为单独的条目),默认值为false。将其设置为 true 解决了我的问题。
promptAsync(discovery, { useProxy, showInRecents:true });
我在promptAsync中应用了{showInRecents: true},但是浏览器即使重定向到APP也不再关闭,登录页面的浏览器仍然在后台,您有什么解决办法吗?