Satellizer and Passport integration - angularjs

I currently have an ExpressJS application with PassportJS up and running. I use Passport to authenticate with GitHub. These are the existing endpoints.
This creates the authorization url and redirect to that url:
app.get('/auth/login', passport.authenticate('github'))
This does all the magic to get the access token, a user object and a json web token:
app.get('/auth/github/callback', passport.authenticate('github'),
function(req, res) {
res.send(createJWT(req.user));
})
As you can see, I only have/need 2 end points. The authentication/api is located at http://localhost:8080/ and the frontend is located at http://localhost:3000/
So my question is: What are the settings for Satellizer to work with these existing endpoints? Should I be using the $authProvider.github() or a custom $authProvider.oauth() provider object?

Satellizer and Passport don't play well with each other. For instance Satellizer uses POST requests throughout, while Passport mostly relies on GET requests.
There is no way to reconfigure Satellizer to use GET requests.

Related

Azure Active Directory - UI > API - 401 Error

Good Day,
Currently I have a single tenent with a React UI and .NET Core Apis secured by Azure Active Directory without any problems.
We have recently moved to a new Azure Tenent, new Active Directory etc. I have create two new App Registrations, one single App Service for UI and one for API. I have linked the App Service to AAD (UI = UI App Registration, API = API App Registration).
The problem is the API is getting a 401 error and I think see that in the original tenent the Bearer token is in a JWT format but in the new instance it's not, I believe it my be a graph api access key.
New Tenent:
Authorization: Bearer PAQABAAAAAAD--DLA3VO7QrddgJg7WevrQvEQVbZEMD8su-tIp9k2bTFUTort7SZgeDI52P6KRYefHgtmj4YrecgUKZJ2wylGuhvIzIz642n7Sg0VMU1RwKtrzWlaMqK62CaSoJcstxiEf6 *****
Orginal Tenent:
Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Im5PbzNaRHJPRFhFSzFqS1doWHNsSFJfS1hFZyIsImtpZCI6Im5PbzNaRHJPRFhFSzFqS1doWHNsSFJfS1hFZyJ9.eyJhdWQiOiI3OThkN2ZkOC0zODk2LTQxOGMtOTQ0Ny0wNGFlNTQ2OGFkNDIiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC83ZDE3NTU3Ni03Y2Y3LTQyMDctOTA5My0wNmNiNmQyZDIwNjAvIiwiaWF0IjoxNjE2NDUyNzExLCJuYmYiOjE2MTY0NTI3MTEsImV4cCI6MTYxNjQ1NjYxMSwiYWNyIjoiMSIsImFpbyI6IkFTUUEyLzhUQUFBQU9mejhPZHp *****
Please someone kindly enought to provide some guidance / input where I am going wrong.
Regards
Paul.
When using Azure AD to obtain an access token, an additional resource parameter is required. Otherwise, the access token is not a JWT.
For example, if your web API's application ID URI is https://contoso.com/api and the scope name is Employees.Read.All, then with oidc-client the client configuration should be :
scope: 'openid profile email Employees.Read.All',
extraQueryParams: {
resource: 'https://contoso.com/api'
}
In App Service auth configuration, you can use additionalLoginParams
"additionalLoginParams": ["response_type=code", "resource=https://contoso.com/api"]
If you did not use a custom application ID URI, it may look like
api://868662dd-3e28-4c7f-b7d5-7ec02ac9c601
Quickstart: Configure an application to expose a web API
Firstly, the scope is incorrect.
You should Expose an API in your API App Registration and then add it as a permission in your UI App Registration. You can refer to this document.
And when you try to call the 'https://login.windows.net/{tenant}/oauth2/authorize endpoint, you need to specify the scope to include api://{app id of the API App Registration}. For example: api://{app id of the API App Registration} openid profile email. Then the access token would be for calling your API.
At last, for CORS issue, please configure the CORS as * in your web app to see if it helps.
Try to follow this step: Configure App Service to return a usable access token
In my experience, this problem occurs, when you try to authorize against version 1 of the endpoint.
Instead of calling
https://login.microsoftonline.com/{tenant}/oauth2/authorize
call
https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize
You might be required to set something like "metadata URL" in you authorization library to:
https://login.microsoftonline.com/{tenant}/oauth2/v2.0/.well-known/openid-configuration
Make sure your builder follows this order...lifted from our API program.cs
These must be in order of
UseRouting -> UseAuthentication -> UseAuthorisation -> MapControllers
> app.UseRouting()
> app.UseAuthentication()
> app.UseAuthorization()
> app.MapControllers()
If app.UseAuthentication and app.UseAuthorization are not in this order in statement position you Will get 401 Unauthorised as at 01/2023 .Net 6 Core.

React protect admin panel using JsonWebToken

I got a single page app written with React and ReactRouter and the frontend seems to be easy going.
But I have no idea how to design a backend which is only accessable by admins. On the server-side I use a NodeJS / Express RESTful API which uses JWT (JsonWebToken) for authentication.
Do you have any ideas?
You can use Express Middleware to check and validate JWT. If the JWT is valid then proceed with the API otherwise redirect to login. There are lots of articles available on ExpressJs site about middleware.
One great option is express-jwt
You import it, make a middleware, and place it before any protected route. If the token is valid, req.user will be set with the JSON object decoded to be used by later middleware for authorization and access control.
const jwt = require("express-jwt");
const auth = jwt({
secret: jwt_secret
});
router.get("/secret/:uid", auth, profileCtrl.secret);

Angular-Express-Google Strategy for Google+ Authentication unable to pass Access Token to Angular

I'm trying to implement google+ authentication using Google Passport Strategy and return the access token to client side(Angular) for subsequent requests. But I keep getting the error at client side. "XMLHttpRequest cannot load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur…=1094664898379-8u0muh9eme8nnvp95dafuc3rvigu4j9u.apps.googleusercontent.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access." that I get while implementing google strategy for authentication in my web app. I use Angular framework at client side and Express on server.
I've also referred to following previous posts for solution but to no avail. The solutions offered are to use a simple href at Client Side, but I dont know how the access token can be passed to client side for making subsequent API requests. Any help will be greatly appreciated.
Angular/Node/Express/Passport - Issues when connecting to facebook(CORS)
Angular/Node/Express/Passport Cross Domain Problems - Enable CORS Passport Facebook Authentication
After a lot of searching which was frustrating, I finally was able to workaround this problem by using google token strategy for authentication. Here I authenticate the user at the client side first and then authenticate the token at the server end. The code snippet below is for fb but same applies for google as well.
app.post('/auth/facebook/accesstoken',
passport.authenticate('facebook-token',{session: false}),
function (req, res) {
// do something with req.user
if(req.user){
console.log('fb user authenticated');
res.send(req.user);
}
else{
console.log('no entry');
res.send(401);
}
}
);

Symfony2 Oauth2 Server with authorization code grant, Symfony2 APIRest and Angular JS client

What I have:
-API Rest in Symfony2 using friendsofsymfony/rest-bundle exposing some resources.
-Oauth2 server in Symfony2 using FOSOAuthServerBundle.
-Client in Angular.js doing requests to the API Rest. This client currently gets to login via the authorization code grant (using Hello.js with a custom module), and gets the access token effectively.
I want these API resources secured, so:
-On API Rest app: I implemented the AuthenticationEntryPointInterface which I set as the entry_point in security.yml, to return 401 code and application/json content-type on rejected.
-Client intercepts 401 responses and sends the user to the login form.
-Client sends api rest requests with X-Access-Token set on header.
My current issues:
1) I'm not sure whether I should be setting X-Access-Token on client for requests, I understand this is the right way? Or should I leave it all to hello.js api methods?
2) I have no idea how to make the API Rest app "ask" the oauth server "is this token ok? who does it belong to?" Is this already solved in Symfony?
Thanks a lot for any answer or guideline. Feel free to require any further information or code for what I describe.
For anyone else facing a similar issue:
1) As for the client authenticated requests after login, I let hello.js hello(provider).api methods solve it. It sends access_token as a param. I didn't have to set X-Access-Token on the header or any other "hand made" touch.
2) I didn't find an out of the box solution by symfony for this. But this is what I did:
-Configured a before filter for the protected controller (see doc)
-In that method, I made a call to the API held on the OAuthServer (using this bundle)

Error: redirect_uri_mismatch with a google app using the Big Query API?

Hi so I have been trying to make an app that uses a Biq Query API.
All the authentication and client secrets for OAuth2 work fine when I load the app locally, however after deploying the code I get the following error:
Error: redirect_uri_mismatch
Request Details
scope=https://www.googleapis.com/auth/bigquery
response_type=code
redirect_uri=https://terradata-test.appspot.com/oauth2callback
access_type=offline
state=https://terradata-test.appspot.com/
display=page
client_id=660103924069.apps.googleusercontent.com
But looking at my API Console, I find that the redirect uri https://terradata-test.appspot.com/oauth2callback is in my list or redirect uri's:
Redirect URIs:
1.https://terradata-test.appspot.com/oauth2callback
2.http://terradata-test.appspot.com/oauth2callback
3.http://1.terradata-test.appspot.com/oauth2callback
4.https://code.google.com/oauthplayground
I'm not sure what I'm missing to fix this problem? Why is there a redirect error with a uri that is listed in the API console?
The app builds the OAuth2 decorator to pass through to the Biq Query API like this:
CLIENT_SECRETS = os.path.join(os.path.dirname(__file__),
'client_secrets.json')
decorator = oauth2decorator_from_clientsecrets(
CLIENT_SECRETS,
'https://www.googleapis.com/auth/bigquery')
http = httplib2.Http(memcache)
bq = bqclient.BigQueryClient(http, decorator)
Is there any more code I should put to clarify the situation? Any input would be greatly appreciated. Thanks so much!
Shan
In standard web server OAuth 2.0 flows (authorization code), there are 3 places the redirect_uri is used. It must be identical in all three places:
In the URL you redirect the user to for them to approve access and
get an authorization code.
In the APIs console
In the
server-to-server HTTPS post when exchanging an authorization code
for an access token (+ maybe a refresh token)
You haver to create an API credentials with next steps on
https://console.cloud.google.com/apis/credentials
Client Oauth Id
Web Type
JavaScript authorized -> https://yourapp.appspot.com
URIs authorized -> https://yourapp.appspot.com/oauth2callback
This is the credentials you have to use in local app before deploy

Resources