I've a MVC application with nodejs and angular js as front end, I've a login page which have a different top menu than other pages
How to switch between these header to show in the view
In angular js login controller, I'm calling the service which checks for username and password returns JWT token if the login is successful. Everything is fine, But how to render the admin page
I wanted to know how to change the entire view rather than changing the the part of the view in angularjs
You should use promise and $location, or ui-router. When you post request to your server you can define success callback in your promise. Inside that callback everything what you need is redirect user. for example:
$scope.auth = function(credentials) {
myService.login(credentials).then(function(res/*response*/) {
$location.path('/');
or $state.go('app.dashboard');
}
}
Related
I have a login page which authenticates the user by sending a token from the backend. But I want to test my login page with protractor without calling backend service with a dummy token. How to do that??
You need to use spyON, here what we do is, we won't make any API calls. Instead we will spy and return a mock data. Example:
spyOn(someObj, 'func').and.returnValue(42);
You can refer below links for more details:
https://jasmine.github.io/api/edge/Spy.html
https://scriptverse.academy/tutorials/jasmine-spyon.html
Hope this will help.
Using Angular 2+ with #azure/msal-angular library.
I have an app with the domain
http://localhost:4200/userId/someOtherId
So it can be any of
http://localhost:4200/2425/2532152
http://localhost:4200/35235/152115
I have a button, Login with Microsoft. On clicking that button, I call the sign in method
import { MsalService } from '#azure/msal-angular';
/// more code
signIn() {
await this.msalService.loginPopup(environment.microsoft.scopes);
//more code
}
(See sign in method here: https://learn.microsoft.com/en-us/graph/tutorials/angular?tutorial-step=3 , I do the same thing)
Now, in the application registration portal, I have
http://localhost:4200 as my redirect URI.
As a result, when I attempt to authenticate, I get the following error:
The reply url specified in the request does not match the reply urls
configured for the application
My question is, how do I solve this problem? Someone said I should be passing in state &state=userId:someotherId, but how do I do that with microsoft's authentication library for angular?
The UserAgentApplication accepts state as a property of the options object in the constructor.
However, when they created MSAL-Service which derives from UserAgentApplication it looks like they didn't expose the state parameter. I would recommend opening an issue on the GitHub repo.
I'm developing an application which I'm writing in Angular 6 framework.
Currently, I would like to add user login by social media like: Facebook, Google, Twitter, Github, LinkedIn.
I have a four buttons for these actions in my SocialLoginComponent's template:
Now I'm trying to implement user login by facebook after clicking on CONNECT WITH FACEBOOK button which has an click angular action:
<button (click) = "loginWithFacebook()" class="social-button" id="facebook-connect"> <span>Connect with Facebook</span></button>
Implementation of function loginWithFacebook looks like:
loginWithFacebook() {
this.auth.loginByFacebook(this.apiKey, this.redirectUri).subscribe({
next: (v) => console.log(v)
});
}
Here auth is of course service injected by constructor:
constructor(private auth: AuthService) {
}
Below I show implementation method loginByFacebook method in my AuthService:
loginByFacebook(appId, redirectUri) {
const facebookParams = new HttpParams()
.set('client_id', appId)
.set('redirect_uri', redirectUri)
.set('response_type', 'token');
return this.http.get(this.facebookUrl, {params : facebookParams});
});
where facebookUrl is the AuthService property:
private facebookUrl = 'https://www.facebook.com/v3.1/dialog/oauth';
I'm setting up here of course parameters based on My Facebook App.
I'm trying to invoke that url by get method in order to obtain a facebook login dialog based on description from tutorial: manualyBuildALoginFlow. I wouldn't like to use JavaScript SDK in my solution.
In current state when I'm clicking on the faecebook button, there is response like below:
I would like to obtain modal dialog with confirmation like below:
In my Get request I add parameter response_type = token in order to obtain Social token. On the below diagram I show what flow I'm trying to achieve:
On above diagram my server is laravel framework which currently handle user login and returns JWT token in order to check that user's logged in to application. Next this token I save in local storage by Angular6 framework.
How could I obtain that redirection with modal window in Angular6? What I'm doing wrong is that redirection dosen't work? What first step should I do in order to implement such authorization using facebook?
I would be greateful for advices.
Best Regards
I'm trying to invoke that url by get method
Which means an AJAX request … and that is of course not possible.
You need to redirect the user to the login dialog URL, not try and request it in the background - for the simple reason, that users need to be able to verify via the browser address bar, that they are indeed entering their login credentials to Facebook, and not some phishing site. If you requested it via AJAX and displayed it “within” your page, that would not be possible.
I've implemented method as misorude suggests in my Auth Service:
loginWithFacebook(appId: number, redirectUri: string) {
window.location.href = `https://www.facebook.com/v3.1/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&display=popup`;
}
Currently the page redirects to my Facebook app. Next I confirm my login by Facebook in dialog window. Then browser redirect back to my Angular app and in my url I have Social token from Facebook like on the picture below:
Next I'd like to obtain this token from url and then to implement the data flow as below:
How should I correctly get an access token and post to my backend Server as on the schema above?
I would be greateful for help
Best regards
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 have created a new REST call, which accepts the username and password and does verify the username and password.
On top of this REST call, I'm building the UI with angular js. REST call will send JSON as when its success:
{ success : { username : 'batman' } }
Now I want angular js to redirect to the home page. How should I do that?
Is REST calls for login is a good design choice?
Thanks in advance.
If you're making a request through ajax to login, I believe your api might need to return a reponse that lets your front end app know to redirect, and then redirect in javascript.
Using angular on success you should be able to change location using $location
you have to send the redirect from the Server....
If you are using NODEjs and passport then theres a built in redirect function :)