AngularjS Oauth 2.0 routing don't catch - angularjs

I used this code for my Oauth connextion to google :
http://anandsekar.github.io/oauth2-with-angularjs/
but google retourn uri like this
http://localhost:8080/#access_token=xxxx&expires_in=3600
but angular route don't catche it :
.when('/**access_token=:accessToken', {
template:'',
controller: 'oauthCtrl'
})
How I can do ?

Use just
.when('/', {
template:'',
controller: 'oauthCtrl'
})
and in your oauthCtrl inject $routeParams then
you can access your query strings by $routeParams.access_token and $routeParams.expires_in

Related

angularjs 1.6.x oauth redirect url with param not fired $routeProvider

I am implementing oauth2 login with AngularJS 1.6.x
My index.html is located at my domain eg. http://mydomain/app/
When user click a button on the page, it will redirect the user to a oauth page for login using below code snippet
window.location.replace("https://xxxx/oauth2/xxx");
The user will then be redirected to my app again at http://mydomain/app/?code=xxxxx
The problem I am encountering is that the when('/:code', { is not triggered and the loginCtrl is not fired in which I would like to capture the oauth authorization code. Anything I have done wrong here? Thanks a lot.
Below is my app.js file
var app = angular.module("myApp", ['ngResource', 'ngRoute', 'ngCookies']);
// Routing
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/main.html',
controller : 'mainCtrl'
})
.when('/:code', {
templateUrl : 'pages/login.html',
controller : 'loginCtrl'
})
});

Misbehaviour on routes with Laravel 5.3 and AngularJS 1.5

I try to create an app with Laravel 5.3 and AngularJS. I want to use the routes and templates from Angular instead of Laravel.
Here is the web.php file from Laravel:
Route::get('/', function () {
return view('index');
});
And here is a part of the ui-router in AngularJS:
routeConfig.$inject = ['$stateProvider'];
function routeConfig ($stateProvider) {
// Routes
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/views/home.html'
})
.state('register', {
url: '/register?oauth_token&oauth_verifier',
templateUrl: 'app/views/register.html',
controller: 'RegisterController',
controllerAs: 'registerCtrl'
})
};
I have also enabled the html5mode and the base url on head. The problem now:
When I am at home and click the link to go on register page, it works. But If I try to load directly the register page, it loads it through laravel routes and since I haven't mentioned anything about it there, I have a NotFoundHttpException.
That's because when you refresh all routes are handled by laravel first.
I had the same problem and there are 2 approaches:
either put the angular app on a different domain ... but you will run
into CORS issues
or tell laravel to route any route to angular app, and that's easier
Route::any('{path?}', function()
{
return view("index");
})->where("path", ".+");

Requestmapping from angular-ui-router and spring mvc

I am using AngulaJS as a javascript client side and spring mvc as a rest backend.
In AngulaJS i am using ui-router.
Here is config.js file
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/index");
$stateProvider
.state('trains', {
url: "/trains",
templateUrl: "views/pages/trains.html",
data: {
pageTitle: 'Trains'
}
})
Below is html file (left-sliderbar.html
<li ui-sref-active="active">
Trains
</li>
The problem is when I clicked on "Trains" menu in left left-sliderbar, I cannot get request mapping with the method in Rest Backend of Spring MVC. Below is code from Controller of Spring MVC
#RequestMapping("/trains")
public String getTrainPartialPage(ModelMap modelMap) {
System.out.println("---------Request Mapping: /trains: " + this.getClass());
return "pages/trains";
}
Please help me to fix it out, I'd like to use ui-router than ngRoute, thanks you
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/index");
$stateProvider
.state('trains', {
url: "/trains",
data: {
pageTitle: 'Trains'
},views: {
'content#': {
templateUrl: "views/pages/trains.html",
controller: 'TrainsController'
}
}
})
and you need to implement the rest calls in your service or in your TrainsController.
I had the same problem in a same context.
I think you shoud try to use templateUrl: "views/pages/trains" instead of templateUrl: "views/pages/trains.html" in your $stateProvider provider.
The back-end controller should expose this request mapping:
#RequestMapping(value = "/train")
public ModelAndView getMain() {
return new ModelAndView("pages/train");
}
NB: Using ModelAndView as a return object instead of String (didn't worked with String and actually I con't figure why).
Angular UI Router will write /train in the url and Spring will serve the html file mapped on the /train route.
Hope will help you.

using angularjs router instead spring mvc router

im using spring mvc with angular js.
i would like to know if there's a way to use angularjs router instead
using spring mvc router?
//Java
#RequestMapping(value = "cases", method = RequestMethod.GET)
public String showCase() {
return "case/cases";
}
//angular
app.angular.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
controller : 'UserController',
templateUrl : 'login.html'
}).when('/case', {
controller : 'CaseController',
templateUrl : 'case/cases.html',
})
} ]);
If you want to use angularjs routing features, you need to design restful api with spring. Your controllers should return json data that can be easily consumed by angularjs.

reading param from the current url in AngularJS

Yes there are alot of questions been asked about this topic. But I couldn't get solution for my problem.
Here is my url
http://localhost/resetpassword.html/7f18114f-1e1b-4c73-bf0f-f9e6f5bbb293
And user will be able to get this screen just by clicking the link provided by email. I have tried using $routeParams, $location.search() but can't find my param.
I am using nodejs as my web server. From the server side routing I have added the following route to handle the request.
app.get('/resetpassword.html/:resetcode', function (req, res) {
console.log("reset code: " + req.params.resetcode);
//res.render('resetpassword.html/' + req.params.resetcode);
res.render('resetpassword.html', { resetcode: req.params.resetcode });
});
And my angular configurations as follows
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', { templateUrl: 'home.html' })
.when('/resetpassword.html/:resetcode', { templateUrl: '/resetpassword.html', controller: 'ResetPasswordCtrl' })
.otherwise({ redirectTo: '/' })
;
$locationProvider.html5Mode(true);
})
I can access the path from $location so I can parse for the query string. But is that the only way I have?
Thanks
I believe what you are looking for is RouteParams
http://docs.angularjs.org/api/ngRoute.$routeParams
You have to configure your route like this to be able to use $routeParams:
$routeProvider.when('/resetpassword.html/:resetcode', /**route**/);
Then you should be able to get the reset code using $routeParams.resetcode.

Resources