React Native 重定向 Url 错误（配置错误：redirectUrl 必须是字符串）Spotify 应用程序

Question

我希望你们一切都好。我目前正在开发一个音乐应用程序，并且在登录功能方面面临一些挑战。当我点击登录按钮时，我的想法是它应该带我进入 Spotify 登录页面。但是，我遇到的不是这个，而是一条错误消息：身份验证错误：[不变违规：配置错误：redirectUrl 必须是字符串]。

我有点被困在这里，非常感谢您提供的任何帮助。有人可以指导我了解可能导致此错误的原因以及如何修复它吗？我检查了我的代码，看来redirectUrl 应该是一个正确的字符串。但不知何故，它没有按预期工作。

如果有人以前遇到过这个问题或者对如何解决它有任何见解，我将非常感谢您的建议。如果您需要有关我的项目设置的更多信息或可能有助于诊断问题的任何其他详细信息，请随时告诉我。

提前非常感谢您的时间和帮助。

import React, {useEffect} from 'react';
import {Text, SafeAreaView, View, Pressable} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {authorize} from 'react-native-app-auth';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {useNavigation} from '@react-navigation/native';

const LoginScreen = () => {
  const navigation = useNavigation();

  //* token validation checking
  useEffect(() => {
    const checkTokenValidation = async () => {
      const accessToken = AsyncStorage.getItem('token');
      const expirationDate = AsyncStorage.getItem('expirationDate');
      console.log(accessToken, expirationDate);
      if (accessToken && expirationDate) {
        const currentTime = Date.now();
        if (currentTime < parseInt(expirationDate)) {
          navigation.replace('Main');
        } else {
          //tooken wou;d be expired so we need to remove it form the async storage
          AsyncStorage.removeItem('token');
          AsyncStorage.removeItem('expirationDate');
        }
      }
    };
    checkTokenValidation();
  }, []);

  const authentication = async () => {
    const authConfig = {
      issuer: 'https://accounts.spotify.com',
      clientId: 'dsshsds55464546dsd65dsf5644dsfsd',
      redirectUri: 'hubspot://oauthredirect', // Use the same URI as in the dashboard
      scopes: [
        'user-read-playback-state',
        'user-read-currently-playing',
        'user-read-email',
        'user-library-read',
        'user-read-recently-played',
        'user-top-read',
        'playlist-read-private',
        'playlist-read-collaborative',
        'playlists-modify-public',
      ], // Add required scopes
    };
    try {
      const result = await authorize(authConfig);
      console.log(result);
      if (result.accessToken) {
        const expirationDate = new Date(
          result.accessTokenExpirationDate,
        ).getTime();
        AsyncStorage.setItem('token', result.accessToken);
        AsyncStorage.setItem('expirationDate', expirationDate.toString());
        navigation.navigate('Main');
      }
    } catch (error) {
      console.error('Authentication error:', error);
    }
  };

  return (
    <LinearGradient
      colors={['#000000', '#14213d', '#001219']}
      className=" flex-1">
      <SafeAreaView>
        <View className=" h-28" />
        <Icon
          name="hubspot"
          size={80}
          color="white"
          style={{textAlign: 'center'}}
        />
        <Text className="text-white font-bold text-5xl text-center mt-10">
          Millions of Songs Free on hubspot!
        </Text>
        <View className="h-20" />
        <Pressable
          onPress={() => authentication()}
          className="bg-[#1DB954] p-3 rounded-full mx-auto items-center justify-center w-80 ">
          <Text>Sign In With hubspot </Text>
        </Pressable>
        <Pressable className="bg-[#1e2231] border-[#c0c0c0] border p-2 flex-row mt-5 rounded-full mx-auto text-center w-80 ">
          <Icon name="cellphone" size={25} color={`white`} />
          <Text className="text-white flex-1 text-center">
            Continue with phone number
          </Text>
        </Pressable>
        <Pressable className="bg-[#1e2231] border-[#c0c0c0] border p-2 flex-row mt-5 rounded-full mx-auto text-center w-80 ">
          <Icon name="google" size={25} color={`red`} />
          <Text className="text-white flex-1 text-center">
            Continue with phone google
          </Text>
        </Pressable>
        <Pressable className="bg-[#1e2231] border-[#c0c0c0] border p-2 flex-row mt-5 rounded-full mx-auto text-center w-80 ">
          <Icon name="facebook" size={25} color={`blue`} />
          <Text className="text-white flex-1 text-center">
            Continue with phone facebook
          </Text>
        </Pressable>
      </SafeAreaView>
    </LinearGradient>
  );
};

export default LoginScreen;

Answer 1

身份验证错误：[不变违规：配置错误：redirectUrl必须是字符串]。

但是在你的代码中，它是 redirectUri