0

I'm working on an MS Teams app with React frontend and Azure AD to manage users. My goal is to get the ID of currently signed in user from AAD.

I've found some examples on how to use MS Graph to get the data I need. I'm trying to implement this solution.

I don't understand what should I use as the teamsfx context used when useGraph is called. I would have asked right under the linked question, but I don't have enough reputation to comment.

Also I want to ask: is it possible to get the AAD user ID purely on frontend, or do I have to implement something on backend (Node.js in my case) too? I'm kind of confused on how the MS Graph and AAD integration works together.

If there's some easier way to get the AAD use ID, please let me know, because maybe I'm overcomplicating things.

Thanks for any help.

Rukmini
  • 6,015
  • 2
  • 4
  • 14
miso1655
  • 35
  • 4
  • Does this help https://www.npmjs.com/package/@microsoft/mgt-teamsfx-provider? – Rukmini May 05 '23 at 09:53
  • can this react sample help you? https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/2-Authorization-I/1-call-graph – Tiny Wang May 05 '23 at 10:07
  • Thank you both. I can't say that either of your comments provided the answer, but after checking both links from you guys and some more content online I somehow managed to make it work the way I want to. – miso1655 May 05 '23 at 14:11

2 Answers2

0

// This code fetches a list of users from the Microsoft Graph API using the @microsoft/microsoft-graph-client library and the @azure/identity library for authentication.
// To use this code, you need to provide your Azure AD client ID, client secret, and tenant ID.
// You can obtain these values from the Azure portal: https://portal.azure.com/

const passport = require("passport");
const OIDCStrategy = require("passport-azure-ad-oauth2").Strategy;
const clientId = "your_client_id";
const clientSecret = "your_client_secret";
const tenantId = "your_tenant_id";

module.exports.getUsersFromMGraph = async function () {
  const { ClientSecretCredential } = require("@azure/identity");
  const { Client } = require("@microsoft/microsoft-graph-client");
  const { Store } = require("express-session");

  // Initialize the Microsoft Graph client with authentication
  const graphClient = Client.init({
    authProvider: async (done) => {
      const credential = new ClientSecretCredential(
        tenantId,
        clientId,
        clientSecret
      );
      const token = await credential.getToken(
        "https://graph.microsoft.com/.default"
      );
      done(null, token.token);
      return token.accessToken;
    },
  });

  try {
    // Fetch a list of users from the Microsoft Graph API
    const result = await graphClient.api("/users").get();
    var obj = result.value;
    console.log("-----------------------------------------");
    return obj;
  } catch (error) {
    console.log(error);
  }
};
Yassine Makhlouf
  • 1
  • After all I didn't even need MS Graph, but your code gave me some hints about the Azure AD app config, so thank you for the help. – miso1655 May 05 '23 at 14:13
0

After checking out the links provided in comments and some more googling I found a solution to my problem using access tokens provided by Microsoft in the form of JWT. This code from my React app should help anyone with the same problem.

  1. Import these libraries
import * as microsoftTeams from "@microsoft/teams-js";
import jwt from 'jwt-decode';
  1. create a state for accessToken
const [accessToken, setAccessToken] = useState(null);
  1. retrieve the access token (JWT format)
microsoftTeams.initialize();
microsoftTeams.authentication.getAuthToken({
    successCallback: (result) => setAccessToken(result),
    failureCallback: (error) => console.log(error)
});
  1. decode it
console.log(jwt(accessToken));
miso1655
  • 35
  • 4