Microsoft Graph Toolkit: get logged in user

0
votes

I am using the Login component <Login /> of the Microsoft Graph Toolkit (React flavor). How can I retrieve the display name and User Principal Name of the logged in user?

I see that the component has a loginCompleted prop, but the user is not passed as argument.

2
reactjsmicrosoft-teamsspfxmicrosoft-graph-toolkit
Can you get the userDetails object from the login component? in js, something like: let person = document.querySelector('mgt-login') console.log(person.userDetails) This object should contain both the upn and the displayName properties. - Nic Vogt
That's the kind of info I am looking for. Obviously I don't want a DOM method such as querySelector and I am looking for a built-in method. There must be one as other components such as Person or Avatar can get the info. - Christophe

2 Answers

1
votes

So it's definitely possible to do this, but be aware that it's not 100% safe (what I mean is, don't rely on this to send to a backend API as a way to authenticate or identify the user). However, for display on the page you can use something like:

import { Providers } from '@microsoft/mgt';
...
let provider = Providers.globalProvider;
let account = provider._userAgentApplication.account;

// now you have access to: account.accountIdentifier, account.name, account.userName, etc.
0
votes

After getting advice from Microsoft, and reviewing a sample, here is the code I came up with:

    <Login
      loginCompleted={(e) => {
        Providers.globalProvider.graph.client.api('me').get()
          .then(gotMe => DoStuff(gotMe));
      }}
      logoutCompleted={(e) => { }}
    />