angularjs - angular-ui replace'?' with '#' on redirect from facebook oauth -
i'm implementing facebook ouath login in angularjs without sdk.
everything works expected except 1 thing.
when user click on login button, redirects facebook login page, after successfull login, facebook fires redirect_uri url, , user again in app.
problem is, ui-router (probably) replaces '?' '#' in path, so
http://localhost/fbauth?access_token=xxx&code=yyy
becomes
http://localhost/fbauth#access_token=xxx&code=yyy
because of that, cannot use $stateparams
object query params.
suprisingly, when manually enter in browser or click link http://localhost/fbauth?access_token=xxx&code=yyy
works properly, , ui-router not replace '?' '#'.
i guess, it's related redirection scenario itself.
can point me wrong, or how change ui-router behaviour in case?
this state, handles fb redirect:
.state('fbauth', { url: '/fbauth?access_token&code&expires_in', templateurl: 'static/public/public.html', controller: 'publicctrl' });
ps ui-router set work in html5 mode $locationprovider.html5mode(true);
you can add resolve function state, replace hash url query string url:
resolve: { 'urlfix': ['$location', function($location){ $location.url($location.url().replace("#","?")); }] }
- so url of
/fbauth#access_token=123456&code=abcde&expires_in=99999999
redirected automatically - becoming
/fbauth?access_token=123456&code=abcde&expires_in=99999999
$stateparams
populated correctly.- the value
{access_token: "123456", code: "abcde", expires_in: "99999999"}
$location.url()
doesn't update if location matches already, state won't redirect when there no#
present.
full example code:
<!doctype html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> <meta charset="utf-8"> <title>fbauth</title> </head> <body ng-app="app"> <base href="/"> <div ui-view></div> <script> angular.module('app', ['ui.router']) .controller('publicctrl', ['$scope','$stateparams', function($scope, $stateparams) { // $stateparams should correctly set (even hash route) console.log($stateparams); }]) .config(['$locationprovider','$stateprovider', function($locationprovider, $stateprovider){ $stateprovider .state("fbauth", { url: '/fbauth?access_token&code&expires_in', templateurl: 'fbauth.html', controller: 'publicctrl', resolve: { 'urlfix': ['$location', function($location){ $location.url($location.url().replace("#","?")); }] } }); $locationprovider.html5mode(true); }]); </script> </body> </html>
Comments
Post a Comment