我正在为客户开发一个电子商务应用程序,我在应用程序的身份验证过程中遇到了麻烦,但仅限于 Android 平台,因为 iOS 上的一切都已按预期运行。让我详细解释一下这个问题以及我如何设置一切。
我正在使用Expo的AuthSession通过浏览器处理身份验证过程。简而言之,AuthSession 有一个
redirectUri
参数,当在浏览器中检测到该参数时,浏览器将被关闭,并且身份验证过程会获得 'success'
类型,然后它还会返回重定向 uri,其中包含我接下来的步骤所需的参数身份验证。
我已经设法弄清楚问题似乎是Android以不同的方式处理浏览器进程,因为它打开了一个“自定义Chrome选项卡”,这会关闭应用程序并停止它
expo-auth-session
和/或expo-web-browser
重定向到应用程序。我已经查阅了所有文档,甚至开始使用 Intent for Android,但即使这样似乎也无法解决问题。在这一点上,我怀疑这要么是库的问题,要么就是不可能以这种方式实现。我愿意尝试任何人可能对此有的所有建议。
下面是我的代码示例。所有代码仅涉及授权,因此所有部分都是相关的。再说一次,一切在 iOS 上都能完美运行; Android 是唯一给我带来麻烦的平台。
export default function Login() {
const [result, setResult] = useState<AuthSessionResult | null>(null)
const [authRequest, setAuthRequest] = useState<AuthRequest | null>(null)
const storeID = process.env.EXPO_PUBLIC_STORE_ID
const clientID = process.env.EXPO_PUBLIC_CLIENT_ID
const authorizationRequestUrl = new URL(`https://shopify.com/${storeID}/auth/oauth/authorize`)
const redirect_uri = `shop.${storeID}.app://authorize`
const handleAuthSession = async () => {
try {
if (authRequest) {
console.log('Making Auth Request')
let response = await authRequest.promptAsync({
authorizationEndpoint: authorizationRequestUrl.toString()
})
setResult(response)
} else {
console.log("Could not make request");
}
} catch (error) {
console.error(error)
}
}
useEffect(() => {
const getAuthSessionInfo= async () => {
const verifier = await generateCodeVerifier()
const challenge = await generateCodeChallenge(verifier!)
const state = await generateState()
const nonce = await generateNonce(10)
setAuthRequest( new AuthRequest({
redirectUri: redirect_uri,
state: state,
responseType: 'code',
clientId: clientID!,
codeChallenge: challenge,
codeChallengeMethod: CodeChallengeMethod.S256,
scopes: [
'openid',
'email',
'https://api.customers.com/auth/customer.graphql'
],
extraParams: {
nonce: nonce
}
}))
}
getAuthSessionInfo()
}, [])
useEffect(() => {
console.log(result)
}, [result])
return (
<ThemedView>
<Suspense fallback={<ActivityIndicator/>}>
<Pressable onPress={() => router.canGoBack() && router.back()}><ThemedText>Go Back</ThemedText></Pressable>
<Pressable
onPress={handleAuthSession}
>
<ThemedText>Sign In</ThemedText>
</Pressable>
<Pressable onPress={() => router.push('/(drawer)/')}><ThemedText>Navigate to Home</ThemedText></Pressable>
<ThemedText>{JSON.stringify(result) ?? ''}</ThemedText>
</Suspense>
</ThemedView>
)
}
我尝试切换到使用
expo-web-browser
的 WebBrowser.openAuthSessionAsync()
功能,但一切都与现在的工作方式完全相同。
我也尝试过在 Android 上更改意图,但这似乎根本不起作用。
我使用了其他设备来查看结果是否有任何变化,并且该应用程序似乎在所有设备中以完全相同的方式做出反应。
我遇到了同样的问题,为我解决的问题是在 androidManifest.xml 文件中并在意图过滤器部分添加:
希望这有帮助!!