@procode
Разработчик

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

Делаю социальную аутентификацию на связке 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-клиента?

Заранее спасибо.
  • Вопрос задан
  • 130 просмотров
Решения вопроса 2
Работает у меня такая схема и в 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 и дальше все продолжается согласно списка.
Ответ написан
@grinat
В oauth в качестве redirect-url указываешь window.location, на который юзера перекинут, когда прекинули, парсишь данные из url и отправляешь на сервер.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы