Login using Azure from a Capacitor built app opens a new login window outside the app - reactjs

I am using capacitor 3.0 to build a native iOS app with React.
The app's user is expected to login first.
I want the user's login to be handled by Microsoft Azure ActiveDirectory B2C and followed this tutorial to set this up:
https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react
Furthermore, Microsoft offers a Microsoft Authentication Library (MSAL, https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md), which for a login redirects to a screen managed by microsoftonline.com to take the username and password. This is a standard login interface by Microsoft, which can be custom-branded but I have not made that change. Just using the standard MS UI.
This redirect works fine in a Web/desktop browser as it opens the Microsoft login screen within the same page without opening a new browser window.
However, when accessing the login from within the Capacitor built iOS app, the user is taken to an external browser for the login, which breaks the user experience.
Any ideas on why capacitor launches a browser for login when this is not the case with the regular React web browser (non-Capacitor)?

Related

Recaptcha is not valid in Microsoft Teams tab app

I have a tab app which uses a popup window (microsoftTeams.tasks.startTask) to login the user. This popup window contains an iframe to my actual website login. This login flow completely works in the web version of Microsoft Teams (it saves the cookie and logs in the user), but it doesn't in the desktop app. The iframe in the Teams popup window gives me this error: {"error":"recaptcha_not_valid"}.
What can be the problem?

login.microsoftonline.com doesn't redirect to the specified Redirect URL

We are having problem with ADAL redirect authentication in MS Team Desktop client recently.
We have a custom Teams app package (Team Tab) to display a page on our application server. The page uses ADAL JS library to get Graph token to access One Drive. Since the page is displayed in iframe and will be used in Teams desktop client, we use page redirect authentication in ADAL. From debug console, we can see the issue happened when ADAL sent request to “login.microsoftonline.com”(login_hint parameter is used to specify current user account). The flow stopped with error saying the “login.microsoftonline.com” can’t be displayed in iframe. In the past, “login.microsoftonline.com” simply redirected the browser to the specified redirect URL and auth flow completed without any problem.
Our application server has implemented SSO with Azure. Implicit auth flow is used to get the token. The issue only happens in Teams desktop client, we use ADAL popup (not supported in desktop client) to get token in browser. The flow was working before April. Seems to me that something has changed recently at the Microsoft login page.
Just wondering if anybody has the same issue. Any suggestions will be appreciated.
Have you looked at using Teams SSO, which uses MSAL, instead of ADAL? See here for a sample: https://github.com/pnp/teams-dev-samples/tree/master/samples/tab-sso

Microsoft edge is not prompting for user authentication

I have an angular js application, which is working perfectly fine in IE/Chrome. But i see that in Microsoft Edge browser it is opening the web portal, but on clicking other pages which requires windows authentication, it is not showing the credential window pop-up. "HTTP401: DENIED - The requested resource requires user authentication." Console error is displayed. Whereas this is working as expected in other browsers like IE/Chrome. web.config file is used for enabling user authentication for few pages in a web portal application. Does anyone know why Edge is behaving different?

sharing session between Chrome plugin and web app keycloak

I am trying to create a web application and a chrome plugin. (chrome plugin is going to be a subset of my application). I am trying to give the SSO using Keycloak. The problem is, When i do the login in Webapplication and open the chrome plugin, chrome plugin again asks me to login.
I am using the following code in my plugin (both web application and Chrome plugin written in Angular js)
ref article i used for doing SSO in Plugin : https://medium.com/tech-buddy/oauth-2-0-single-sign-on-authentication-in-chrome-extension-8f3f3ffd89c7
Question i have is, Both my plugin and web app uses the same clientid for authentication,
Is it possible to do SSO between web app and chrome plugin ?
If a user login to the Webapp and click the Chrome plugin it should not again ask the user to login for accessing the plugin ? meaning if a user login to any one of the application and opens a other one it should not ask for the login.

OAuth2/OpenID authentication login redirect not displaying in phone Office Web app or IOS Office Web app

I'm currently try to develop an Office web addin, integrated in the Outlook (Read and Compose).
Everything works fine, except the authentication process.
Indeed, We have to authenticate the user from within Azure AD to access another application (our own application using the Azure AD Architecture where we need to call some web apis)
The solution I used is issued from this great article from Richard diZerega :
Connecting to SharePoint from Azure web app
This solution (we opt for the last scenario) works fine in our Desktop and Web based solution.
But it clearely doesn't work in phone web app , IOS app.
The problem comes from the popup Windows allowing the user to log in.
Actually, window.open, window.location.replace etc ... don't work "as expected" in our Outlook frame.
Everytime it open a popup window. (This is a good solution when the user use the desktop or web Outlook application)
I remember read somewhere that the Office Window where the plugin is loaded, is a secured Window where we can't do any sort of redirection.
I tried to work with ADAL.js, enabling the implicit flow of course, but the problem is the same. We need to redirect the frame to the Azure AD login page.
Finally, the question is : How to deal with an OAuth2/OpenID authentication in an Outlook web addin, and when we want it to work with all kind of devices ?
Login in Adal.Js is a page redirect by default. You don't have pop up issue. Adal.Js gets idtoken initially to be used for your own back end. It also does iframe requests to get access tokens for API endpoints. Office365 APIs support CORS api requests and you can use adal.js to send requests. Tokens will be attached to the requests if you define the endpoints in the config.
You can read about examples here: https://blogs.office.com/2015/03/06/increasing-opportunities-javascript-developers-office-365-platform/
or here : http://www.andrewconnell.com/blog/adal-js-cors-with-o365-apis-files-sharepoint

Resources