- Крок 1. Реєстрація нового додатка
- Крок 2. Генерація посилання для аутентифікації
- Крок 3. Отримання токена
- Крок 4. Отримання інформації про користувача
- Крок 5. Витяг інформації про користувача
- Крок 6. Справа за вами
- підсумок
З кожним днем вплив соціальних мереж і сервісів тільки міцнішає. Це означає, що нам, як веб розробникам потрібно це враховувати. Сьогодні я розповім і покажу, як створити аутентифікацію ваших користувачів через соціальну мережу Вконтакте. Для цього ми не будемо користуватися якимись сторонніми бібліотеками, а реалізуємо все з нуля, власними руками. Думаю, багато хто чекав подібного уроку, так що томити не буду. Почнемо!
Замітка. Приклад, створений в даному уроці, призначений для роботи на локальному сервері.
Крок 1. Реєстрація нового додатка
Для початку нам необхідно створити новий додаток на сайті соціальної мережі ВКонтакте
У формі введіть назву програми; виберіть тип "Веб-сайт"; В якості адреси сайту введіть шлях до папки з проектом на вашому локальному сервері. У моєму випадку, це http: // localhost / vk-auth. Базовий домен: localhost.
Після натискання на кнопку "Підключити сайт", вам напевно доведеться ввести код перевірки, який прийде по смс. Якщо ви пройдете перевірку, то вам повинна відкритися наступна форма з настройками програми.
Відразу ж хочу попередити, що справжні дані, що відносяться до мого додатком, я замінив на фіктивні, тому що публікація таких значень як "Захищений ключ" карається видаленням вашої програми або облікового запису в цілому.
З даної форми нам знадобляться такі дані, як `ID пріложенія`,` Захищений ключ`, `Адреса сайта`. Запишемо їх у спеціальні змінні у файлі index.php:
<? Php $ client_id = '3485070'; // ID додатки $ client_secret = 'lYjfUZwZmlJJlFIqQFAj'; // Захищений ключ $ redirect_uri = 'http: // localhost / vk-auth'; // Адреса сайтуКрок 2. Генерація посилання для аутентифікації
Для генерації посилання нам буде потрібно адресу аутентифікації і спеціальні параметри:
$ Url = 'http://oauth.vk.com/authorize'; $ Params = array ( 'client_id' => $ client_id, 'redirect_uri' => $ redirect_uri, 'response_type' => 'code');За допомогою функції http_build_query, передавши туди масив параметрів, отримаємо чергування ключів і значень, як в url адресу. Отже, генеруємо посилання і виводимо на екран:
echo $ link = '<p> <a href = "'. $ url. '?' . Urldecode (http_build_query ($ params)). ' "> Аутентифікація через ВКонтакте </a> </ p>';Також тут я скористався функцією urldecode. Якщо цього не зробити, то в згенерованої посиланням можуть з'явитися закодовані символи слешів, знаків двокрапки і так далі. Щось на зразок цього:
http://oauth.vk.com/authorize?client_id=3485070&redirect_uri=http%3A%2F%2Flocalhost%2Fvk-auth&response_type=codeЯкщо ж ми пропустимо цей рядок через функцію urldecode, то отримаємо:
http://oauth.vk.com/authorize?client_id=3485070&redirect_uri=http://localhost/vk-auth&response_type=codeОтже, посилання для аутентифікації у нас готова. Якщо ми сформували всі параметри правильним чином і отримали вірний url, то пройшовши за посиланням, будемо перенаправлені на адресу, зазначену в налаштуваннях програми ( 'http: // localhost / vk-auth'). Тільки тепер до цього адресою буде прикріплений спеціальний параметр code:
// Приклад. У вашому випадку код буде інший http: // localhost / vk-auth /? Code = f30621b146115b3badКрок 3. Отримання токена
Починати процедуру аутентифікації ми можемо тоді і тільки тоді, коли до нас прийшов параметр code. Він нам потрібен для того, щоб отримати спеціальний токен доступу, за допомогою якого, в подальшому, ми дістанемо інформацію про користувача.
В першу чергу, знову сформуємо необхідні нам параметри для цього запиту:
if (isset ($ _ GET [ 'code'])) {$ params = array ( 'client_id' => $> clientId, 'client_secret' => $ this-> clientSecret, 'code' => $ _GET [ 'code' ], 'redirect_uri' => $ this-> redirectUri); }Далі нам потрібно відправити GET запит на адресу https://oauth.vk.com/access_token, передавши перераховані параметри. У PHP виконати GET запит по якомусь адресою можна декількома способами. Для цього уроку я скористаюся функцією file_get_contents.
if (isset ($ _ GET [ 'code'])) {$ params = array ( 'client_id' => $ client_id, 'client_secret' => $ client_secret, 'code' => $ _GET [ 'code'], 'redirect_uri '=> $ redirect_uri); $ Token = json_decode (file_get_contents ( 'https://oauth.vk.com/access_token'. '?'. Urldecode (http_build_query ($ params))), true); }В результаті, при успішному виконанні запиту в змінну $ token буде записана відповідь від ВКонтакте в JSON форматі. Цей рядок містить 3 параметра: access_token, який ми будемо використовувати в наступних запитах для добування інформації про користувача, expires_in - час життя токена, user_id - id користувача, який пройшов аутентифікацію.
{ "Access_token": "2c6276b767b5e2f35f908e89d61416beea17b6d1ebcd3d14e20ac910281d306bb506ec78e75518ed614e9", "expires_in": 86399, "user_id": 14966712}Для того щоб ми далі могли працювати з даними параметрами, декодуємо JSON рядок за допомогою функції json_decode і поміщаємо дані в масив, передавши в якості другого аргументу true.
Крок 4. Отримання інформації про користувача
Отже, тепер коли у нас є параметри access_token і user_id, ми можемо зробити запит до ВКонтакте API і отримати інформацію про користувача. Для початку знову підготуємо масив з параметрами, які в наслідку перетворимо в фрагмент url рядки.
if (isset ($ _ GET [ 'code'])) {$ params = array ( 'client_id' => $ client_id, 'client_secret' => $ client_secret, 'code' => $ _GET [ 'code'], 'redirect_uri '=> $ redirect_uri); $ Token = json_decode (file_get_contents ( 'https://oauth.vk.com/access_token'. '?'. Urldecode (http_build_query ($ params))), true); if (isset ($ token [ 'access_token'])) {$ params = array ( 'uids' => $ token [ 'user_id'], 'fields' => 'uid, first_name, last_name, screen_name, sex, bdate, photo_big ',' access_token '=> $ token [' access_token ']); }}У параметр uids записуємо id користувача; в fields перераховуємо через кому поля, які хочемо отримати (uid - id користувача, first_name - ім'я, last_name - прізвище, screen_name - ім'я, що відображається на сторінках VK, sex - стать, bdate - дату народження, photo_big - фотографію). Для доступу до більшої кількості полів зверніться до ВКонтакте API users.get . В якості останнього параметра передаємо 'access_token'.
Для отримання інформації про користувача сфомірованние параметри нам потрібно відправити GET запитом за адресою https://api.vk.com/method/users.get.
if (isset ($ _ GET [ 'code'])) {$ params = array ( 'client_id' => $ client_id, 'client_secret' => $ client_secret, 'code' => $ _GET [ 'code'], 'redirect_uri '=> $ redirect_uri); $ Token = json_decode (file_get_contents ( 'https://oauth.vk.com/access_token'. '?'. Urldecode (http_build_query ($ params))), true); if (isset ($ token [ 'access_token'])) {$ params = array ( 'uids' => $ token [ 'user_id'], 'fields' => 'uid, first_name, last_name, screen_name, sex, bdate, photo_big ',' access_token '=> $ token [' access_token ']); $ UserInfo = json_decode (file_get_contents ( 'https://api.vk.com/method/users.get'. '?'. Urldecode (http_build_query ($ params))), true); }}В результаті, якщо все було зроблено правильно, то отримаємо JSON відповідь такого вигляду:
{ "Response": [{ "uid": 14966712, "first_name": "Стас", "last_name": "Протасевич", "screen_name": "stanislav.protasevich", "sex": 2, "bdate": " 3.7.1988 "," photo_big ":" http: \ / \ / cs307601.vk.me \ / u14966712 \ /a_8234a279.jpg "}]}Знову перетворимо JSON відповідь в масив і звернемося до нульового елементу, що зберігається в масиві, доступному по ключу response:
if (isset ($ _ GET [ 'code'])) {$ result = false; $ Params = array ( 'client_id' => $ client_id, 'client_secret' => $ client_secret, 'code' => $ _GET [ 'code'], 'redirect_uri' => $ redirect_uri); $ Token = json_decode (file_get_contents ( 'https://oauth.vk.com/access_token'. '?'. Urldecode (http_build_query ($ params))), true); if (isset ($ token [ 'access_token'])) {$ params = array ( 'uids' => $ token [ 'user_id'], 'fields' => 'uid, first_name, last_name, screen_name, sex, bdate, photo_big ',' access_token '=> $ token [' access_token ']); $ UserInfo = json_decode (file_get_contents ( 'https://api.vk.com/method/users.get'. '?'. Urldecode (http_build_query ($ params))), true); if (isset ($ userInfo [ 'response'] [0] [ 'uid'])) {$ userInfo = $ userInfo [ 'response'] [0]; $ Result = true; }}}Прошу звернути увагу, що в даному фрагменті, я додав спеціальну змінну $ result, рівну спочатку false відразу ж після перевірки наявності GET параметра code. Якщо нам вдалося витягти інформацію про користувача, то ми міняємо значення цієї змінної на true.
Повний код:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "xml: lang =" ru "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = UTF-8 "/> <title> </ title> </ head> <body> <? php $ client_id = '3485070'; // ID додатки $ client_secret = 'lYjfUZwZmlJJlFIqQFAj'; // Захищений ключ $ redirect_uri = 'http: // localhost / vk-auth'; // Адреса сайту $ url = 'http://oauth.vk.com/authorize'; $ Params = array ( 'client_id' => $ client_id, 'redirect_uri' => $ redirect_uri, 'response_type' => 'code'); echo $ link = '<p> <a href = "'. $ url. '?' . Urldecode (http_build_query ($ params)). ' "> Аутентифікація через ВКонтакте </a> </ p>'; if (isset ($ _ GET [ 'code'])) {$ result = false; $ Params = array ( 'client_id' => $ client_id, 'client_secret' => $ client_secret, 'code' => $ _GET [ 'code'], 'redirect_uri' => $ redirect_uri); $ Token = json_decode (file_get_contents ( 'https://oauth.vk.com/access_token'. '?'. Urldecode (http_build_query ($ params))), true); if (isset ($ token [ 'access_token'])) {$ params = array ( 'uids' => $ token [ 'user_id'], 'fields' => 'uid, first_name, last_name, screen_name, sex, bdate, photo_big ',' access_token '=> $ token [' access_token ']); $ UserInfo = json_decode (file_get_contents ( 'https://api.vk.com/method/users.get'. '?'. Urldecode (http_build_query ($ params))), true); if (isset ($ userInfo [ 'response'] [0] [ 'uid'])) {$ userInfo = $ userInfo [ 'response'] [0]; $ Result = true; }} If ($ result) {echo "Соціальний ID користувача:". $ UserInfo [ 'uid']. '<br />'; echo "Ім'я користувача:". $ UserInfo [ 'first_name']. '<br />'; echo "Посилання на профіль користувача:". $ UserInfo [ 'screen_name']. '<br />'; echo "Пол користувача:". $ UserInfo [ 'sex']. '<br />'; echo "День Народження:". $ UserInfo [ 'bdate']. '<br />'; echo '<img src = "'. $ userInfo [ 'photo_big']. '" />'; echo "<br />"; }}?> </ Body> </ html>Крок 5. Витяг інформації про користувача
Тепер витягувати інформацію про користувача ми можемо з масиву, що зберігається в змінній $ userInfo по ключам uid, first_name, last_name, screen_name, sex, bdate, photo_big.
if ($ result) {echo "Соціальний ID користувача:". $ UserInfo [ 'uid']. '<br />'; echo "Ім'я користувача:". $ UserInfo [ 'first_name']. '<br />'; echo "Посилання на профіль користувача:". 'Http://vk.com/'. $ UserInfo [ 'screen_name']. '<br />'; echo "Пол користувача:". $ UserInfo [ 'sex']. '<br />'; echo "День Народження:". $ UserInfo [ 'bdate']. '<br />'; echo '<img src = "'. $ userInfo [ 'photo_big']. '" />'; echo "<br />"; }Крок 6. Справа за вами
Тепер, коли у нас є така інформація, як ID користувача, в першу чергу, нам необхідно перевірити його наявність в нашій базі даних. Якщо користувача з таким ID не існує, то значить він авторизувався з нашого сайту вперше, і ми внесемо його в базу. Якщо користувач вже є, можемо перевірити чи не змінилися якісь дані про нього, наприклад, ім'я або ще щось. Якщо так, оновимо запис.
Після цього, все що нам залишилося зробити, так це створити сесію і помістити в неї інформацію про наш користувача.
$ _SESSION [ 'user'] = $ userInfo;На сторінці виходу з системи просто видаляємо сесію за допомогою функції unset.
підсумок
Ось ми і підійшли до кінця цього уроку, і тепер у ваших руках є рішення, якого ви, можливо, довго чекали. Якщо вас цікавить тема аутентифікації через соціальні мережі, то пишіть про це в коментарях, і я з радістю розповім і покажу, як працювати з Однокласниками, Google-ом, Facebook-ом та іншими сервісами.
Com/authorize?Com/authorize?
У вашому випадку код буде інший http: // localhost / vk-auth /?
Quot; />'; echo "<br />"; }}?