I have registered an angular app with Azure AD for authentication. After auth, Azure redirects back to my app as designated by the "Reply Url" in the Azure config.
Reply Url = http://myapp.com/#/?
The app expects url parameter fragments (such as auth code, token, state, etc) appended to the redirect url, which are checked if user auth succeeded.
Redirect Url = http://myapp.com/#/?code=<some code>&id_token=<id token>&...
This was working before, but as of yesterday the redirect url now looks like this
Redirect Url = http://myapp.com/#code=<some code>&id_token=<id token>&...
No changes were made to the app config in azure management portal.
This new format is breaking angular routing in the app, and the auth parameters are not being captured/parsed. Everything after the "#" in the reply url seems to be ignored.
Any idea as to what causes the redirect url not to use the complete reply url configured in Azure AD?
As I know, Reply Url configured on Azure AD is just to validate the location.origin of the redirected url.
This redirected url can be configured by setting redirectUri option in the adalAuthenticationServiceProvider.init method (as you're making Angular app).
Back to your question, I have same redirect url format #id_token=... without ? character. But all good for me because I can access all necessary values by accessing adalAuthenticationService.userInfo object.
Check out here for more detailed info.
Hope it helps in your case.
What I did was to use HTML5 mode on the Angular side.
You can see how I configured ADAL and routing:
$locationProvider.html5Mode(true).hashPrefix("!");
var endpoints = {
"/api": "https://app-id-uri"
};
adalAuthenticationServiceProvider.init(
{
clientId: "12345678-1234-1234-1234-123456789012",
endpoints: endpoints
},
$httpProvider
);
On server-side it was then important to return the index page no matter what route was hit, since routing is done client-side. Now AAD returns the code in the fragment as usual and all routing works as well.
Related
I'm trying to use EasyAuth (aad) with a SPA, which is on "localhost:8080" at the moment, and an Azure Function which is hosted in Azure ({function-app}.azurewebsites.net. The intent is for the SPA to call a secured endpoint on the Azure Function. So, I have the Azure Function Registered as an application in AD, and the authentication redirect in the SPA to the Azure Function EasyAuth endpoint appears to be working, but the redirect back to the localhost SPA via the post_login_redirect_url is not.
I added http://localhost:8080 to the AAD registered application as an allowed redirect URI. However, if I fully qualify the URL I am redirected back to {function-host}/.auth/login/done. Is there an expectation that the SPA runs under the same hostname as the azure function, or is there a way to configure the setup to allow any URL for the SPA host?
Behavior
In terms of HTTP data during behavior, once login succeeds .auth/login/aad/callback is loaded with the following prior to redirecting to the default done page and stopping.
Response Header
Location = {function-host}/.auth/login/done
Form Data:
state = http://localhost:8080
code = auth code
id_token = auth token
How I called it from the SPA
function processAuthCheck(xmlhttp) {
if (xmlhttp.status == 401) {
url = "https://{function-app}.azurewebsites.net/.auth/login/aad?"
+ "post_login_redirect_url=" + encodeURI("http://localhost:8080");
window.location = url;
} else if (xmlhttp.status != 200) {
alert("There is an error with this service!");
return;
}
var result = JSON.parse(xmlhttp.responseText);
console.log(JSON.stringify(result));
return;
};
Regarding the issue, please refer to the following steps
Register Azure AD application to protect azure function with easy auth
Register client-side application
a. Register single-page application
b. In the Implicit grant and hybrid flows section, select ID tokens and Access tokens.
c. Configure API permissions
Enable CORS in Azure function
Code
a. Integrate Azure AD auth in your spa application with Implicit grant flow. After doing that, when users access your application, they need to enter their AD account to get access token
b. Client exchanges this accessToken for an 'App Service Token'. It does this by making a POST to https://{app}.azurewebsites.net/.auth/login/aad with the content { "access_token" : "{token from Azure AD}" }. This will return back an authenticationToken
c. Use that authenticationToken in a header named x-zumo-auth. Make all requests to your function app using that header.
For more details, please refer to here and here. Regarding how to implement Azure AD in spa, please refer to here.
I am using MSAL.js for a javascript based single page application.
We have configure Azure Ad for implicit authentication.
The redirection url also has been configured to a page.
However we have a requirement where we get a daily email report. This email has links to the application page but with query parameters that allows to filter the report for that day.
Now if we access the app via the landing page, we are able to login fine. But with the query params it gives the exception "The reply URL specified in the request does not match the reply URLs..".
I am using the endpoint V2 on Azure AD , hence not able to put * in the reply url. I guess this is an existing problem. But is there some way to overcome the issue of logging in & redirection with parameters?
Thanks,
Ash
The approach we have taken in general with our apps is to specify a specific URL to MSAL as the redirect URL, and redirect to the "local URL" from there.
So when you send a user to authenticate, you store the current path somewhere like in local/session storage.
Then when the user hits that callback page, you can load up the path from storage and redirect the user there.
This way you can avoid wildcard usage, and still get the user where they wanted to go.
You can tell MSAL not to redirect to the current URL and specify the redirect URL like this:
const app = new UserAgentApplication({
auth: {
// Other settings left out for brevity
navigateToLoginRequestUrl: false,
redirectUri: window.location.origin + '/auth-callback'
}
});
In Case of SPA with login redirect at landing on page with querystring parameter you can use the following configuration to preserve querystring parameter after login (MSAL 2.0)
export const msalConfig = {
auth: {
clientId: "YOUR_CLIENT_ID",
authority: "YOUR_AUTHORITY_URL",
redirectUri: window.location.origin
}
Throwing this error for response success but not able to redirect the page how to login and redirect,how to fix this error :
error.errorCode: invalid_request, error.description: The
'redirect_uri' parameter must be an absolute URI that is whitelisted
in the client app settings.
there couple of places you should check.
1) okta developer dashboard. when we create an application there, the default value of Login redirect URIs is "http://localhost:8080/authorization-code/callback". if your web site's call back url is different from it, you have to update it to here. for example, my call back url is "http://localhost:8001/Home/Authenticate".
2) if you have a config value in your web site. make sure the config value is updated to the same URL, my case is in ASP.NET web.config => appSettings, update the value of "okta:RedirectUri" to "http://localhost:8001/Home/Authenticate"
3) if you are using okta sign-in widget and you want to redirect to your web page, you need to ensure the JavaScript, when you create OktaSignIn object, did you specify redirectUri? if so, make sure you have the right Url there. more details about the widget click here
var signIn = new OktaSignIn({
baseUrl: 'https://dev-*******.okta.com',
clientId: '${clientId}',
redirectUri: '${redirectUri configured in OIDC app}',
authParams: {
issuer: 'default',
responseType: ['id_token','token'],
display: 'page'
}
});
This one place I found useful for the above redirect_uri error:
https://support.okta.com/help/s/article/The-redirect-uri-parameter-must-be-an-absolute-URI?language=en_US
Although it is for login URI, but I assume you are passing the URI at right place, just that it may be relative. Make sure that URI is absolute.
I am trying to integrate my application with AAD authentication but the replyurls which i am configuring in the AAD application is
https://www.example1.com/abc/account/login.aspx
but when i am coming back after authentication i am getting redirected to
https://www.example1.com/
Only and my request is coming as authenticated but i want user to redirect to full url which i have configured.
I have tried sending RedirectUri at the time of app configuration in startup class as same as https://www.example1.com/abc/account/login.aspx that time user is redirect to this url but that time request is not getting authenticated
any one knows how i will achieve this?
thank you in advance.
Reply URL is where the token would send to . It means that it is a endpoint
which signs in users for that provider. But after signing in, the user will be redirect to the Homepage(Sign-on) URL.
For your scenario, you can change the Home page (Sign-on)URL in both AAD Application and your APP config file to the URL which you want to use.
Please refer to this documentation for detailed instructions on how to set up these configurations. Like Wayne said, you need to make sure that the home page URL is matched to whatever site you want the users to be redirected to after login. Then make sure that the reply URL and the RedirectURI are matching.
I want to make an oauth2 login with Twitch on my website and I have an angular2 website and I'm working with router links.
When I want to log me in with twitch acc to say yes it is me and so everything is fine. Ok the end not xD
When i go to the twitch oauth2 for authorizing i need an redirectUri. My problem is now how can i make this in angular2? Because I can't type www.page.com/app/afterlogin/afterlogin.php or somethink like that.
I need this because I need from the user the access token, I dont want that he need to authorize himself x times.
Maybe this helps for helping me:
https://api.twitch.tv/kraken/oauth2/authorize?client_id=[client_id]&redirect_uri=http://www.page.com/app/AfterLogin/afterlogin.php&response_type=code&scope=user_read
I hope someone can help me with redirecting and some oauth2 logins :)
Let me assume a RESTful backend with Single Page Application front and answer the question. The process in general is like the following
Your SPA --> Your Server --> Your Provider --> Your Browser --> Your Provider --> Your Server --> Your SPA
Your SPA => initializes login and passess redirect_uri
Your Server => Stores redirect_uri in a cookie and sends request to
provider
Your Provider => Gets Success and Failure Urls and loads login page
to your browser
Your Browser => Loads the provider login page
Your Provider => Sends request to your server success or failure
handler
Your Server => Extracts the redirect_uri and redirects the browser
to it
Your SPA => Gets afterLoginUrl from redirect_uri and route the
user to it
Below are the steps to achieve this
When your front end sends the authentication request to your server,
append the redirect_uri. In that url, pass a afterLoginUrl query
parameter. That is used by your front end SPA to route the user to
the specific page that triggered the login. (i.e. If the request has
been triggered by a user trying to access
{base_uri}/profile/project/projects for example, it is a good
practice to route the user to this page rather than to the default
page that a normal login takes to like base_uri/profile/about). As
a result you will have a url that looks like the following.
`http://localhost:8080/oauth2/authorize/google?redirect_uri=http://localhost:4200/oauth2/redirect&afterLoginUrl=/profile/project/projects`
port 8080 being for the back end and 4200 for the front end.
Since you are using a RESTful service, you don't have a way by which you can save the redirect_uri on your server (since REST is stateless). Because of this you need to send it with the request you send to the provider as a cookie.
When the success is received from the provider, you will know which route of your SPA to hit by extracting the cookie you sent. Then you dedicate a route to handle your request from your own server (in my case oauth2/redirect) in your front end app.
On the component specified for the route in step 3 you will receive token and afterLoginUrl(if there is). You will have something like the following on the url
http://localhost:4200/oauth2/redirect?afterLoginUrl=/profile/project/projects&token={token value}
Verify your token, check whether or not there is afterLoginUrl and redirect to the route specified by afterLoginUrl if there is one or to the default profile page if there isn't.
I think a wonderful resource can be found here.
Authorization Code Grant flow is just one of several ways of how you can use OAuth2. It's not suited for applications running in a browser, because it requires a client secret which you cannot keep safe in a browser.
There is another flow - Implicit flow which is meant for JavaScript applications - you get an access token and/or ID token in a redirect URI - in the hash part (#...) so they don't get to a server. Then you can easily use any Angular route path as a redirect URI. So the redirect URL from OAuth2 server could look something like this:
http://example.com/myAngularApp/afterLogin#token=...
When you get to that URI, you just save the token and change the route to some real form.