Logging out of your account in the app using the "Log in via Facebook" button does not work correctly. What to do(see the description and code)?
Facebook Instagram API: This question is intended for those who already have even minimal experience with the Instagram API, or rather with "Login via Facebook". Facebook Facebook Login: So, to log in to an account in the app, I use the "Log in via Facebook" button, 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 page code 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>
Don't pay attention to @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 logged in or not. This function is responsible for this:
function checkLoginState() {
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
}
It checks a variable such as status, which can have 3 values, but we only care about "connected" and "unknown", which is respectively authorized and not authorized. If logged in, then pointer-events(what does the panel have)=visiblePainted (we can interact with it), and if not, then = none(we can't). And here is the situation: For example, I still If I am not logged in, then I will log in, and after logging in, that is, now, I can use the panel, since statuc = connect. Also, during authorization, the page is reloaded, so the campaign updates the variable data(remember this moment!). Now I want to exit, and after exiting, I will not be able to use the panel, since statuc = unknown. I press the exit button, the page doesn't reload, and the page is empty... I can still use the panel! This is because status=connect, but if if you manually reload the page, the panel can't be used anymore, since, as I understand, the variable data will be updated. So, why does the page reload itself when logging in, but not when logging out? How did you deal with it? How do I make sure that when I exit, the page automatically reloads?(To answer this question, I need to add a reboot code to the exit method that is built into the button, how do I do this? Using recursion? Which ones exactly actions?)