Get user Access Token from Twitter in Angular 2+ app - javascript

Hi I want to get a twitter user access token/refresh token so that My application can post/read tweets on behalf of the user..
I have a button in my app.. on clicking of the button, I need to show something like below image -
user should be able to provide his/her credential and if it is already logged in to twitter then he/she should only see authorize app button..
I created a new app in my developer twitter account.. but little clueless on how to get user's access token to post/read behalf of him...

Twitter uses OAuth1.0a unlike Facebook which uses OAuth2.0. The difference between OAuth1.0a and OAuth2.0 is that OAuth1.0a is more secure and you should use a server-based authentication flow because it involves api keys and secrets which we shouldn't be sharing with angular app.
On server side (NodeJS/Django, etc) you should use a client library for OAuth1.0 which will help you in complicated process of signing requests befores sending it to twitter.
Here is a useful link (which I also used) for you to implement the server flow:
https://github.com/requests/requests-oauthlib/blob/master/docs/oauth1_workflow.rst
Basically, the OAuth flow for twitter is as follows:
Send a POST request to oauth / request_token
You will get the authroization url from Step 1 like this https://api.twitter.com/oauth/authorize?oauth_token=XXX which you will redirect the user to so that they can authorize your app
Twitter redirects the user to your redirect url (which you sent with the request in previous step) with access_token and verifier.
You need to exchange the access_token and verifier for the actual usable user access token by sending a POST to oauth/access_token.
You can find more details for 3-legged OAuth flow here: https://developer.twitter.com/en/docs/basics/authentication/overview/3-legged-oauth

Related

How to share auth0 authentication information between 2 different APIs?

Pretty much new on APIs and microservice world.
i am using auth0 for authentication.
I have a convert express API POST endpoint which will only work if the user is authenticated, however for frontend -> ( home page, login button, login from auth0 callback, redirection) I using different api Homepage express api.
After user logs in from homepage api, from his profile dashboard user tries to send a post request to convert API endpoint this doesn't work and throws an error check.state argument is missing.
How do I make sure if one API authenticates that authentication information should be shared with another API endpoint which needs authentication?
app.use(‘/authUrls’,requiresAuth(),authUrlsRouter) //convert api post request
This may be an assumption, but it appears that you are creating a regular web application with Node.js, and what you want is authentication per session, not per API endpoint. This quickstart from Auth0 walks through it nicely. It uses Passport.js and express-session to provide middleware.
As per the tutorial:
In a typical web application, the credentials used to authenticate a user are only transmitted during the login request. If authentication succeeds, a session is established and maintained via a cookie set in the user's browser. Each subsequent request does not contain credentials, but rather the unique cookie that identifies the session.
How it works: when the login api is called and completed successfully, the user's authentication is stored in that session. Whenever other API's are called that require an authenticated user, you can just include the middleware (in the quickstart it is called 'secured'): it will query that respective session's data and allow / disallow based on the user's authentication status.
For example, the convert endpoint:
router.post('/convert', secured(), this.convertfunction);
And a non-auth endpoint:
router.get('/other', this.otherfunction);
The full tutorial has much more information available. But this illustrates how middleware will solve your problem.

Youtube analytics example: Keep google account signed in

I'm working with this Oauth2 example from Youtube API's documentation: https://developers.google.com/youtube/v3/code_samples/javascript?hl=es-419
The problem is: every time I execute a request it asks me for sign in with a google account.
The question is: how can I keep the user signed in? With long access token or something like that.
I'm working with a laravel app.
Thanks in advance.
You need to implement OAuth 2.0 Authorization.
The YouTube Data API supports the OAuth 2.0 protocol for
authorizing access to private user data. The list below explains some
core OAuth 2.0 concepts:
Here are some important points from YouTube API.
When a user first attempts to use functionality in your application that requires the user to be logged in to a Google Account or YouTube
account, your application initiates the OAuth 2.0 authorization
process.
Your application directs the user to Google's authorization server. The link to that page specifies the scope of access that your
application is requesting for the user's account. The scope specifies
the resources that your application can retrieve, insert, update, or
delete when acting as the authenticated user.
If the user consents to authorize your application to access those resources, Google returns a token to your application. Depending on
your application's type, it either validates the token or exchanges it
for a different type of token.
For example, a server-side web application exchanges the returned
token for an access token and a refresh token. The access token lets
the application authorize requests on the user's behalf, and the
refresh token lets the application retrieve a new access token when
the original access token expires.
Note: Important: You need to obtain authorization credentials in the Google Developers Console to be able to use OAuth 2.0
authorization.
Follow the steps in this documentation to obtain authorization credentials.
Your application must have authorization credentials to be able to use
the YouTube Data API. This document describes the different types of
authorization credentials that the Google Developers Console
supports. It also explains how to find or create authorization
credentials for your project.

OAuth 2.0 token handling. Is there a Server token and client token?

I have a problem understanding the principle handling of oauth 2.0 tokens.
My scenario is, I have a web based frontend backend system with node.js and angular 2.
A user should be able upload a video on this site. Then some additional metadata is created (dosen't matter for this question). When that is done, the user could upload the video to youtube with the additional data by clicking on a button.
My question is how many tokens/credentials are there in this process. The youtube api needs an oauth token. Does the user also have its own token?
Here is the tutorial I used:
https://ionicabizau.net/blog/14-uploading-videos-to-youtube-using-nodejs
As you can see one token for the API is created for local testing. But is this token generated in a different way in a live version? And how is the user of my website recognized. Also via this token? Or do I have to generate a second token for him?
I am not sure what you mean by 'Token'.
In order to access any Google API you will first need to register your application on Google Developer console. You will then need to create Oauth2 credentials. Oauth2 credentials is were your application will request access from a user to access the data on their YouTube account.
On Google Developer console you will need to save the Client id, client secret and the redirect uri. All three will be needed by your code to authenticate the user.
When the user grants your application access to their YouTube data. You will get an access token and a refresh token back from the authentication server. Access tokens are short lived about an hour and are used to make requests (like upload) to the API. A refresh token can be used to request a new access token once the one you have currently has expired.
You will probably end up with the following:
client id, client secrete, redirect uri, and a refresh token.
If you are interested I have a tutorial that is part of my Google Development for beginners tutorial series that explains Oauth2 and how it works.
An access token is generated from the Server side and sent back to client from where the access request is generated. For all the subsequent requests you need to pass the access token which will be verified with the signature of the token saved on the server to check the authentication of valid requests. You will only get 1 access token which will be used.
You can also use "Refresh" tokens in case you need to keep your access tokens valid for longer duration.

OAuth 2.0 Implicit Grant Type with AngularJS frontend

I'm currently building a frontend client for my own Apigility API.
The API uses OAuth 2.0 Authentication which is working fine.
I want to create an AngularJS Landingpage to let the users authenticate by entering their credentials. Because the Client is created with JavaScript,
I shouldn't save the client_secret in the Client, correct?
I have read a lot of posts, but still haven't the right solution.
Is it correct to use the implicit grant type for this scenario?
This procedure is working, I'm being redirected to the authentication server,
after the client authorization and entering credentials, I get back to the client (authenticated).
But I don't want to get redirected to another authentication page.
Is it also possible to authenticate directly and secure on the angularJS frontend?
Thanks,
Simon
You should take a look at this post i made:
https://stackoverflow.com/a/42443878/2963703
It details how to do this using the Spotify API. Your page won't get redirected, instead a popup window will open in which the user authorizes themselves. Once they're authorized the window will close itself and in your main page you will have the access token you need.

Facebook API in Single Page App handling of tokens and security

Goal: A single page application that uses Facebook authentication to login, but does nothing with Facebook after that.
Tech: Facebook Javascript SDK, AngularJS, angular-ui, .Net Web Api
I'm creating a Single Page Application (SPA) in Javascript using AngularJS. I'm using the Facebook SDK which is working to authenticate the user; it returns me a facebook user id, an access token, token expiry time, a signed request, and some other stuff, all on the client side. I then pass this information to my service, mostly because I feel I should. After this I don't really care about Facebook. But I want to make calls to the server to load the user's data.
I could just make all requests using the facebook user id, but there would be no security because any client could just call that endpoint and pass any user id until they found a valid one.
I could use the access token on each request as well, but I still think this is a security failure; when the user first logs in and I pass it to the server, well that endpoint could also be called by any client... "LoginServer('myfakeaccesstoken', $knownUserId)
I get the feeling that I should validate the token on the server side back with facebook, and then I can safely rely on teh token on future API calls, but I'm wondering if there are any other approaches?
The Facebook documentation seems to focus too much on me wanting to make follow up calls to their graph API when I really don't care after my user is authenticated.

Categories

Resources