У меня есть сайт.
Вот его HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<title>Простой клиент ВКонтакте</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Простой клиент ВКонтакте</h1>
</header>
<main>
<section id="auth">
<button id="auth-btn">Авторизация</button>
</section>
<section id="user-info" style="display: none;">
<h2>Информация о пользователе</h2>
<div id="user-name"></div>
<div id="user-photo"></div>
</section>
</main>
<script src="https://vk.com/js/api/openapi.js?169"></script>
<script src="app.js"></script>
</body>
</html>
Вот его JS:
const appId = 'APP_ID';
const authBtn = document.getElementById('auth-btn');
const userInfoSection = document.getElementById('user-info');
const userNameElem = document.getElementById('user-name');
const userPhotoElem = document.getElementById('user-photo');
authBtn.addEventListener('click', () => {
VK.init({ apiId: appId });
VK.Auth.login(response => {
if (response.session) {
fetchUserInfo();
} else {
alert('Не удалось авторизоваться');
}
});
});
function fetchUserInfo() {
VK.Api.call('users.get', { fields: 'photo_100', v: '5.131' }, response => {
if (response.response) {
displayUserInfo(response.response[0]);
} else {
alert('Ошибка при получении данных о пользователе');
}
});
}
function displayUserInfo(user) {
userInfoSection.style.display = 'block';
userNameElem.textContent = `${user.first_name} ${user.last_name}`;
userPhotoElem.innerHTML = `<img src="${user.photo_100}" alt="Фото пользователя">`;
}
Вот его CSS:
body {
font-family: Arial,sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4a76a8;
color: white;
text-alight: center;
padding: 1rem 0;
}
button {
background-color: #4a76a8
color: white;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
}
button:hover {
background-color: #3b619c;
}
При смене ключа на настоящий получаю это:
{"error":"invalid_request","error_description":"check domain settings"}
Как исправить это?
Простой
Простой
