How can I deploy a SharePoint Framework webpart with a Microsoft Graph API query as an add-in?

Question

I have a set of graph queries that return the email addresses for my Office 365 Group members who are also the members of my connected SharePoint Team Site.

https://graph.microsoft.com/v1.0/groups?$filter=startswith(displayName,'<group name>')
https://graph.microsoft.com/v1.0/groups/,<group id>/members?$select=givenName,surname,mail

I'd like to provide users that capability in a SharePoint Online tenant.

How can I do that with a SharePoint Framework web part wrapped in an add-in? My tenant admin has a process for approving add-ins to the App Store. I'm not sure which permissions I need to request and if the authentication and authorization of the current user carries through from an SPFx web part via an add-in.

Answer 1

I was trying to connect to Graph API in SPFx environment and mostly failed. But now SPFx has GraphHttpClient available, which is still in development phase but can able to read groups. You can have a look at that.

Also, I found an angular based library ADAL available in npm as well, which can interact with Groups, Outlook, Calendar etc. You can add adal angular to your SPFx project using npm i adal-angular@1.0.12. Make sure you use version 1.0.12 only as the latest version is not working with SPFx.

Also take a look at this post, which explains more about using Graph.