now-playing-api/src/apple_auth.html at master · tom21100227/now-playing-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
  <title>Apple Music Token Generator</title>
  <script src="https://js-cdn.music.apple.com/musickit/v3/musickit.js" data-web-components async></script>
</head>
<body>
  <h1>Get Your Apple Music User Token</h1>
  <p>1. Run your Cloudflare Worker locally: <code>npx wrangler dev</code></p>
  <p>2. Get the developer token: <code>curl http://localhost:8787/token</code></p>
  <p>3. Paste it below and click the button.</p>

  <textarea id="dev-token" placeholder="Paste your Developer Token here..." style="width: 100%; height: 100px;"></textarea>
  <br/><br/>
  <button id="login-btn">Log In to Apple Music</button>

  <h2>Your Music User Token:</h2>
  <pre id="token-output" style="background-color: #eee; padding: 10px; word-wrap: break-word; white-space: pre-wrap;">(Token will appear here)</pre>

  <script>
    const loginButton = document.getElementById('login-btn');
    const devTokenInput = document.getElementById('dev-token');
    const tokenOutput = document.getElementById('token-output');

    loginButton.addEventListener('click', async () => {
      if (!devTokenInput.value.trim()) {
        tokenOutput.textContent = 'Please paste in your developer token first.';
        return;
      }

      try {
        tokenOutput.textContent = 'Configuring MusicKit...';

        // MusicKit v3 configuration
        await MusicKit.configure({
          developerToken: devTokenInput.value.trim(),
          app: {
            name: 'Now Playing API',
            build: '1.0.0'
          }
        });

        const music = MusicKit.getInstance();

        tokenOutput.textContent = 'Requesting authorization...';

        // Request user authorization
        await music.authorize();

        // Get the Music User Token
        const userToken = music.musicUserToken;

        if (userToken) {
          tokenOutput.textContent = userToken;
        } else {
          tokenOutput.textContent = 'Authorization succeeded but no user token was returned. Please try again.';
        }
      } catch (error) {
        console.error('MusicKit Error:', error);
        tokenOutput.textContent = `An error occurred: ${error.message || error}`;
      }
    });
  </script>
</body>
</html>