HTML / JS - Как мне подходить к тому, чтобы пользователь завершил процесс аутентификации, прежде чем позволить ему двигаться дальше? - PullRequest
Новая
       1

HTML / JS - Как мне подходить к тому, чтобы пользователь завершил процесс аутентификации, прежде чем позволить ему двигаться дальше?

0 голосов
/ 22 октября 2019

Я нахожусь в процессе создания веб-приложения, которое позволит пользователям создавать плейлисты Spotify песен, которые они твитнули. Это включает в себя использование как Spotify API (через оболочку spotipy), так и Twitter API (через оболочку Twython). До сих пор мне удавалось заставить неявный поток кода предоставления / авторизации работать для обоих APIS, но я пытаюсь выяснить, каков наилучший способ подтверждения того, что пользователь в веб-приложении завершил авторизацию своих учетных записей Twitter и Spotify, прежде чем нажатькнопка, которая будет генерировать список воспроизведения.

Я немного застрял, потому что кажется, что нельзя отключить кнопки с атрибутом href. Кроме того, я попытался создать функции JavaScript, которые включают кнопку «Build Playlist», но это тоже не работает. Ниже приведен HTML-код веб-страницы, на которой пользователь будет находиться при аутентификации своих учетных записей: 

<!DOCTYPE html>
<html>

<head>
    <title> Your Twitter Playlist </title>
</head>

<body>

    <h1>Authentication</h1>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

</body>

   <button type="button" id="home"> 
       <a href="http://127.0.0.1:5000/"> Home </a> 
   </button>

   <button type="button" id="auth_twitter" data-twit-clickToggle="false" onclick=clickToggleTwitter()>
       <a href="http://127.0.0.1:5000/auth/twitter"> Twitter </a>  
    </button>

   <button type="button" id="auth_spotify" data-spot-clickToggle="false" onclick=clickToggleSpotify()> 
       <a href="http://127.0.0.1:5000/auth/spotify"> Spotify </a> 
    </button>

    <button type="button" id="build_playlist" disabled="disabled" onclick=enableBuildButton()>
        Create Playlist! 
    </button>

    <!-- ********************* SCRIPTS ************************** -->

    <!--    Enable Build Playlist Button -->
    <script>
        function enableBuildButton() {

            var spotify_toggle = document.getElementById("auth_spotify").getAttribute("data-spot-clickToggle");

            var twitter_toggle = document.getElementById("auth_twitter").getAttribute("data-twit-clickToggle");


            if spotify_toggle and twitter_toggle == "true": 

                document.getElementById("build_playlist").disabled = false; 
        }
    </script>

    <!--    Twitter Button Toggle -->
    <script>
        function clickToggleTwitter() { 
            document.getElementById("auth_twitter").setAttribute("data-twit-clickToggle") = "true";     

        }
    </script>

    <!--    Spotify Button Toggle -->
     <script>
        function clickToggleSpotify() { 
            document.getElementById("auth_spotify").setAttribute("data-spot-clickToggle") = "true";    

        }
    </script>


</html>

Наверное, мой вопрос: как следует подходить к решению этой проблемы? У меня нет опыта в веб-разработке, поэтому любые полезные ресурсы будут с благодарностью :)

1 Ответ

0 голосов
/ 22 октября 2019

Функция enableBuildButton() не работала из-за синтаксических ошибок. (JavaScript не понимает синтаксис Python!)

Он работает при изменении следующим образом: 

function enableBuildButton() {
    var spotify_toggle = document.getElementById("auth_spotify").getAttribute("data-spot-clickToggle");
    var twitter_toggle = document.getElementById("auth_twitter").getAttribute("data-twit-clickToggle");

    // Python syntax changed to JS
    if (spotify_toggle && twitter_toggle) {
        document.getElementById("build_playlist").disabled = false; 
    }
}

Я понял это, запустив ваш код в браузере. Произошла синтаксическая ошибка в консоли разработчика, указывающая, где необходимо внести изменения.

(Если вы хотите использовать Python-подобный синтаксис в своих сценариях, ознакомьтесь с CoffeeScript .)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...