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

Facebook auth api callback access token

I am accessing facebook's api via this url as I need to do manual login for the users:
https://www.facebook.com/dialog/oauth?client_id=123456&scope=publish_actions&redirect_uri=http://localhost:4004/auth/callback
I get the popup for authentication without a problem, give fb access and then my callback url is accessed with the url:
http://localhost:4004/?login#_=_
Normally I would expect an access token so I could post on the users behalf.
I'm writing my code in node and using the node npm fb package to help me post

Turns out you also need to tell facebook what you would like returned add this as one of the query parameters:
response_type=token
Then you'll get back the token in the url
complete url
https://www.facebook.com/dialog/oauth?client_id=123456&scope=publish_actions&redirect_uri=http://localhost:4004/auth/callback&response_type=token

Twitter JS API, update status

I'm at a total loss here. I believe I'm right in thinking there is no longer any JS API for twitter which just sucks hugely.
However I realise looking at this I could just use ajax and react to the responses from this:
https://dev.twitter.com/rest/reference/post/statuses/update
OAuth Signature Generator
Example Request POST
https://api.twitter.com/1.1/statuses/update.json?status=Maybe%20he%27ll%20finally%20find%20his%20keys.%20%23peterfalk
However when I post to that url I get the following:
{"errors":[{"code":215,"message":"Bad Authentication data."}]}

Bad Authentication data -> this is very self explanatory: Your Authentication is Bad; in other word, you are not authorized to use that API method.
Since you use POST method, make sure you set your APP access level to Read & Write.
Sign in to apps.twitter.com, and in the Applications Management page for your app, click the Permissions tab. There you can change your access level.
For further reading, please see this answer.

REST calls for login process, how do we handle redirects?

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 :)