Интеграция с API соцсетей для авторизации пользователей
В данном кейсе рассмотрим возможность реализации авторизации пользователей на ваших веб-ресурсах через социальные сети. В примере покажем, как происходит взаимодействие с API социальной сети Vk. Вне зависимости от языка программирования алгоритм общения с API социальных сетей будет одинаковым. Для разработки и тестирования будем использовать Python 3.7, из библиотек requests, json, из инструментов интерпретатор python, в нашем случае это PyCharm и браузер.
Настройка приложения авторизации VK
Заходим в ВК, создаем приложение [https://vk.com/editapp?act=create]. При этом, необходимо запомнить идентификаторы client ID и client secret.
На этом взаимодействия с первичными настройками мы закончили.
На этом взаимодействия с первичными настройками мы закончили.
На этом взаимодействия с первичными настройками мы закончили.
- На этом взаимодействия с первичными настройками мы закончили.
- На этом взаимодействия с первичными настройками мы закончили.
- На этом взаимодействия с первичными настройками мы закончили.
На этом взаимодействия с первичными настройками мы закончили.
На этом взаимодействия с первичными настройками мы закончили.
link = f''https://oauth.vk.com/authorize?client_id={client_id}& \
f''display=page& \
f''redirect_uri={redirect}& \
f''scope=email,offline& \
f''response_type=code& \
f''v=5.124
в которой передается
- client_id – айди клиента
- display = page - параметр, отвечающий за вид страницы авторизации (выбираем вид «страница»)
- redirect_uri - ссылка перенаправления после получения кода, отвечающего за получение токена пользователя
- scope - в этом параметре передаем то, что нужно получить из данных пользователя - в данном случае мы запросили у пользователя, помимо данных со страницы, еще доступ к почте. При этом, доступ к этим данным мы будем иметь даже в том случае, если пользователь не online
- response_type - тип ответа от vk api
- v - версия api - обязательный параметр
После редиректа со страницы появляется следующее окно:
Затем, происходит переход на страницу редиректа с get параметром code, который нужно сохранить.
Получение токена пользователя
Пишем функцию, которая принимает код, полученный шагом выше, и отправляющая POST запрос. Тело функции будет выглядит примерно следующим образом:
def token(r):
get_token = 'https://oauth.vk.com/access_token'
token_param = {
'client_id': client_id,
'client_secret': client_secret,
'redirect_uri': redirect,
'code': r
}
data = json.dumps(token_param)
request = re.post(url=get_token, data=token_param)
response = json.loads(response.text.replace('\\', ''))
return response
Структура переменной
response = {
"access_token": str:token,
"email": str:email,
"expires_in": int:time,
"user_id": int:id
}
Где:
- access_token - полученный токен
- email - email пользователя
- expires_in - время жизни токена, значение 0 означает вечное время жизни токена,
- user_id - id пользователя.
Получение данных пользователя
Пишем функцию, принимающую токен пользователя и получающую данные пользователя по POST запросу:
def vk_auth(r):
auth = 'https://api.vk.com/method/users.get'
auth_param = {
'fields':'uid,login,first_name,last_name,screen_name,has_mobile,bdate,photo_max_orig,mail,email',
'access_token': r,
'scope': 'email,offline',
'v': 5.124
}
response = re.post(url=auth, data=auth_param)
s = json.loads(response.content)
data = s['response'][0]
return data
Структура переменных
- auth_params: fields - перечисление данных, которые нужно получить,
- access_token – сам токен,
Пример интеграции с API VK для авторизации пользователя на сайте
Пишем небольшое flask приложение для проверки проделанной работы и две простые странички - стартовая страница с кнопкой входа и страничка кабинета пользователя, где отобразим полученные данные пользователя.
Прописываем рутинги для стартовой страницы:
@app.route('/')
@app.route('/index')
def index():
return render_template('index.html')
Теперь, рут для переадресации:
@app.route('/vk-auth')
def authVK():
link = vk.send_request()
return redirect(link, code=301)
Рут-шлюз, в котором приходит токен, для получения данных юзера
@app.route('/vk-gateway')
def gateway():
code = request.args.get('code')
data = vk.token(r=code)
user_data = vk.vk_auth(data['access_token'])
first_name = user_data['first_name']
last_name =user_data['last_name']
avatar = user_data['photo_max_orig']
nickname = user_data['screen_name']
user = {
'nickname': nickname,
'first_name': first_name,
'last_name': last_name,
'avatar': avatar
}
return render_template('auth.html', user=user)
index.html
<!DOCTYPE html"
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Hello World!</h1>
<a href="/vk-auth"><button>Log In via VK</button></a>
</body>
</html>
auth.html
<!DOCTYPE html"
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Hello, {{ user.nickname }}</h1>
<p>Hello, {{ user.first.name }}</p>
<p>Hello, {{ user.last.name }}</p>
<img src="{{ user.avatar }}">
</body>
</html>
Визуально это выглядит так:
Выводы из всего вышеизложенного - авторизация через vk прошла успешно.
Взаимодействие по API с Yandex, Google, Instagram, Facebook и др.
Все современные социальные сети используют протокол OAuth2 и предоставляют API для реализации авторизации. Во всех случаях принцип интеграции с API соцсетей аналогичен примеру, рассмотренному выше. Ниже, предоставляем ссылки на создание приложений для получения секретного ключа.
Googol: https://console.cloud.google.com/
Яндекс: https://oauth.yandex.ru/
Facebook: https://developers.facebook.com/docs/
development/create-an-app
Для создания авторизации через Instagram необходимо в аккаунте разработчика Fb на странице Dashboard найти вкладку Instagram и создать приложение там.