Skip to content

Instantly share code, notes, and snippets.

@Septdir
Created Feb 3, 2021
Embed
What would you like to do?
Инструмент получения токена для api vk.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Инструмент получения токена для api vk.com</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/css/uikit.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/js/uikit.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="uk-container">
<h1>Инструмент получения токена для api vk.com</h1>
<div class="uk-form uk-form-horizontal" vk-get-token="container">
<div class="uk-margin">
<label for="vk-get-token_client_id" class="uk-form-label">
ID приложения<span class="uk-text-danger">*</span>
</label>
<div class="uk-form-controls">
<input id="vk-get-token_client_id" vk-get-token="client_id" type="text" class="uk-input"/>
</div>
</div>
<div class="uk-margin" vk-get-token="scopes">
<div class="uk-form-label">
Права доступа<span class="uk-text-danger">*</span>
</div>
<div class="uk-form-controls">
<ul class="uk-list">
<li>
<label for="vk-get-token_scope_notify" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_notify" type="checkbox" class="uk-checkbox"
value="notify"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>notify</strong><br>
<span class="uk-text-small uk-text-muted">
Пользователь разрешил отправлять ему уведомления (для
flash/iframe-приложений).
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_friends" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_friends" type="checkbox" class="uk-checkbox"
value="friends"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>friends</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к друзьям.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_photos" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_photos" type="checkbox" class="uk-checkbox"
value="photos"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>photos</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к фотографиям.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_audio" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_audio" type="checkbox" class="uk-checkbox"
value="audio"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>audio</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к аудиозаписям.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_video" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_video" type="checkbox" class="uk-checkbox"
value="video"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>video</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к видеозаписям.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_stories" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_stories" type="checkbox" class="uk-checkbox"
value="stories"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>stories</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к историям.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_pages" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_pages" type="checkbox" class="uk-checkbox"
value="pages"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>pages</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к wiki-страницам.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_status" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_status" type="checkbox" class="uk-checkbox"
value="status"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>status</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к статусу пользователя.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_notes" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_notes" type="checkbox" class="uk-checkbox"
value="notes"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>notes</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к заметкам пользователя.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_messages" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_messages" type="checkbox" class="uk-checkbox"
value="messages" vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>messages</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к расширенным методам работы с сообщениями (только для приложений,
прошедших модерацию).
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_wall" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_wall" type="checkbox" class="uk-checkbox"
value="wall"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>wall</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к обычным и расширенным методам работы со стеной.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_ads" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_ads" type="checkbox" class="uk-checkbox"
value="ads"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>ads</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к расширенным методам работы с рекламным API.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_offline" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_offline" type="checkbox" class="uk-checkbox"
value="offline"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong class="uk-text-success">offline</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к API в любое время (при использовании этой опции параметр
expires_in,
возвращаемый вместе с access_token, содержит 0 — токен бессрочный).
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_docs" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_docs" type="checkbox" class="uk-checkbox"
value="docs"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>docs</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к документам.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_groups" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_groups" type="checkbox" class="uk-checkbox"
value="groups"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>groups</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к группам пользователя.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_notifications" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_notifications" type="checkbox" class="uk-checkbox"
value="notifications" vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>notifications</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к оповещениям об ответах пользователю.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_stats" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_stats" type="checkbox" class="uk-checkbox"
value="stats"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>stats</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к статистике групп и приложений пользователя, администратором которых
он
является.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_email" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_email" type="checkbox" class="uk-checkbox"
value="email"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>email</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к email пользователя.
</span>
</span>
</label>
</li>
<li>
<label for="vk-get-token_scope_market" class="uk-flex uk-flex-top">
<span class="uk-display-inline-block uk-margin-small-right">
<input id="vk-get-token_scope_market" type="checkbox" class="uk-checkbox"
value="market"
vk-get-token="scope"/>
</span>
<span class="uk-display-inline-block">
<strong>market</strong><br>
<span class="uk-text-small uk-text-muted">
Доступ к товарам.
</span>
</span>
</label>
</li>
</ul>
</div>
</div>
<div class="uk-margin">
<div class="uk-form-label"></div>
<div class="uk-form-controls">
<a vk-get-token="button" class="uk-button uk-button-primary">
Получить токен
</a>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let container = document.querySelector('[vk-get-token="container"]');
if (container) {
container.querySelector('[vk-get-token="button"]').addEventListener('click', function (event) {
let client_id = container.querySelector('[vk-get-token="client_id"]');
client_id.value = client_id.value.replace(/[^.\d]+/g, '')
.replace(/^([^\.]*\.)|\./g, '$1');
event.preventDefault();
if (client_id.value === '') {
client_id.classList.add('uk-form-danger');
client_id.classList.remove('uk-form-success');
client_id.scrollIntoView();
} else {
client_id.classList.add('uk-form-success');
client_id.classList.remove('uk-form-danger');
let elements = container.querySelectorAll('[vk-get-token="scope"]');
if (container.querySelectorAll('[vk-get-token="scope"]:checked').length === 0) {
elements.forEach(function (element) {
element.classList.add('uk-form-danger');
});
container.querySelector('[vk-get-token="scopes"]').scrollIntoView();
} else {
// get scopes
let scopes = [];
elements.forEach(function (element) {
element.classList.remove('uk-form-danger');
if (element.checked) {
element.classList.add('uk-form-success');
scopes.push(element.value);
}
});
let url = 'https://oauth.vk.com/authorize?response_type=token&client_id=' + client_id.value
+ '&scope=' + scopes.join(','),
popupOpen = false,
popup = null;
if (popupOpen) {
popup.close();
}
let winSize = {width: 0, height: 0};
if (typeof (window.innerWidth) == 'number') {
winSize.width = window.innerWidth;
winSize.height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
winSize.width = document.documentElement.clientWidth;
winSize.height = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
winSize.width = document.body.clientWidth;
winSize.height = document.body.clientHeight;
}
winSize.width = (winSize.width.toFixed() * 1);
winSize.height = (winSize.height.toFixed() * 1);
let size = {
width: ((winSize.width / 100 * 90).toFixed() * 1),
height: ((winSize.height / 100 * 90).toFixed() * 1)
};
let center = {
width: (((winSize.width - size.width) / 2).toFixed() * 1),
height: (((winSize.height - size.height) / 2).toFixed() * 1)
};
popup = window.open(
url,
'',
'width=' + size.width +
',height=' + size.height +
',left=' + center.width +
',top=' + center.height
);
popupOpen = true;
}
}
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment