Develop Reference

javascript - oAuth: How to redirect user back to application?

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";
},

Manually Login by Facebook in Angular6 and Laravel

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

Ember Simple Auth: how to keep data in a step by step process after redirection to login route

I'm creating an app using Ember.js. This application allows to book an appointment at the doctor.
You have a booking process with a few steps.
After step 1 (booking/start), you have a screen that shows up if the user isn't connected (booking/user). On this page, I have two links: one to the login page, another one to the registration page. All steps "needs" booking controller.
The link to login is basically a link to the next step (booking/confirmation), but since user isn't logged in, he's automatically redirected to login page by AuthenticatedRouteMixin. When I log in, everything works fine, I'm connected and redirected to booking/confirmation.
BUT, I lose all the data from my booking controller. It's obvious, since login doesn't have any connection with my booking controller.
I believe this is not a pure Ember Simple Auth question, but more a general Ember.js question. Do you have any idea about how I should change the login behavior to keep the data or change the logic of the app to save the data before going to the login page, then retrieve it on booking/confirmation?
My code is available here: https://github.com/lionelrudaz/wellnow-frontend
Let me know if you need more information.

I found a workaround. When I enter the process, I create and save a booking object, allowing me to have an id and to save the progress at every steps.
If you need more details, just let me know.

Meteor.user is null after (apparently) successful login

I have a simple Meteor js app that allows you to create a user account and log in, or to log in with your existing Google account via oauth (thanks to the accounts-google package).
When using the app, I enter my username and password, everything works fine. However, when I click "Sign in with Google", the google oauth pop-up asks me to select which google account I want to use for this login. I select the account, the pop up waits a second, closes, and then nothing happens. No pop-ups being blocked, no "failed login" messages. It's as if nothing happened at all.
I'm certain that the user is never being defined when I use oauth login because Meteor.user() gives me null in the JS console.
What could be going on here? Or how would I debug this? Suggestions appreciated.
p.s. If any additional information is needed, I can ammend.

You probably messed up oauth configuration either on the Meteor side or Google Developers Console side, so here is a quick recap.
Google Developers Console :
Under APIs & auth > Credentials, create a new Client ID in the OAuth section.
Choose Web Application and specify both correct redirect URIs and JavaScript origins :
REDIRECT URIS
http://localhost:3000/_oauth/google?close
http://your-production-domain.com/_oauth/google?close
JAVASCRIPT ORIGINS
http://localhost:3000
http://your-production-domain.com
Meteor configuration :
Be sure to add these packages :
meteor add accounts-google
meteor add service-configuration
In server/config.js, add these lines from http://docs.meteor.com/#meteor_loginwithexternalservice
ServiceConfiguration.configurations.remove({
service: "google"
});
ServiceConfiguration.configurations.insert({
service: "google",
clientId: "????????????????.apps.googleusercontent.com",
secret: "????????????????"
});
The clientId and secret fields should be set to those in the Google Developers Console.
Then call Meteor.loginWithGoogle() in the click handler of your login form and it should work as expected.

Creating facebook app with callback url

I am creating a facebook app. And I want to let users to login to my website using it(Using passportjs).
But to do that, I need to give callback url(my website url). But I couldn't find that field in the facebook app creating page.
Am I missing something? I have searched for it for a quite long time.

Writing as of Feb 2, 2014 I found these instructions to be current;
Go to your app
On the left-hand sidebar, click Settings
Under the main section, click Add Platform
Click 'Website'
Specify your callback in the Site URL field (e.g. http://localhost:3000/auth/facebook/callback).

Go to your app.
On the left-hand sidebar, click Settings.
Under the main section, click Add Platform.
Click 'Website'.
Specify your callback in the Site URL field (e.g. http://localhost:3000/auth/facebook/callback).

Call back URL must be provided in the Clint O auth settings in order the facebook to send the user credentials and access Token after user logged into facebook through your app. Facebook's developer website UI was changed again. Now the client OAuth settings block was moved into Facebook Login. To provide the callback URL Now the path is
Your App Dashboard > On the Left-hand sidebar > facebook login > Clint Oauth Settings > Valid OAuth redirect URIs

The "Callback URL" is the URL that will be contacted once the user has accepted or rejected the OAuth request.
This is set as a parameter of your OAuth request. So you set the URL in your own program, not somewhere in Facebook.
In Java/Spring social you would do:
OAuth2Parameters params = new OAuth2Parameters();
params.setRedirectUri("http://yoursite/callback");
Once you set this, it must also match a "Valid OAuth Redirect URL" as sivanagaraju's answer mentions, otherwise Facebook will reject it. In the "Facebook Login" tab under your app, enter all valid callback URL's, such as http://localhost/callback, http://productionUrl/callback, etc.
If you don't see "Facebook Login" tab under your app, click "Add Product-> Facebook Login->Get Started" Enter the Valid Callback Urls -> Save changes.

Go to the Facebook developer page.
In the left hand side bar, under 'Products' you'll either see or need to add the Facebook Login product.
Once you've added it, you can go to Facebook Login settings and add your URL to 'Valid OAuth redirect URIs'