如何在 Expo React 原生应用中使用 Spotify 30 秒预览

Question

我一直在尝试在我的 expo 应用程序中使用 Spotify API，但我发现的每个教程或包装器似乎都不起作用。

我特别想访问 30 秒歌曲预览和 track/song 搜索功能。

如果有人可以提供一些指导或向我指出任何类型的工作演示，那将是非常棒的。

谢谢！

Answer 1

在 https://docs.expo.dev/guides/authentication/#spotify

中找到了部分解决方案

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

var client_id = ''; // Your client id
var client_secret = ''; // Your secret


export default function spotifyLogin(props) {
    const [request, response, promptAsync] = useAuthRequest(
        {
            clientId: '',
            scopes: ['user-read-email', 'user-read-playback-state', 'playlist-modify-public','playlist-modify-private','playlist-modify-public','playlist-read-private','user-read-recently-played'],
            // In order to follow the "Authorization Code Flow" to fetch token after authorizationEndpoint
            // this must be set to false
            usePKCE: false,
            redirectUri: makeRedirectUri({
              //scheme: 'your.app'
              }),
          },
          discovery
    );
  
React.useEffect(() => {
  if (response?.type === 'success') {
    const { code } = response.params;
    //save code to local storage
    props.saveLogin(code)
    }
}, [response]);

return (
  <Button
    disabled={!request}
    title="Login"
    onPress={() => {
      promptAsync();
      }}
  />
);
  }

export const getFirstTokenData = async (code) => {
    var dataToSend = { 
      code: code,
      redirect_uri: makeRedirectUri(),
      grant_type: 'authorization_code'};
    //making data to send on server
    var formBody = [];
    for (var key in dataToSend) {
      var encodedKey = encodeURIComponent(key);
      var encodedValue = encodeURIComponent(dataToSend[key]);
      formBody.push(encodedKey + '=' + encodedValue);
    }
    formBody = formBody.join('&');
    //POST request
    var response = await fetch('https://accounts.spotify.com/api/token', {
      method: 'POST', //Request Type
      body: formBody, //post body
      headers: {
        //Header Defination
        'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64')),
      },
    })
    try{
        return await response.json()
    }catch (error){
        console.log(error)
    }
    
}



export const getRefreshTokenData = async (refreshToken) => {
    console.log(refreshToken)
    console.log(refreshToken + " going in for refresh")
    var dataToSend = { 
        refresh_token : refreshToken,
        grant_type: 'refresh_token'};
    //making data to send on server
    var formBody = [];
    for (var key in dataToSend) {
        var encodedKey = encodeURIComponent(key);
        var encodedValue = encodeURIComponent(dataToSend[key]);
        formBody.push(encodedKey + '=' + encodedValue);
    }
    formBody = formBody.join('&');
    //POST request
    var response = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST', //Request Type
        body: formBody, //post body
        headers: {
        //Header Defination
        'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64')),
        },
    })
    try{
        return await response.json()
    }catch (error){
        console.log(error)
    }
    
}

上面负责验证和获取刷新令牌，下面负责搜索曲目。要获得 30 秒预览，在 getTrack()

的 return 数据中有一个预览属性

const apiPrefix = 'https://api.spotify.com/v1';

export default async ({
  offset,
  limit,
  q,
  token,
}) => {
  const uri = `${apiPrefix}/search?type=track&limit=${limit}&offset=${offset}&q=${encodeURIComponent(q)}`;
  console.log('search begin, uri =', uri, 'token =', token);
  const res = await fetch(uri, {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${token}`,
    }
  });
  const json = await res.json();
  //console.log('search got json', json);

  if (!res.ok) {
    return [];
  }
  return json
  // const {
  //   tracks: {
  //     items,
  //   }
  // } = json;
  // // const items = json.tracks.items;
  // return items.map(item => ({
  //   id: item.id,
  //   title: item.name,
  //   imageUri: item.album.images
  //     ? item.album.images[0].url
  //     : undefined
  // }));
  console.log('search end');
};

export const getTrack = async(trackID, token) => {
  const uri = `${apiPrefix}/tracks/${trackID}?market=ES`;

  const res = await fetch(uri, {
    method: 'GET',
    headers: {
      // Accept: `application/json`,
      // Content-Type: `application/json`,
      Authorization: `Bearer ${token}`,
    }
  });
  const json = await res.json();
  //console.log('search got json', json);
  
  if (!res.ok) {
    return [];
  }
  return json
}

Answer 2

曾几何时，我在测试一个类似的应用程序。它有点过时，但我相信 Spotify 在此期间并没有改变它的 API。

希望这个 caa 能帮到你

https://github.com/kubanac95/spotify-test

如何在 Expo React 原生应用中使用 Spotify 30 秒预览

How to use Spotify 30sec previews with Expo React native app

spotify

oauth-2.0

react-native

expo