My application has single page and implemented ngRoute for all tabs navigations.
Now, need to implement login and register. Post to that only, it should navigate to all tabs navigations.
I have confusion for below points:
1) Do I have to create create another one new page for login and register And post to login, do location.href and redirect to existed page which has all tabs navigations. (Is this valid for SPA based application?).
2) Or Do I have to add login and reigsteration on same page where all tabs navigation existed. (in this option, I am not sure, how I can hide all tabs until login or any security threats).
application is developed using angularjs and web api.
Please provide help here to show best approach.
thanks
Best approach is use ui.router instead of ngRoute.
Next is add root scope state change listener in app.run.js file
and add authentication check in there like below
var userInfo = authenticationService.isAuthenticated();
var isLogin = toState.name === "login";
if(isLogin){
if(userInfo)
e.preventDefault();
return;
}
if(userInfo === false) {
e.preventDefault();
$state.go('login');
}
hope this will help
You can have the login and register routes in the same page. Angular JS provides a $cookie service where in the cookies can be set.
Before the user log's in or register's, you can check for the cookie and hide the tabs using the directives which angular provides, for example: ng-if.
Once the user is logged in you can navigate to the home page using "$location.path" by mentioning your required path.
Related
I am new to auth0. I would like to host my own signup and login page. I managed to generate a signup page and successfully call dbconnections/signup, but I have no luck with the login. Currently I am trying oauth/token but I am getting "Authorization server not configured with default connection.”. Is there another API call that I can use for login (username + password)?
Go to settings in Auth0 for your account. The dropdown at the top of your menu.
At settings scroll down to Default Directory and put the name of your database there. Eg: Username-Password-Authentication
Ive posted a detailed ansewr for how to move past this exact issue here
https://stackoverflow.com/a/52157069/3256123
I have a situation where I have written the front-end of my website as micro-services. Every functional section of my website is a react-habitat application bundled with css and html. I have done this so I can re-use these sections wherever I want on the site.
My problem is however in the checkout area I need to pass the customerId from the login application (on successful response) into the delivery address application so I can bring back the default address. I don't want to create a new application and duplicate the code for login and delivery address applications because I will need to use them elsewhere on the website.
So my question is. How can I pass this customerId from my login application to my delivery address application without a page reload? Is there a way to access a react application method from outside of that react application?
Login click handler:
clickHandler(e) {
e.preventDefault();
let payload = {"email":this.props.email, "password":this.props.password};
AuthenticationApp.login(payload).then((response) => {
if (this.props.referrer === "checkout") {
$("#checkout_login-register-tab").addClass("done");
$("#checkout_login-delivery-tab").removeClass("todo");
// Temporary hack to reload page until we can pass new user session into delivery/billing react app from here.
location.reload();
}
this.props.updateParentState({isLoggedIn: true});
})
.catch(function(response){
console.log("res2 - catch", response)
});
}
I have forced a page reload here so the delivery address application re-renders and picks up customerId from the service. I need a way to re-render the delivery application at this stage (from this separate application), either by accessing a function somehow or forcing the application to reset? Is this possible or is there a workaround other than a page reload?
You can do something like this:
loadDeliveryApp(data) {
ReactDOM.render(<DeliveryApp data={data} />, document.getElementById('delivery-app'))
ReactDOM.unmountComponentAtNode(document.getElementById("login-app"))
}
clickHandler(e) {
e.preventDefault()
// your login stuff
loadDeliveryApp(data)
}
Here is the working demo.
https://codepen.io/madhurgarg71/pen/dzgxMd
I'm the original creator of React Habitat.. all your applications can talk to each other via either a flux observer or something like redux.
I suggest flux for react habitat normally as the individual stores keep it light weight instead of one BIG store in redux where you might have dead code in a habitat situation.
You will need to create one common store that both your applications import so that if one changes it, the other will get the update. I can put a demo together later if that helps.
I've been trying to make tutorial page for my app first installment using ionic framework. Is that even possible to make the tutorial page ? Because I can manage to make the splash screen and icon already. An Example maybe ?
You can achieve that by storing something into localstorage, where on your index.html's controller, you will check for the localstorage if the user has seen the intro or not. And once the Intro page is loaded, the localstorage variable would be stored as seen by user or something.
I used Ionic's Slidebox example, I simply added these to the 2 controllers to check if Intro was seen.
YourMainController:
if (window.localStorage.getItem("didIntro") === null) {
$state.go('intro');
}
YourIntroController:
window.localStorage.setItem("didIntro", "seen");
You can checkout this Codepen that I modified for this.
PS: The intro would be shown to the user if they un-install the app or Clear Data of the app. If that bothers you, you could keep server side identification of a user and upon authentication, you could check the didIntro flag you save on your server.
I'm a little new to programming and I'm still beginning on working with a lot of the languages.
Currently, I'm working on a project that requires me to create a login page. With a successful login, the page will change to an "Account Info" page; however, this has to be a single page application. My professor specified that the server will have no concept of "page", and that moving from "Login" to "AccountInfo" will not change the page/URL.
How do I go about calling this? We've done introduction into Angular JS, but he's never done a tutorial on single page applications.
My .js for the login looks like this:
Home.LoginClick = function () {
$.ajax({
url: "Home/Login",
data: {
Username: $(".Username").val(),
Password: $(".Password").val(),
},
success: function (result) { alert(result);
if (deserializedData.Message == "Success")
Home.ChangeToAccountInfo();
}
});
}
Single Page application means that the client loads all the HTML in one shot, thus preventing your browser to refresh the page every time you click somewhere or go a different page. You can witness this in action by going into most websites.
It is considered best practices to use services for back end interaction. Therefore you should create a Auth. service managing your login. Create a function login - and logout. and then inject that service in your controller associated with the view thats displays the login form.
You should upon submission of the form call this login function. you can use ng-submit. after submitting the form the function that you injected in your controller will check with you backend to see if the user exist or not and then you can redirect the user toward the page you want.
You should look into the ui router for more details about how to handles your routes.
I'm using the Login module a bit differently than it is intended. Rather than only have the login module live on a separate page, I want the login module available on all pages. The problem is the login module that's on all pages doesn't receive redirect information. That info is generated by the Javascript that sends the user to the separate login page.
How can I make the login module redirect authenticated users to the page they logged in on? Preferably systematically with DNN, but I'm not above using Javascript or even jQuery to make this work.
Solution based off of Kyle Needham's response below
if( window.location.href == 'http://website.com/authenticated' ){
window.location.href = sessionStorage.getItem('login_redirect');
}
else{
sessionStorage.setItem('login_redirect', window.location.href);
}
On the page that the user logs in on you can set a sessionStorage item.
sessionStorage.setItem('login_redirect', window.location.href);
Then once login is done you can redirect them to the page they logged in on using.
window.location.href = sessionStorage.getItem('login_redirect');
A basic guide to dom storage can be found here.
you might want to use a (session) cookie that you call "auth_redirect" and the value would be the url who sends the user to the login module. alternativally you could redirect to the login module using a ?redirectUrl=/redirect/to/this/page/after/login querystring
session cookie apporach (using $.cookie)
$.cookie("auth_redirect", document.location.href);
// now redirect to login page
if (login === done)
document.location.href = $.cookie("auth_redirect") || "/";