Microsoft-authentication-library-for-js: Documentation request: loginRedirect Example

[ahcurrier]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Other... Please describe:

Could you please provide a functioning example using loginRedirect? It seems that all the code sample use loginPopup.

I've tried many things, searched many forums, and simply cannot get a reliable implementation of this. Any help would be appreciated.

[navyasric]

@ahcurrier You can find an example of the loginRedirect usage in this quick start sample here: https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/blob/quickstart/JavaScriptSPA/index.html#L127

The key difference when using the redirect flows is to set a tokenReceivedCallback function during MSAL initialization. You can find this in the above sample here: https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/blob/quickstart/JavaScriptSPA/index.html#L98

[ahcurrier]

Thanks! But if loginRedirect navigates away from the SPA, how/when is the tokenReceivedCallback called? I think I tried to apply this example to my Vue app, and it didn’t work. I was returned from login, but unable to get/use id token or access token.

–A

On Nov 1, 2018, at 4:13 PM, Navya Canumalla [e-mail] wrote:

@ahcurrier You can find an example of the loginRedirect usage in this quick start sample here: https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/blob/quickstart/JavaScriptSPA/index.html#L127

The key difference when using the redirect flows is to set a tokenReceivedCallback function during MSAL initialization. You can find this in the above sample here: https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/blob/quickstart/JavaScriptSPA/index.html#L98

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[navyasric]

@ahcurrier The loginRedirect navigates away from the SPA, but the MSAL is configured with a RedirectUri (this is the apps index page by default). This allows the Azure AD service to redirect back to the app after login is complete. The tokenReceivedCallback is invoked then.
Please give the above quickstart sample a try. The sample has condition to use the loginRedirect flows only for certain browser but you can remove the browser check and replace the popup flow with redirect flows.

[ahcurrier]

Thanks! I’ll give it another try. (I recall from my first attempt that the tokenReceivedCallback was not called upon redirect back to the SPA?)

–A

On Nov 1, 2018, at 4:35 PM, Navya Canumalla [e-mail] wrote:

@ahcurrier The loginRedirect navigates away from the SPA, but the MSAL is configured with a RedirectUri (this is the apps index page by default). This allows the Azure AD service to redirect back to the app after login is complete. The tokenReceivedCallback is invoked then.
Please give the above quickstart sample a try. The sample has condition to use the loginRedirect flows only for certain browser but you can remove the browser check and replace the popup flow with redirect flows.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ahcurrier]

One more thing - even though loginRedirectCallback is not invoked upon return to the SPA, if I subsequently force the page to reload with window.location.reload(), it works. But this is seems like a hack.

On Nov 1, 2018, at 4:35 PM, Navya Canumalla [e-mail] wrote:

@ahcurrier https://github.com/ahcurrier The loginRedirect navigates away from the SPA, but the MSAL is configured with a RedirectUri https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#configuration-options (this is the apps index page by default). This allows the Azure AD service to redirect back to the app after login is complete. The tokenReceivedCallback is invoked then.
Please give the above quickstart sample a try. The sample has condition to use the loginRedirect flows only for certain browser but you can remove the browser check and replace the popup flow with redirect flows.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/473#issuecomment-435177892, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmSZi4f5SOuWWiipWT5-mbmfHvSZpzMks5uq1r6gaJpZM4YFlwO.

[kwaazaar]

When using the latest version of msal.js (0.2.3?), I get this error:
Refused to display 'https://accounts.google.com/o/oauth2/auth?client_id=561846577326-apv8gkn3oers4gi49uerjgdu9d2o62j0.apps.googleusercontent.com&redirect_uri=https%3a%2f%2flogin.microsoftonline.com%2fte%2ffabrikamb2c.onmicrosoft.com%2foauth2%2fauthresp&response_type=code&scope=email+profile&state=StateProperties%3deyJTSUQiOiJ4LW1zLWNwaW0tcmM6Mzc2ZGQ1ODYtZWYzYi00NzUwLThmZGYtZmEwOWY4MmUzMWJmIiwiVElEIjoiYzVjMTM3NGUtMDY5ZC00M2Y2LTg2NGUtMjQ3Yzc4MGRiOTEwIn0' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Login does work with a 'regular' AzureAD account. So this is probably an issue with Google. Since I'm using the loginRedirect, why not get both the idToken AND the accesstoken (without using any iframe tricks) and only then redirect back to my app?

Additional: loginPopup works partially with this same Google account, however it requires me to log in twice, since the first attempt fails as well.

[navyasric]

@kwaazaar The MSAL library provides separate APIs for login and for getting tokens since there are cases where apps want to login and only get idToken. Secondly, we need to establish an authenticated user context before we provide access tokens for APIs.

[navyasric]

Closing this issue as the above comment is a separate question.