Microsoft 365 Community Community Demos, 10 Dec 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building custom Application Secrets Expiration Web Part

Description

In this 7-minute developer-focused demo – see how to monitor expiration dates of secrets and certificates for your applications registered in Azure Active Directory. The web part created by Aimery Thomas displays app IDs, app names, app secrets, certificates and expiration dates in a list. Code walkthrough - see using Graph to retrieve applications/secrets/certificates from AAD. Organize items into a list that’s rendered using React controls. Search, sort and group by app, type and expiration date. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 18, 2021.

Demo Presenter: Aimery Thomas (Avanade) | @aimery_thomas

Supporting materials:
• Samples - Applications Secrets Expiration | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-app-secret-expiration
• Blog - Use Power Automate to Notify of Upcoming Azure AD App Client Secrets and Certificate Expirations | https://techcommunity.microsoft.com/t5/core-infrastructure-and-security/use-power-automate-to-notify-of-upcoming-azure-ad-app-client/ba-p/2406145
• LinkedIn – Aimery Thomas | https://www.linkedin.com/in/aimery-thomas-17418187/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

Hello everyone, so my name is emery thomas, I'm, a microsoft, 365 developer at avenatt, france. You can contact me on twitter or on linkedin, and today I'm gonna talk to you about the application secrets expiration web part. So just to give you a bit of context on. Why did I build this web part?

A

So, basically, when you build applications, you may need to use azure id app registration, for example, to get specific permission or to authenticate your users, and for I mean each of these azure id applications can have multiple certificates or secrets as credentials and in the end, if you have a lot of application you, you may have a lot of secrets and a lot of certificates to monitor and it can be difficult for you to know when a specific secret is going to expire or certificate, and that's where this web part can help you, because what it will do, it will display all azure id application secrets and certificates along with their expiration date in a in a list.

A

So to do that, I'm using the graph api to get the applications information. The ms graph client to to connect easily to the ms graph and finally, some react controls to to display the items.

A

So, let's move on to the demo part.

A

So here I have my web part. So, as you can see, I have all my secrets and certificates for each item. You have the application id. If you click on the link, you can directly access the application page on the azure portal.

A

You have the application display name the number of days left before the expiration, the credential type and the exact expiration date.

A

You have the pagination component to browse through the pages and finally, the search component to search for specific type of credential or a specific explanation. Date oops here you can also choose different settings from the property pane.

A

So, for example, you can select a group column. So here, if I choose application id, I will have all my items grouped by application.

A

And you can also choose to display only secrets and certificates that will expire soon.

A

So if I do that, I will only have uh my secrets or certificates actually here only my secrets- that's that will expire within the next 30 days and the last setting that I'm using today, but I'm not sure that it's going to be very useful, for you is to choose to display not to display the real application, but only sample data that I defined on the json file.

A

So now, let's move on to the code part of the demo. So first, what I want to do is to get my application so to do that, I'm using the graph client to get my applications.

A

I want to select my application id my application display name but also my password credential, which will contain all the information that I need about my secrets and key credentials. That is going to contain all the information that I need regarding my certificates.

A

So, as you can see here, I'm not getting all the application. I will only get the top 100 applications, so I guess my I guess my next pr will be to improve that to make sure that I'm getting each and every applications.

A

But anyway, once I have retrieved my applications, I can start building uh the items that I'm going to display on my list.

A

So to do that for each password credential, I will create a new object so with the application, id application display, name and all the the column column of the list and and of course, I'm going to do the same for my certificates.

A

And once I have all my teams, we can move on to the rendering part of the web part. So I I'm using eliseu component a pagination component and a search component, so you can see that I'm not using a search component included in the in the listview component.

A

I'm doing that because I wanted to make sure that the search results that I'm getting were from all the items and not only from the items that are displayed on the current page once and that's it for the demo.

A

So you can find a sample and the github repository, and I and I wanted to mention this great article from russ riemen, which I got the inspiration from to to create this web part.

A

So that's it for me back to you, david.

B

Thank you, amy, very, very cool stuff.

C

That's the call out from a sharepoint engineering side of the house. We've been internally pushing on potentially having extensibility in the tenant admin ux, and this would be a perfect candidate for that kind of a page. So so you would be able to then put this web part in the in the sharepoint or in the office 365, and that mean so because, of course, that's a kind of an administrative view, and you don't want to expose that to everybody so but really really cool sure.

B

Yeah excellent use, I mean you could also use the um obviously the uh site collection, app catalogs, to isolate some of this stuff. For that exact purpose. So great point, I was thinking the same thing.