authentication - Google Chrome 扩展程序中的 Spotify 身份验证问题

问题描述

当我按下我的 chrome 扩展程序中的按钮时，会出现一个 spotify auth 网页，然后我输入我的登录信息并单击登录，然后窗口消失，我在控制台中看到的只是这个（“检查”chrome 扩展程序“弹出”）：

logging in attempt                                                       login.js:27
attempted                                                                login.js:31       
undefined                                                                login.js:29       
Unchecked runtime.lastError: Authorization page could not be loaded.     login.html:1

当我加载解压后的扩展程序，更新，打开 chrome 扩展程序的控制台，然后再次运行该过程时，spotify auth 网页不会出现。我必须等待几个小时，然后再试一次。有谁知道为什么会这样？

下一个问题是为什么 redirectUri 未定义并且未设置为包含访问令牌或我需要运行 spotify 播放器（网络播放 api）的代码的 URI？

清单.json

    {
      "name": "xxx",
      "version": "1.0",
      "manifest_version": 2,
      "description": "xxx",
      "permissions": ["identity", "declarativeContent", "storage", "*://*.spotify.com/*", "*://*.chromiumapp.org/*"],
      "content_security_policy": "script-src 'self' https://sdk.scdn.co; object-src 'self'",
      "browser_action": {
        "default_popup": "login.html",
        "default_icon": {
          "16": "images/get_started16.png",
          "32": "images/get_started32.png",
          "48": "images/get_started48.png",
          "128": "images/get_started128.png"
        },
        "icons": {
          "16": "images/get_started16.png",
          "32": "images/get_started32.png",
          "48": "images/get_started48.png",
          "128": "images/get_started128.png"
        }
      }
    }


    <!DOCTYPE html>
    <html>
    <head>
    
      <script src="background.js"></script>
      <script src="login.js"></script>
      
    </head>
    
    <body>
    
    <form id="form" autocomplete="off">
    <div id="label1"></div><br>
    <input type='text' id='field1'><br>
    <div id="label2"></div><br>
    <input type='password' id='field2'><br>
    <input type='button' id='submit'>
    </form>
    
    </body>
    </html>


    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById("label1").innerHTML = "Username"
      document.getElementById("label2").innerHTML = "Password"
      document.getElementById("submit").innerHTML = "Submit"
      
      document.getElementById("submit").onclick = function() {
        var login = [document.getElementById("form").elements[0].value, document.getElementById("form").elements[1].value];
        document.getElementById("label1").innerHTML = login[0]
        document.getElementById("label2").innerHTML = login[1]
       
        var my_extension_id = "xxx";
        
        var my_client_id = "xxx";
        
        var scopes = "user-read-email user-read-private user-read-playback-state playlist-modify-public user-modify-playback-state playlist-modify-private user-follow-modify user-read-currently-playing user-follow-read user-library-modify user-read-playback-position playlist-read-private user-library-read streaming";
        
        var redirectUri = chrome.identity.getRedirectURL("xxx");
        //var redirectUri = "https://" + my_extension_id + ".chromiumapp.org";
        
        var auth_url = "https://accounts.spotify.com/authorize?" + 
        "client_id=" + my_client_id + 
        "&redirect_uri=" + encodeURIComponent(redirectUri) + 
        "&response_type=code" + 
        "scope=" + encodeURIComponent(scopes) + 
        "show_dailog=true";
    
        console.log("logging in attempt");
        chrome.identity.launchWebAuthFlow({'url':auth_url,'interactive':true}, function(redirect_url) {
            console.log(redirect_url)
        });
        console.log("attempted");
    
      }
        
    });

标签： authenticationgoogle-chrome-extensionspotify

authentication - Google Chrome 扩展程序中的 Spotify 身份验证问题

问题描述

解决方案

推荐阅读