Как организовать социальную аутентификацию через Socialite(Laravel)+JWTAuth+Vue.js без редиректа с API-сервера?

Question

[Роман]

Делаю социальную аутентификацию на связке Vue+Laravel по образу и подобию вот этого: https://github.com/fritsvt/laravel-nuxt-authentication (это рабочий пример, по крайней мере для GitHub OAuth все запустилось). Но там есть вот какая закавыка:

- Он для аутентификации между Laravel и OAuth-провайдером (ну, например это GitHub) использует Socialite
- А для аутентификации между Laravel и фронтом на Nuxt.js(по сути это Vue.js) использует https://github.com/tymondesigns/jwt-auth

и когда на стороне Laravel он получает данные по юзеру от GitHub, то дальше, редиректом

return redirect(env('CLIENT_BASE_URL') . '/auth/social-callback?token=' . $this->auth->fromUser($user) . '&origin=' . ($newUser ? 'register' : 'login'));

передает уже JWT-токен на фронт - в Vue.

Но это решение, откровенно так себе решение, потому что приходится клиента жестко прописывать в конфиг сервера

CLIENT_BASE_URL

А если у меня не один клиент? А если у меня клиент вообще без урла и его IP мне заранее неизвестен?

Брать IP из запроса и подставлять динамически?

Но тут тоже такое... я вообще, хочу эту аутентификацию настроить для Android(Cordova)-клиента, и боюсь что там это просто не прокатит - все эти редиректы...

Что посоветуете коллеги? :) Как это можно сделать ловчее? Особенно в контексте WebView-клиента?

Заранее спасибо.

Answer 1

[Дмитрий]

Работает у меня такая схема и в Ionic и в NativeScript.
В общем схема везде одинаковая.
Ionic:
На Laravel нужен Socialite, на клиенте что-то в соответствии с фреймворком. Я использовал ng2-ui-auth. Еще вам нужно установить плагин InAppBrowser.
Последовательность такая:
1. В своем приложении вы жмете на кнопку "Войти через GitHub"
2. Открывается InAppBrowser окно входа GitHub (в урле передается clientId вашего приложения и redirectUri, за это отвечает ng2-ui-auth).
2а. Обратите внимание что redirectUri из запроса должен быть идентичен Authorization callback URL в настройках вашего приложения на сайте GitHub (Settings / Developer settings / OAuth Apps) и в случае Cordova должен быть равен "localhost:3000".
3. GitHub авторизирует вас по логину/паролю, спросит разрешения передавать данные Приложению и редиректит страницу на redirectUri добавляя к нему токен.
4. ng2-ui-auth перехватывает обращение к localhost:3000 (это делается с помощью JS, тут нет никакого локального сервера), достает токен и пересылает его на конечный url (указывается для каждого провайдера в настройках ng2-ui-auth).
4а. Вот этот конечный url должен быть адресом вашего backend'а, а именно метода, который с помощью Socialite будет запрашивать данные пользователя у GitHub.
5. С помощь Socialite вы получаете данные о пользователе у GitHub. Создаете пользователя в Laravel, если его нет, и делаете любые другие необходимы действия.
6. Используя данные пользователя с помощью jwt-auth создаете jwt-токен и возвращаете его клиенту (в пункт 4).
7. На клиенте запоминаете jwt-токен и тот факт, что пользователь аутентифицирован. Из ответа можете достать email (если вы его передали) и где-нибудь отобразить.
Все!

С NativeScript все абсолютно аналогично (там на клиенте я использую nativescript-oauth2) за исключением одного: в NS нет webview, поэтому перехват redirectUri выглядит по-другому:
1. В Authorization callback URL на GitHub вы пишите что-то вроде blablabla://auth (вместо blablabla какая-то длинная уникальная строка - urlScheme).
2. Эта urlScheme также пописывается в настройках nativescript-oauth2 и в App_Resources/Android/src/main/AndroidManifest.xml в виде intent-filter

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="blablabla" />
</intent-filter>

Приложение перехватывает обращение к этой уникальной urlScheme и дальше все продолжается согласно списка.

Comments

[Роман]

Обалдеть! Огромное спасибо за такой чудесный мануал! Это можно уже прям на хабр размещать :)

Всяческих вам благ!

Answer 2

[grinat]

В oauth в качестве redirect-url указываешь window.location, на который юзера перекинут, когда прекинули, парсишь данные из url и отправляешь на сервер.

Comments

[Роман]

хмм... а я вот сейчас аж призадумался: а если это происходит из WebView-приложения - там ведь получается что... ну, в общем, это ведь не браузер же, и ты не сайт открываешь, непонятно что именно указывать как callback-url :| Надо наверное отдельной темой вопрос задать, но сначала загуглю))) Решение понятное, спасибо, но подходит только для веба (как я вижу, мб я чего не вижу)

[grinat]

Роман, там file://www/index.html в редирект url будет file://www/index.html?token=myToken, тут как по мне единственный вопрос разрешат ли такой редирект в oauth сервисе. Если нет, то отдельный сервер авторизации и делать через него.

[Роман]

grinat, о! Спасиб! Мне file:// чего-то не пришло в голову указать как коллбэк))) ок. Буду пробовать и так и эдак.

[Роман]

...мне кажется что должно прокатить - потому что localhost:8000 прокатывает))) по крайней мере на GitHub (другие могут и не дать, да)