Logging out of an account in the application using the "Login with Facebook" button does not work correctly. What to do (see description and code)?

D

Denis Bredun2020-08-19 19:07:50

JavaScript

Denis Bredun, 2020-08-19 19:07:50

The question is intended for those who already have even minimal, but experience with the Instagram API, or rather with "Login with Facebook". So, to log into the account in the application, I use the "Login with Facebook", or rather their button, after connecting the Facebook SDK for JavaScript:

<body>
<div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v8.0&appId=295566758542379" nonce="mVu6CAJJ"></script>

<div class="fb-login-button" data-size="large" data-button-type="login_with" data-layout="default" data-auto-logout-link="true" data-use-continue-as="false"></div>
</body>

In this case, the entire code of the page looks like this:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="shortcut icon" href="https://lh3.googleusercontent.com/WbThPgBue3P4Y5goEi84iEZkOhzO3nl0xovlSiy1-Z3oM8H8jUHsuLZ7v8vBtQMtVdpOvzAxyiENXwWWKQM22VYR14-pfAtnDGwGJrHX72nUcHql8KZ_5SAl-_kLdnvuuuyY2IyswxZjn0cmGSncr9kYnwJl9erF8BIUAChhxkzvGX7vNOLEa-m7qwkzAx-Nmyqw4MrGM5ScbARGONtqwIOuxY83ErOBrjde7eLY5t4YUoJCG3W2N2GhkRGqb8ahHae6ZDBbqwBU9sqRehr6SyX1IBqTeWzLErsL1FsIN_UIAmxug1adsgUEse2TpIDrbpdIwkDd7co4lMMBop3Dmw74LceHWrIfqmfmM_LQg2ldmXFk6lEuDoTMyCfxMvtUfTYyplFjzyrytZnOTkaGSUFqsTm4X9llwyvn2TjXHgrQiFJwshVchTIyMAmeoPRkPG6Q-hfNLSMPPjKeLXVIr70Sjnn7ejJ16yeRxcmd3hv8aMiGu-9ncoUIkK0PhLo0-nuEeQslF_u1VOsNuuq3nxyFChCAl95h_UAywCPT2hMbImrwlFjmhqIYGyGm4AyCoXCxS3JciNjNm8ILa9CvPX3zqUygQtObJ3cBsMRq9YZP2l8PJYpJ7y5hxG5CEAi7AtBhp0dKJGUF9gA3mYGLTOzsoegEpaVkxrSWI8ZGmYTUAV3S1sMSVV20qV0j=s512-no?authuser=0">
    <title>Inst-Post Searcher</title>
    <style>
        body {
            background: -moz-linear-gradient(to bottom, #333 20%, #2a2929 90%, #808080);
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#808080), color-stop(0.5, #2a2929));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#808080');
            background-size: 100% 106%;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        html, body {
            height: 98%;
        }

        .tbody {
            height: 99.8%;
            width: 99.7%;
        }

        .politics {
            color: #c46d04;
            text-decoration: none;
            position: fixed;
            font-size: 1.0vw;
            top: 94%;
            background: none;
            border: none;
        }

        .title {
            color: #c46d04;
            text-align: center;
            margin-top: -2.5%;
        }

        .menu {
            height: 82%;
            width: 200px;
            position: fixed;
        }

        #usability {
        }

        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: rgba(0, 0, 0, 0.50);
            position: fixed;
            margin-top: -0.4%;
            overflow: auto;
            height: 100%;
        }

        .menu a {
            display: block;
            color: #c46d04;
            padding: 8px 16px;
            text-decoration: none;
            border-top: 1px dashed #c46d04;
            border-bottom: 1px dashed #c46d04;
            border-right: 1px dashed #c46d04;
            border-left: 5px solid #c46d04;
        }

            .menu a:hover {
                background-color: #c46d04;
                color: rgba(0, 0, 0, 0.80);
            }

        .workspace {
            height: 82%;
            width: 89.66%;
            top: 9%;
            position: absolute;
            left: 9.8%;
        }

        .footer {
            height: 10%;
            width: 102%;
            position: fixed;
            z-index: 1;
            background-color: #333;
            top: 91%;
            right: -1%;
        }

        hr {
            background-color: #c46d04;
            border-color: #c46d04;
            border-radius: 100px;
        }

        .lowerfixedline {
            position: fixed;
            top: 90%;
            width: 105%
        }

        .workspace h1 {
            color: #c46d04;
            text-align: center;
        }

        .workspace a {
            color: #01006c;
            text-decoration: none;
            background: none;
            border: none;
        }
    </style>
</head>
<body>
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v8.0&appId=295566758542379" nonce="mVu6CAJJ"></script>
    <div class="tbody" onmouseover="checkLoginState()">
        <script>
            function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
                console.log('statusChangeCallback');
                console.log(response);                   // The current login status of the person.
                if (response.status === 'connected') {   // Logged into your webpage and Facebook.
                    changingUsability();
                } else {                                 // Not logged into your webpage or we are unable to tell.
                    document.getElementById('status').innerHTML = 'Please log ' +
                        'into this webpage.';
                }
            }


            function checkLoginState() {               // Called when a person is finished with the Login Button.
                FB.getLoginStatus(function (response) {   // See the onlogin handler
                    statusChangeCallback(response);
                });
            }


            window.fbAsyncInit = function () {
                FB.init({
                    appId: '{app-id}',
                    cookie: true,                     // Enable cookies to allow the server to access the session.
                    xfbml: true,                     // Parse social plugins on this webpage.
                    version: '{api-version}'           // Use this Graph API version for this call.
                });


                FB.getLoginStatus(function (response) {   // Called after the JS SDK has been initialized.
                    statusChangeCallback(response);        // Returns the login status.
                });
            };

            function changingUsability() {
                document.getElementById("usability").style.pointerEvents = "visiblePainted";
            }
            function reloadPage() {
                window.location.reload();
            }
        </script>
        <div class="fb-login-button" data-size="large" data-button-type="login_with" data-layout="default" data-auto-logout-link="true" data-use-continue-as="false"></div>
        <div class="title">
            <h1><nobr>Inst-Post Searcher</nobr></h1>
            <hr size="2" />
        </div>
        <div style="pointer-events: none;" class="menu" id="usability">
            <ul>
                <li><a href='@Url.Page("/Index")'>Поиск</a></li>
                <li><a href='@Url.Page("/added-users")'>Пользователи</a></li>
            </ul>
        </div>
        <div class="footer">
            <hr class="lowerfixedline" size="2" />
            <a style="left: 33%" class="politics" href='@Url.Page("/terms-of-use")'><nobr>Условия использования</nobr></a>
            <a style="left: 43.5%" class="politics" href='@Url.Page("/privacy-policy")'><nobr>Политика конфиденциальности</nobr></a>
            <a style="left: 57.5%" class="politics" href='@Url.Page("/developer-contacts")'><nobr>Контакты разработчика</nobr></a>
        </div>
    </div>
    @RenderBody()
</body>
</html>

Ignore @RenderBody() - it has nothing to do with my question at all.
If you look, then here we have a panel that is free or not free to use depending on whether the user is authorized or not. This function is responsible for this:

function checkLoginState() {             
                FB.getLoginStatus(function (response) { 
                    statusChangeCallback(response);
                });
                }

It checks for a variable like status which can have 3 values, but we only care about "connected" and "unknown", which are respectively authorized and not authorized. If authorized, then pointer-events(what the panel has)=visiblePainted(we can interact with it), and if not, then = none(we can't). And here is the situation:
For example, I am not authorized yet, then I log in, while after authorization, that is, now, I can use the panel, since statuc = connect. Also, during the authorization, the page is reloaded, so the data of the variables is updated on the campaign (remember this moment!). Now I want to exit, but after exiting I won't be able to use the panel because statuc = unknown. I click the exit button, the page does not reload, uh... I can still use the panel! This is because status = connect, but if you manually reload the page, then the panel can no longer be used, since, as I understand it, the variable data will be updated. So, why does the page reload on its own when logging in, but not when exiting? How did you deal with it? How can I make the page reload automatically when I exit? (To answer this question, I need to add a reload code to the exit method that is embedded in the button, how to do this? Using recursion? What exactly?)