4

We currently have an SPFX webpart (React application) that uses SSO and then calls Graph APIs 'on behalf of' the user. The SPFX package is installed into SharePoint/Teams where consent to use the Graph APIs are agreed by the Administrator installing the package. We want a simpler user experience where they are able to download the app from the Microsoft Teams App Store.

Is it possible to use the Microsoft Graph Toolkit 2.0 with silent authentication to provide the same seamless experience as we have with the SPFX webpart? The only samples I have been able to find use the TeamsProvider but the login must be initiated by the user and require a popup to be displayed. Ultimately, we are hoping for an experience with no popups. Is this possible? Can you provide a link to working samples that make calls to Graph APIs that require extra scopes e.g. Mail.Read?

I have also seen many examples using ADAL rather than MSAL or the latest Microsoft Graph Toolkit. Should we be using ADAL or MSAL to achieve this?

Below shows the the code working with the TeamsProvider initialised in the App.tsx and the Auth.tsx popup when the user initiates login with the Login component from the Teams tab:

App.tsx:

import { TeamsProvider } from '@microsoft/mgt-teams-provider';

function App() {
  // Initialize the Microsoft Teams SDK
  microsoftTeams.initialize();

  // Define Teams as the global provider.
  TeamsProvider.microsoftTeamsLib = microsoftTeams;
  Providers.globalProvider = new TeamsProvider(AppConfiguration.TeamsConfiguration());

Auth.tsx

import React, {useEffect, Fragment} from 'react';
import * as microsoftTeams from "@microsoft/teams-js";
import {TeamsProvider} from '@microsoft/mgt-teams-provider';

const Authentication: React.FC = () => {

    useEffect(() => {
        TeamsProvider.microsoftTeamsLib = microsoftTeams;
        TeamsProvider.handleAuth();
    });
Andy Layzell
  • 41
  • 2
  • Are you still facing the issue? – VaraPrasad-MSFT Dec 28 '20 at 09:00
  • @VaraPrasad-MSFT - Yes, we still have this issue. I am investigating using ADAL now as it only requires a popup for consent and has been suggested as the best user experience. – Andy Layzell Jan 04 '21 at 08:04
  • Hi @Andy Layzell, [Silent Authentication using ADAL](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-silent-aad), this document is about handling silent authentication and it provides a nodejs sample as well. Could you please check it. – Mallipriya-MSFT Jan 08 '21 at 08:07
  • Thanks @Mallipriya-MSFT. We are trying out this sample as it was recommended: [Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs](https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/visual-studio-code-tab-sso). – Andy Layzell Jan 13 '21 at 23:43
  • The following sources led us to believe that Azure AD SSO is the best approach: 1. [Key Benefits of Integrating Web Applications into Microsoft Teams](https://www.youtube.com/watch?v=0keM5GZMu00&list=PLlrxD0HtieHisoDV-nRlff-oAsZ7sRaQu) 2. [Calling Microsoft Graph from your Teams Application – Part 3: Tabs](https://bob1german.com/2020/08/31/calling-microsoft-graph-from-your-teams-application-part3/) – Andy Layzell Jan 13 '21 at 23:44
  • Could you please check this [example](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/tree/master/src/views/tab/silent)? – Nikitha-MSFT Jan 15 '21 at 12:21
  • Thanks @Nikitha-MSFT. The [Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs](https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/visual-studio-code-tab-sso) covers this and it also includes requesting the access token and handling the consent flow that is not shown in the example you sent. – Andy Layzell Jan 19 '21 at 07:29

1 Answers1

0

TL;DR: Yes, if you can have users consent to pull their data from Microsoft Graph.

Scopes in general

Selecting scopes when creating a token basically controls what APIs you can make use of with the token. For example, an API can be configured to only accept requests where the token has been created with scope User.Read (GET /api/me could be such a route).

https://auth0.com/docs/scopes

Only Teams SSO

Using only the SSO solution with Teams will not work, as you've concluded. This is due to the limited scopes on the token which is provided by using @microsoft/teams-js authenticate(). This cannot be configured (to my knowledge) to ask for other scopes than the basics for fetching the users own information.

TeamsProvider

Using the TeamsProvider from @microsoft/mgt you can fetch a new token with additional scopes, but that will require the user to agree to that, which must be done through opening a popup with some UI. The experience won't be completely seamless.

With pre-consent

If you have pre-consent by users (configured by administrators of the organization), it is possible to have a seamless experience. The author of this pull request has shown how to do it. By making a on-behalf-of token request, a new token with additional scopes can be acquired. You'll need a backend which can make the on-behalf-of request.

https://learn.microsoft.com/en-us/graph/auth-v2-user

@microsoft-teams/teamsfx

This is a new SDK for Teams that was recently announced, which seems to support fetching data from Microsoft Graph. Not sure if the experience will be seamless. Check out the Simple Auth part.

https://learn.microsoft.com/en-us/javascript/api/@microsoft/teamsfx https://github.com/OfficeDev/TeamsFx/tree/main/packages/sdk

maxpaj
  • 6,029
  • 5
  • 35
  • 56