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
Related
I am new to javascript. I'm creating a login webpage with auth0, if the user enters the correct id/password the auth0 login API will redirect them back to the application, they are calling from based on their redirect URL.
I want to add a feature where if they don't accept terms and conditions, they would be redirected back to the application they are calling from via redirect URL.
Is it possible? I tried to search online but could not find any proper documentation. can anyone please advise?
shouldn't there be any param in the URL when they get directed to your application? i think there should be a param in the URL that you can use to redirect them back.
I found the solution, I had to user callback URLs with the error message.
Solution for this in Vue.js
<a v-on:click="f1()">..</a>
f1: function() {
window.location.href = "myapp://callback?error=MyCustoomrErrorMessage";
},
I'm tryng to authenticate my angular app with Windows auth. I make a call to an authorized api and wait for result to check if user is a windows user.
If user is authorized everything is ok, api return 200 status code.
If user is unauthorized a browser default login popup be shown. I want to intercept 401 response and show a custom error dialog, not the browser popup
There is a way to prevent login popup to be shown?
Thanks.
Here an example of my request:
var ret = this.http.get(this.baseUrl + this._hello, {headers: {'X-Requested-With':'XMLHttpRequest'}, withCredentials:true})
.map(this.extractDataa)
.catch(this.handleError);
If you have an authenticated (any variable name will work) variable in the .ts file of the component that contains the log-in pop-up, you can use that variable in the .html of the component.
<ng-container *ngIf="!authenticated">
<app-login>/* log-in component */<app-login>
<ng-container>
This will only render the content in the ng-container if authenticated is false
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 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 am using the '/me/albums' for my website app in JavaScript. It returns the correct array when I use the app but not for other users.
Also, I have put the { scope: 'user_photos' } in FB.login(), but it doesn't ask the user for Photos permission when they log in.
For getting access_token, I'm using this:
accessToken = response.authResponse.accessToken;
Most permissions need to get reviewed before the can be used by everyone. Without review, they only work for users with a role in the App.
There should actually be a warning text whenever you try to login as an App Admin or Developer.
Official docs: https://developers.facebook.com/docs/facebook-login/review