Parsing Oauth 2.0 возвращает параметры в угловом ui-router

Question

Я пытаюсь аутентифицировать пользователя с использованием API Oauth 2.0 от Google. Когда мое приложение HREF на странице проверки подлинности Google, оно успешно передает информацию обратно в мое приложение AngularJS. Однако я не уверен, как лучше обрабатывать возвращаемые данные, закодированные в URL.

Это формат он возвращается как:

#access_token=... 
&token_type=Bearer 
&expires_in=3600 

Моя главная проблема заключается в том, что эта строка начинается с # вместо ? как традиционно делается с URL закодирован параметрами.

В моей stateProvider конфигурации я реализовал состояние обратного вызова как таковой:

.state 'auth.googlecallback', 
    url: '/googlecallback/#{accessToken}&token_type={tokenType}&expires_in={expiresIn}' 
    templateUrl: 'views/auth/googlecallback.html' 
    controller: 'GoogleCallbackCtrl as gVm' 

выше URL представляет собой пример того, что я пробовал. Когда URL-адрес просто /googlecallback/, страница загружается успешно, даже если она перешла на использование ссылки Google Oauth. Но в тот момент, когда у меня был символ #, состояние ломается, и я не могу разобрать параметры состояния для внутренних данных.

Я изучил использование библиотеки angular-oauth на GitHub, но он не обновлялся через 2 года, и, похоже, он не позволяет аутентификации Oauth больше, чем просто Google (я хочу использовать Facebook и Google).

Каков правильный способ обработки данных Oauth URL в угловом-ui-маршрутизаторе?

Answer 1

Чтобы быть откровенным, я не думаю, что это действительно ответит на ваш вопрос, но я помогал друзьям с этим ранее сегодня. Они не смогли обработать URI через u-router. Вместо этого им пришлось делегировать разбор параметров и сделать соответствующий запрос их контроллеру. Используя услугу определения углового $ и некоторые функции переназначения, мы смогли получить параметры из синтаксиса # запроса в хэш, чтобы он смог вернуться к серверу в своем запросе. Код так же выглядел следующим:

var paramsArray = $location.hash().split('&') 
var payload = {}; 
angular.forEach(paramsArray, function (param) { 
    var arr = param.split('='), 
     key = param[0], 
     value = param[1]; 
    payload[key] = value; 
}); 

Это может абсолютно быть упрощена, но это было то, что он пытается достичь своей стратегии.

Что все сказано, я лично не поклонник попытки выполнить стратегию OAuth на клиенте. У вас есть секретные ключи, которые обычно необходимо обменивать для завершения полного рукопожатия. Если это возможно, было бы лучше, если бы вы сделали следующее:

1. Перенаправление клиента на соответствующий путь
2. OAuth Есть редирект перейти к конечной точке сервера, который может обработать запрос OAuth и завершить рукопожатие.
3. Укажите конечную точку сервера, к которой перенаправлен запрос oauth, перенаправляйте на целевую страницу успеха с любым дополнительным ответом объектов, требуемых вашим приложением.

Выполнение этого будет защищать ваши личные ключи, а большинство веб-фреймворков имеют модули/пакеты/драгоценные камни/плагины и т. Д. для реализации oauth для всех основных поставщиков. Надеюсь, это поможет вам в правильном направлении.