Вопрос предназначен тем, кто уже имеет даже минимальный, но опыт работы с Instagram API, а точнее с "Вход через Facebook". Итак, чтобы войти в аккаунт в приложении я использую "Вход через Facebook", а точнее их кнопку, предварительно подключив 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>
При этом весь код страницы выглядит так:
<!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>
На @RenderBody() не обращайте внимание - он вообще не имеет отношение к моему вопросу.
Если посмотреть, то тут у нас есть панель, которая свободна или не свободна для использования в зависимости от того, авторизован пользователь или нет. За это отвечает эта функция:
function checkLoginState() {
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
}
Она проверяет такую переменную, как status, которая может иметь 3 значения, но нам важны только "connected" and "unknown", что соответственно авторизован и не авторизован. Если авторизован, то pointer-events(что у панели)=visiblePainted(можем с ней взаимодействовать), а если нет, - то = none(не можем). И вот ситуация:
Например, я ещё не авторизован, то я авторизовуюсь, при этом после авторизации, то есть теперь, я могу использовать панель, так как statuc = connect. Также во время авторизации перезагружается страница, поэтому походу обновляются данные переменных(запомните этот момент!). Теперь я хочу выйти, при этом после выхода я не смогу использовать панель, так как statuc = unknown. Я нажимаю кнопку выхода,
страница не перезагружается, иии... я всё равно могу пользоваться панелью! Это потому что status=connect, но если от руки перезагрузить страницу, то панель уже использвать нельзя будет, так как, как я понял, данные переменных обновятся. Так вот, почему при авторизации страница самостоятельно перезагружается, а при выходе - нет? Как вы с этим боролись? Как сделать, чтобы когда я выходил, то страница автоматом перезагружалась?(Чтобы ответить на этот вопрос, мне нужно добавить к методу выхода, который встроен в кнопку, страку код перезагрузки, как это сделать? С помощью рекурсии? Какие именно действия?)
