Spring Boot with Oauth2 - angularjs

I developed a Google OAuth2 Login in Spring Boot and its working fine. I want to redirect to some specific URL after a button has been clicked. I am using an application.yml with Google Oauth2.
I want to redirect to a specific URL after my authentification.
Here is the code I use for Google OAuth2:
Application.yml
security:
oauth2:
client:
clientId: <Google Client Id>
clientSecret: <Google Secret Id>
accessTokenUri: https://accounts.google.com/o/oauth2/token
userAuthorizationUri: https://accounts.google.com/o/oauth2/v2/auth
clientAuthenticationScheme: form
scope:
- openid
- email
- profile
resource:
userInfoUri: https://www.googleapis.com/oauth2/v3/userinfo
preferTokenInfo: true

In the authorize request towards Google, you should add the redirect_uri parameter
security:
oauth2:
client:
clientId: <Google Client Id>
clientSecret: <Google Secret Id>
redirectUri: https://YOUR_REDIRECT_URL // *** here ***
accessTokenUri: https://accounts.google.com/o/oauth2/token
userAuthorizationUri: https://accounts.google.com/o/oauth2/v2/auth
clientAuthenticationScheme: form
scope:
- openid
- email
- profile
resource:
userInfoUri: https://www.googleapis.com/oauth2/v3/userinfo
preferTokenInfo: true

Related

How to use Amplify for implicit federated oauth w/ cognito *without* hosted UI

(Due to the confusion with what is amplify I'm borrowing the below from another post)
I want to use the feature federation of a user pool NOT an identity pool
I do NOT
want to use this feature with the hosted UI.
I do NOT want to use
this feature with identity pool.
I do NOT want to use this with
the amplify CLI or amplify aws service
I am using aws-amplify https://www.npmjs.com/package/aws-amplify and the UI elements from #aws-amplify/ui-react and #aws-amplify/ui-components.
I am using v1.2.26 of the #aws-amplify/ui-react
The webapp is a react app that runs on our own backend in elastic beanstalk.
We have a web application that uses cognito user pools and user/password to authenticate into our application and we would like to add the ability to use SSO starting off with Google and eventually implementing other SAML idp's.
Our ideal flow is for a user to click "Sign in with google" on our page and be immediately taken to a google login screen that once authenticated brings them into the application with a refresh token so that their user session can be persisted.
Currently getting the error No Cognito Federated Identity pool provided
Is there a way to do this or should we implement the auth flow manually? Amplify seems to be a mess unless you use it exactly as they want with the hosted UI and underlying amplify service.
// Amplify Configuration
import { Amplify } from 'aws-amplify';
useEffect(() => {
//Helpful for debugging
Hub.listen(/.*/, info => console.debug(info));
}, []);
Amplify.configure({
Auth: {
region: pool.region,
userPoolId: pool.id,
userPoolWebClientId: pool.client,
storage: window.sessionStorage,
mandatorySignIn: false,
},
oauth: {
domain: `myCognitoUserPoolTest.${pool.region}.amazoncognito.com`,
//We don't have a sign-in or sign-out URL because its handled by Cognito right now
redirectSignIn: 'http://localhost:3000',
redirectSignOut: 'http://localhost:3000',
// This is the default don't need it explicitly set
// Setting this to "token" only returns a short-lived access token not a refresh token
// responseType: 'code',
},
});
return (<AmplifyAuthenticator
federated={{
googleClientId:'myGoogleClientID',
//Put this in here to just to see
oauthConfig: {
domain: '-domain-.auth.-region-.amazoncognito.com',
//We don't have a sign-in or sign-out URL because its handled by Cognito right now
redirectSignIn: 'http://localhost:3000',
redirectSignOut: 'http://localhost:3000',
scope: ['email', 'profile', 'openid'],
},
}}
>
<AmplifyGoogleButton
slot="federated-buttons"
clientId="myGoogleClientID"
//Tried calling this explicitly, same result.
onClick={() =>
Auth.federatedSignIn({
provider: CognitoHostedUIIdentityProvider.Google,
}).then(res => alert(res))
}
/>
</AmplifyAuthenticator>);

Adal-angular app token with secret

I have an app that gets bearer token from Azure ad with adal-angular.
I can ask questions to graph-api to get the data i want with that token.
But now i want to change that data. For that i need an app token from azure AD.
Graph api resource is https://developer.microsoft.com/en-us/graph/docs/api-reference/beta/api/educationschool_update
My app is an React app that uses adal-angular.
My app have an secret to do this.
My question(s) is, can Adal -angular get me this app-token? And if its possible, how can it do that?
below is my config for adal angular. client_secret is what im trying to get to work..
window.authContext = new AuthContext({
tenant: 'xxxxx',
clientId: 'xxxx',
redirectUri: "http://localhost:3000/",
client_secret : 'APP SECRET HERE!?!?!?!?!?!?',
cacheLocation: 'localStorage'
});
this is my method to get token for the logged in person.
aquireToken() {
let header = null;
window.authContext.acquireToken('https://graph.microsoft.com', (error, token) => {
header = {
headers: {
Authorization: 'Bearer ' + token
}
}
});
return header;
}
I think it is not possible from the web client (UI loaded in the browser) because according to Azure AD CORS policy only Authorize endpoint is open to the web clients and you can't send client_secret to the Authorize endpoint. There is no such parameter according to the documentation: https://learn.microsoft.com/en-us/azure/active-directory/develop/v1-protocols-oauth-code
I hope it helps even it came 6 months after asking :)

Auth0 Custom Social Connections Extension not work with Twitch?

Now, I am creating Twitch Apps with React-Redux.
I just have a authentication problem with Auth0.
import auth0 from 'auth0-js';
export default class Auth {
constructor() {
this.popupTwitch = this.popupTwitch.bind(this)
}
auth0 = new auth0.WebAuth({
domain: 'XXX.auth0.com',
clientID: XXX,
redirectUri: 'http://localhost:3000/callback',
audience: 'https://XXX.auth0.com/userinfo',
responseType: 'token id_token',
scope: 'openid'
});
popupTwitch() {
this.auth0.popup.authorize({
connection: 'twitch'
})
}
}
When I run this code, auth0 returns following error.
http://localhost:3000/?error=redirect_mismatch&error_description=Parameter+redirect_uri+does+not+match+registered+URI&state=XXX
My settings screenshots are below.
Twitch Developer Dashboard Apps
Auth0 Custom Social Connection
Thanks for your helping in advance.
Hi you'll need to set the twitch callback to redirect to auth0, not localhost.
The domain needed can be found in the settings for your auth0 client: https://manage.auth0.com/#/clients
Hope that helps :)

redirect_uri is not supported: facebook authentication for ionic and satellizer

I am using the satellizer library for facebook authentication in my ionic app.
During development (which is done in the browser).. the satellizer fb object is configured as:
$authProvider.facebook({
clientId: AppConstants.facebook.clientId,
scope: 'user_friends',
url: 'http://localhost:3000/auth/facebook'
});
This works fine. However the minute I run the app in the emulator I receive the following error:
The redirect_uri is not supported
How does one work around this ?
The problem is that when you use the emulator (or phone) the default redirectUri becomes file:/// which isn't allowed by Facebook. Change it to something like http://localhost/ instead and add it also to allowed redirect uri in Facebook dev console.
Default config:
redirectUri: window.location.origin + '/'
Change to:
redirectUri: 'http://localhost/'
So your setup will look like:
$authProvider.facebook({
clientId: AppConstants.facebook.clientId,
scope: 'user_friends',
url: 'http://localhost:3000/auth/facebook',
redirectUri: 'http://localhost/'
});

login with Oauth2 provider in twitter with satellizer

I would like to build a login with satellizer for Twitter.
But I can't figure out how it is possible with the use of
Oauth2.0.
Here's my function:
$authProvider.twitter({
authorizationEndpoint: 'https://api.twitter.com/oauth/authorize',
redirectUri: window.location.origin || window.location.protocol + '//' + window.location.host,
scope: [],
scopeDelimiter: ' ',
type: '2.0',
clientId: '[myClientID]'
});
I think you are missing a key here
url: 'URL TO BACKEND SERVICE',
https://twittercommunity.com/t/getting-started-with-oauth-2-0/2338
According to this post, twitter supports Oauth 2.0 for application-only authentications. User-based authentications must use Oauth 1.0 flow.
I also use Satellizer. It is pretty up to date and has a good twitter OAuth 1.0 implementation.

Resources