Как сделать авторизацию ВК через React Native Expo?

Question

[Илья]

Здравсвуйте помогите пожалуйсто релизовать авторизацию ВК на Expo React Native. Не нашёл ничего дельного в интернете. Может быть кто-нибудь пробовал такое?

Answer 1

[Сергей Пантелеев]

Если на expo, то попробуйте через AuthSession

let redirectUrl = AuthSession.getRedirectUrl();
let result = await AuthSession.startAsync({
    authUrl: 'https://oauth.vk.com/authorize?client_id=<client_id>&display=mobile&redirect_uri=' +
    encodeURIComponent(redirectUrl) + '&response_type=token&v=5.92',
});
if (result.type === 'success') {
    // обрабатываете полученный токен, получаете информацию о пользователе, etc
}

Comments

[Илья]

Здравствуйте а можно поподробнее о дальнейших действиях?

Нажимаю кнопку Auth VK -> Кидает на страницу вк просит разрешения .

Как мне потом взять токен?

[Сергей Пантелеев]

ynizhenie, после того, как подтвердите разрешения вк, должно перекинуть обратно в приложение, и обработать, например, так:

const response = await fetch('https://api.vk.com/method/users.get?v=5.92&access_token=' + result.params.access_token);
const user = await response.json();

this.setState({
  url: 'https://vk.com/id' + user.response[0].id,
  name: user.response[0].first_name + ' ' + user.response[0].last_name,
});

[Илья]

Сергей Пантелеев, Кхм... Очень странно. Но после нажатия на кнопку. Открывается web expo. Появляется сообщение :

Пожалуйста, не копируйте данные из адресной строки для сторонних сайтов. Таким образом Вы можете потерять доступ к Вашему аккаунту.

И назад не возвращает.

[Сергей Пантелеев]

ynizhenie, а "Доверенный redirect URI" и "Базовый домен" в настройках приложения вк прописаны?

Базовый домен - auth.expo.io
Доверенный redirect URI - https://auth.expo.io/@company/app_name

[Илья]

Сергей Пантелеев, Огромное спасибо!Получилось!

[Илья]

ynizhenie, Стыдно уже конечно спрашивать . Но задам последний вопрос.

Данный код отрабатывает как надо.

url: 'https://vk.com/id' + user.response[0].id,
name: user.response[0].first_name + ' ' + user.response[0].last_name,

Но как на счет Аватарки профиля?
Посмотрел на этот счет что вк дает.Написал вот так:

image: user.response[0].photo_100

В this.state - image: null.

После авторизации :

В console.log(image) -> Выдает undefined и картинка не подгружается.

[Сергей Пантелеев]

ynizhenie, а fields=photo_100 добавили в запрос?) (Дока)

https://api.vk.com/method/users.get?v=5.92&fields=photo_100&access_token=<token>

Answer 2

[Robur]

Вот эти ребята явно пробовали:
https://github.com/doomsower/react-native-vkontakt...
https://github.com/doochik/react-native-vksdk