expo react-native spotify 身份验证问题答案

【问题标题】：Trouble with expo react-native spotify authenticationexpo react-native spotify 身份验证问题
【发布时间】：2021-01-03 20:14:23
【问题描述】：

首次尝试使用 spotify expo 身份验证对用户进行身份验证时，我无法重定向回我的应用程序。这是工作流程。我在应用程序中单击一个按钮登录到 Spotify，然后它重定向到一个 Web 浏览器，该浏览器要求用户输入电子邮件和密码以登录到 Spotify。但是在我输入用户名和密码后，我收到一条错误消息，说出了点问题。见下图。我不确定如何配置重定向 uri 以在博览会中重定向回我的应用程序。我尝试了多种配置，但似乎都没有。我的应用已在 expo 中注册。

这是代码和错误

import React, { useEffect } from 'react'
import { View, Text, Button } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import { makeRedirectUri, useAuthRequest, getRedirectUrl } from 'expo-auth-session';
import { SafeAreaView } from 'react-native-safe-area-context'
import * as AuthSession from 'expo-auth-session';

const discovery = {
    authorizationEndpoint: 'https://accounts.spotify.com/authorize',
    tokenEndpoint: 'https://accounts.spotify.com/api/token',
};

const redirect = AuthSession.getRedirectUrl()


WebBrowser.maybeCompleteAuthSession();

function SignIn() {

    console.log(redirect);
    const [request, response, promptAsync] = useAuthRequest(
        {
            clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

            scopes: ['user-read-email', 'playlist-modify-public'],
            // In order to follow the "Authorization Code Flow" to fetch token after authorizationEndpoint
            // this must be set to false
            usePKCE: false,
            // For usage in managed apps using the proxy
            redirectUri: redirect,
        },
        discovery
    );

    useEffect(() => {
        if (response?.type === 'success') {
            const { access_token } = response.params;
            console.log(access_token);
            console.log(response);
            testLoading(response.params.code, response.params.state)
        }

    }, [response])

    const testLoading = async (code, state) => {
        let spotifyObject = {
            code: code,
            state: state
        }
        await fetch(`http://localhost:8080/api/oauth/spotify?code=${code}`, {

            method: 'POST',
            body: JSON.stringify(spotifyObject)
        })
            .then(response => {
                console.log(response)
            })
            .catch(error => {
                console.log(error)
            })


    }

    let success = null;

    return (
        <SafeAreaView>
            <Text>In the Sign in function</Text>
            <Button
                title="Sign In"
                onPress={() => { promptAsync() }}
            />

        </SafeAreaView>
    )
}

export default SignIn

这是错误

我的重定向是https://auth.expo.io/@spotifyplaylistgenius/spotifyplaylistgenius

【问题讨论】：

我也看到了同样的情况。通过不使用代理，我能够让它在开发中工作，但不确定这将在生产中做什么。希望有人能够提供使用代理的解决方案。

标签： react-native redirect expo spotify

【解决方案1】：

我也遇到了 expo react-native Spotify 身份验证的问题，我收到了 Invalid Redirect URI 错误，您可以在此处查看我在 Github gist 上的代码库：

https://gist.github.com/sparkidea25/3ccceef572279c6c0f15e3185020c2fd

【讨论】：