Здравствуйте, как реализовывается авторизация через соц. сети в одностраничных веб-приложениях?

Имеется:
* клиент (веб-страница)
* пользователь
* сервер
* Oauth сервер(в моем случае соц. сеть)

Сервер должен авторизовать/создать пользователя и выдать клиенту токен для доступа к ресурсам

Мое решение:
Пользователь нажимает "войти через соц. сеть"
Клиент перенаправляет пользователя на страницу авторизации.
Пользователь авторизует приложение.
OAuth сервер перенаправляет пользователя обратно на front-end.
Клиент(front-end) отсылает серверу запрос с параметрами, которые ему любезно предоставил OAuth сервер.
Сервер делает обращения к API, производит необходимые операции и отдает клиенту token для доступа к ресурсам.

Я правильно рассуждаю? Можно сделать иначе?

В целом все верно, но
1) не понятно, как и почему фронт отдает серверу данные. По идее, должно быть, что сервер читает профиль пользователя, записывает его себе в БД, а клиенту ставит сессию в кукис.

Забыл упомянуть, что доступ к API по токену(jwt). Это немного усложняет процесс

Ну, все правильно, в общем, но я ещё бы вот так, как написал бы ещё сделал.
Потому что чтобы запретить доступ к ресурсу, лучше делать это на сервере.

Товарищи, может быть кто-то пробовал подружить СДО WebTutor с React'ом?

Привет, парни, хелпаните.

Пытаюсь получить token :

export function getToken() {
   return dispatch => {
       api.auth.token()
           .then(response => {
               console.log(response);
               dispatch({
                   type: AppStatus.INSTALL_TOKEN,
                   payload: response
               });
           });
   };
}
Из console.log получаю undefined

На бекэнде Laravel.

Похоже, что это данные первого запроса с заголовком OPTIONS
Видно, что второй запрос с заголовком POST, в нетворке одает token

Нужно как-то игнорировать первый запрос и данные брать из второго.
Или получать данные одним запросом, т.е. сразу отправлять запрос методом POST

Два запроса делает axios

Как решить проблему?

Покажи тело auth.token

function token() {
 return new Promise((resolve, reject) => {
   post('api/auth/app')
     .then(response => {
       resolve(response.data);
     })
     .catch(e => {
       reject(e);
     });
 });
}

АААААА! Короче, это мои кривые руки.)  😄
Ответ в Laravel в макрос не положил, а в реакте пытаюсь его обработать как будто он там.
response приходит правильно!

(-___- )

привет всем, нужна помощь, я еще совсем зеленый и не могу разобраться

Задавай свои ответы.

значит, я хочу написать клиентскую часть, с реализацией MVC разбив на модули все, что бы было удобно писать, само представление хочу написать на react остальное на es6, но при этом, мне нужен только скомпилированный и минифицированный файл, с модулями проблем нет webpack без труда их собирает, но когда доходит до настройки babel, что бы он переводил es6 и js, тут и начинаются проблемы, уже чего только не посмотрел, и все равно, либо не получается, либо не походит для моей задачи, конечно, возможно я чего то не понимаю, но мне хотелось бы разобраться

Скинь в гист свой конфиг вебпака

не знаю, как туда его скинуть с phpstorm'а

спасибо😅

Konstantin выглядит безобидно. Есть ошибки, либо ты получаешь итоговый файл без транспиляции?

ошибки, в одном он все собирает и переводит в es5, но с react какие то проблемы, в терминале предупреждение о том что какой то файл превысил размер, по моему 500кб, а сегодня решил все еще раз собрать, но тут вообще фиаско, 20-ти этажный код ошибки