How to show the profile image/photo of a user in Teams tab? - azure-active-directory

Problem
In our Teams app tab we want to show the profile image/photo of the current user.
Things we tried
The user is authenticated with Single Sign-on for tabs and we store some user information to track some progress in our app. It is not possible to fetch the profile image from the Microsoft Graph API with the token from the Single Sign-On process — the User.Read permission is missing.
The user profile image does not seem to be available in the Teams context from the Microsoft Teams Javascript SDK.
In SharePoint it is possible to show the profile image of the current user with a special URL: https://<tenant>.sharepoint.com/_layouts/15/userphoto.aspx?size=L&accountname=<upn>. This fails in Teams with an "no access" redirect if the user has not logged in into SharePoint.
Seemingly possible solutions
Extra authentication step to get the User.Read permission; not ideal, nobody is gonna press a extra button just so we can show a profile image.
Convince the Single Sign-on for tabs process to include User.Read; Adding the permission in all kinds of configuration did not change anything in the resulting token.
Use a custom OAuth2 flow, according to this blog post it is possible to setup in the Single Sign-On for bots process. The Teams SDK does not seem to have the same possiblility.
Somehow make sure a user is authenticated in SharePoint so we can use the magic profile image URL; does not seem very likely.
Is there a solution workaround and/or something that we did not try yet for this problem?

You won't be able to modify what the standard SSO does, unfortunately.
The easiest way to deal with this is to use the Microsoft Graph Toolkit, specifically the Person component. It's exactly built for this kind of scenario, and you have the user's AadObjectId from the Teams context.
It does require an Azure Application, but I think you can use the same app. It -will- prompt the user, by default, with a consent popup, but you can get around this, as always, with an admin consenting on behalf of the user.

Related

Automatically deploy an Enterprise Application on AzureAD

I have a React Application that uses Microsoft AD to authenticate users.
As a first step, and according to Microsoft Documentation, we need to register the application with the Microsoft identity platform.
This is inline with Microsoft Identity Platform Documentation, in this diagram we can see that for ALL types of applications (SPA, Web App, etc), we always need to configure an application in AzureAD:
This process is "cumbersome", and i'm trying to remove it by having the application installed automatically.
Several third-parties do this, such as Zapier, SpecFlow, etc.
Basically, they have a process where:
User logs in on Zapier
User is redirected to Azure AD sign-in page
User is authenticated and authorized
AzureAD shows the Consent Page
User consents
Application is installed on user's AzureAD
I've been reading and searching in Microsoft's Documentation, and i cannot find a single document that shows or even mentions this type of flow.
BUT, i know that this is possible, as there are several third parties that are doing exactly this, as Zapier, for example.
Can anyone point me in the right direction, there must exist some Microsoft document that explains how this process is done!
Apologies if this should be a comment, not an answer. I do not have enough SO reputation to write comments.
Zapier is published to the Azure Active Directory application gallery (1c76d9b0-0826-4b19-8706-29572657af1e). You can do this as well:
https://learn.microsoft.com/en-us/azure/active-directory/manage-apps/v2-howto-app-gallery-listing
If an application already exists in the gallery, it does not need to be "registered" in the user's tenant, as the registration definition is defined in the gallery.
Once an app is in the gallery, users can use it only if their tenant's administrators allow this, per the settings on this page:
Enterprise applications | User settings
https://entra.microsoft.com/#view/Microsoft_AAD_IAM/StartboardApplicationsMenuBlade/~/UserSettings
From the user's end, there are other governance controls that may impact the user's ability to use your app, but I think "register your app in the gallery" is probably what you're asking for.

How to let only owners authenticate through a sign in page with Firebase Auth

I'm trying to create an admin portal for an already created application. Only owners should be able to authenticate through that particular page. The rest of the accounts in the firebase authentication shouldn't be redirected. I'm using React and Firebase. What are the potential solutions to that?
Firebase Authentication makes no distinction between where the user signs in from. No matter what place they use to sign in, they end up in the same state: as an identified user.
Your application code however can make a distinction based on its knowledge of the user. For example, if you have a list of application administrators somewhere, or have added a custom claim to the profile of application administrators, you can use that information in a so-called auth guard in your application's routing logic.
See some of these search results for more information about this, and questions like this one: How to restrict access to pages in next.js using firebase auth?.

How to provide user authentication option to users in a React app?

I am creating a web app that allows users to user their own social network services (Instagram, facebook, spotify, etc.) and display the information like photos, posts, playlists from the SNS.
I know we need each users to authenticate their SNS account first to make the API accessible.
I have no experience with authentication, so I want to get some TIPs of how to do this.
My idea is to provide buttons called Authenticate for each SNS. When the user clicks this, I want to open a window for the user to login to their SNS and when the login is successful, it will give a list of whatever information that is related to the SNS (photos, playlists, etc.).
I want to know what I need to know to do this. I know that we need access tokens to access the user's API. Is there a way to use the access token that the user earns by authenticating his account to access the API?
Any advice will be great. Thanks.
Try firebase authentication. A lot of work is involved in what you want to do, and they have done much of this work for us...

How to list all registered applications in identity server for a user?

I am using IdentityServer3 for authentication. The indetityserver has 3 applications configured.
https://www.app1.com
https://www.app2.com
https://www.app3.com
A user is registered for all 3 applications. Currently user has to goto respective application url (for eaxample https://www.app1.com), which redirects user to identityserver for authentication and upon authentication user get redirected back to app web site.
Is there way to configure IdentityServer where user directly goes to identyserver, get authenticated and then identityserver list all the applications that user has access to? Here user would choose application he wants to login into.
Give your users a link to the IdentityServer login page. After login, display a form (with tiles or links or something) where the user can choose the application.
Make sure that the link to the application sends the user to a secured page (or a method where you challenge the user). This would cause the application to redirect the user to IdentityServer, which notices that the user is already identified (cookie), returns to the application where the user is automatically logged in.
In case the user wants to quit the application, redirect back to the tiles page to choose another application.
Please note that a user is not specifically bound to one application. Once logged in, the user can access all applications. If you want to allow specific access, you may want to solve this with claims.
P.S. I didn't notice you are using IdentityServer3 as you also tagged this as IdentityServer4. But I would expect this would work the same for both versions.

Google Accounts customization in GAE

Well, this question is regarding the authentication system of an app in GAE. I've read several posts and found out the best way to manage the user authentication stuff is using the Google Accounts service. I've read several suggestion (here is one of them) but they don't really give a solution to the problem.
Here is what I want to do: I am going to use the Google Accounts service and I want to know if there is a way to change the login and create account page, so that I don not have to redirect the user to the Google Sign-in form, but rather redirect the user to my own login form and then forward those data to Google Servers. I would like to do the same exact thing with the register form. In conclusion I need that the user feels she is using the login of my application, but is really using the Google Accounts service.
Here is an example of something I want to do: This webpage uses Google Accounts Service, but the login form, is a custom form that then (I imagine) forwards the data to Google Servers and then logs the user in.

Resources