Microsoft 365 Community Community Demos, 29 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building SPFx Password Vault Web Part and SharePoint quick links extension for browser

Description

In this 16-minute developer-focused demo, Sergej Schwabauer delivers two solutions - Password Vault web part (encrypted password protected page and data) and SharePoint Quicklinks extension (dynamic quick links to site contents, site settings, etc.). For each – go from idea and design criteria to installation and configuration. Create and publish a password protected page. Open/close the vault (page) with password. Look at the code – focusing on PasswordValueService for web part and on a single file for extension. Available soon as SPFx samples.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 29, 2022.

Demo Presenter
• Sergej Schwabauer (AURUM GMBH)

Supporting materials

Password vault web part
• Repo – SPFx Password Vault Webpart | https://github.com/SPFxAppDev/sp-passwordvault-webpart
• Article - A simple password vault webpart for Microsoft SharePoint/Teams | bit.ly/3Ww67gC

Chrome Extension “SharePoint Quicklinks”
• Chrome web store - SharePoint Quicklinks | https://chrome.google.com/webstore/detail/sharepoint-quicklinks/ehmphjkdhndbdpfhhckemmhapfahlbhe
• Article - Browser extension for (dynamic) quick links for SharePoint Online | bit.ly/3Ww67gC
• Repo - sp-quicklinks-browser-extension | https://github.com/SPFxAppDev/sp-quicklinks-browser-extension

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

B

Germany I have more than 12 years of experience in SharePoint development and recently I started a Blog where I regularly write and publish my Solutions spfx app dot, Dev I have to admit I'm a bit nervous because it's my first presentation here on the PMP Community core, moreover, I hope my English is good enough for you guys to understand everything today. I may present two of my Solutions. The first one is the spfx web part, simple, password fault. I will talk about the highlights and then show a demonstration.

B

The second solution has nothing to do with SPF X, but with SharePoint. It's a browser. Extension, let's start with the web part simple password fault, as the name suggests it's a web Port, that's securely sourced passwords and usernames. The the ID didn't come from me at that time. My colleague had asked me: hey: is it possible to create a web pod that stores user data encrypted and can only be accessed by a mass password I just answered? Yes, of course, it's possible and my third open source spfix solution was born.

B

The requirements are simple: the data must be stored encrypted in SharePoint. The fault must first unlock to view or edit the data and the encrypted values can only be decrypted with the master, password, username and password can be copied to the clipartis one click. A fault can be closed manually or will be closed automatically after 5 minutes.

B

There are, of course, a few more features, so, let's get right to the demo.

B

Just uh imagine you have several project sites on your internet, the team member Works um for a customer who has their own environment and has created one only one user for this project. This is where is to share this data with all team members. This would be best be done of the project site then, since there is no company-wide password fault like key pass or or bit warn, or something like that, um then this site looks like that.

B

The problem is this is not a fictional story. um I have seen something like this myself. It goes without saying that um something like this is not uh insecure. It is insecure. Sorry, um right now, at this moment, many people see the credentials during this presentation. Okay, they are invented, but nevertheless, now, let's play my password fault, web port.

B

I placed it the first time password fault and then you have to to set a master password. If you don't set a massive password. It looks like that one, but we want to set one. Let's say: e and P com, Unit t call, you can show the the password and hide it again and then let's say the username is the same as buff super user and pass part one two three, the note is the same as here now be safe at the web part and publish this page.

B

If you enter a wrong password, for example, just something like tests or I, don't know, let's see here test, then the default will not be open, of course, but if we enter the correct password that was PNP.

B

T pass uh or I forgot the math password. So, um as you can see here in this case, the the password uh is not visible in plain text, I mean, um of course you could um make it visible again, but um it's not needed so I can copy it um without uh um display it.

B

So if I now, I can close the fault, if I the the username and password is not needed anymore or um if I don't close it. For example, if I refresh the page, it is open, but it's only open for the next five minutes.

B

I demonstrated quickly because it will be saved in the session storage, go to the session storage and look for spfx. So you can see here it's just saved but encrypted and if I remove, for example, this and this value, then it's the same as the reload after five minutes and if I reload the page now, then the fault is closed again in edit mode. When you go to the edit mode, you can edit the the data. But of course you you need to um insert the master password again.

B

So now you can change all the data or change the massive password, and um now you ask maybe but otherwise really safely stored and let's take a look, switch back to the maintenance mode here and then to the data and, as you can see here, it's all encrypted. This is the master password, the username, the password and the node, but is it still possible to to decrypt that?

B

Yes, if you know the massive password and the internal source code, then it is possible, but then it is easier to type them as the password and open the fault, and they that's. Why I uh it's as important that if the master password is forgotten, all the data can no longer be recovered um by the way. The solution can, of course, also be added as a tab in teams, as you can see here, so you can have the same functionality in teams as a tab. Okay, guys, let's take a quick look into the code.

B

This is here, um I think it's not important what happened in the web part and uh and in the component, because it's a simple, fluent UI design and treat and write the values in evapor properties. That's that's. Why? I'm only going to talk about the service?

B

um First of all, I use the cryptojs as library for encrypting and decrypting. When a user tries to open the wall, I get the plane messed up, password that the type before typed investor password and pass to the open function, then I encrypt the plain text password in the same way as the master password. That means um MSG sha 256, with individual salt volume and chat check this encrypted hashed value with that one that starts in the in the web part properties.

B

If it's equal, then I open the wall, decrypted data and set the session storage to keep it open for the next five minutes. This is this a few lines foreign default I, remove all session storage, values and clear all properties here, because the master password is hashed, I cannot decrypt it, but all other data must be decrypted.

B

Of course, that's why I encrypt them with AES stands for advanced encryption standard here you can see that it's cryptojs, AES, encrypt or decrypt and I use every time, other secret and, as you can see here, for example, password password secret key in username secret key and an old secret key and yeah. That's it that was all the the magic behind this web part.

B

Now, let's look at uh to a quick summary.

B

Developer is a simple report to keep your data Secret at the moment. It's not yet available in the PMP specific sample through repository but I'm working on it, but in the meantime you can look at my official GitHub repository for the solution. You can also download the solution there for the next release, I plan to add a new feature that allows the user to secure multiple, usernames, passwords and nodes, and that was a little insight into my web part.

B

Now, let's move on the second part, my browser extension that is very simple, an extension that offers various Dynamic, quick links to SharePoint such site, content, site settings, and so on I mean who doesn't know it. A site is loaded. Then it takes a while until the settings icon or tier icon is displayed, then you usually have to make several clicks to get to site settings, for example, on a modern page. This is typically done via site settings um item site information, view all site settings.

B

Of course you can also quickly enter the URL to the browser. You probably know that URL don't mistype it and are faster than the UI and the mouse clicks. The extension should help to reach it faster and more dynamically. By the way this is my first browse extension. I have never developed one before the requirements are simple. Keep it simple, get the current Windows URL to determine the SharePoint URL, not SharePoint, API calls are made. No check is made to see if the user has the permission.

B

It means if you click on a link, and you have not not the permission for that. It's just a default access denied page appears. No data is read, store or passed on to third parties. You can store your custom, URLs and links for developers are included.

B

Okay, let's start with a short demo I'm here again on the same site as as previously and now uh I want to navigate to let's say um website. Permissions here is my extension. It's installed here. I click on that and now I click on website permissions. Now the the extension redirects me to the right URL to Let's 15 user.spx foreign.

B

But the favorites are not Dynamic. That means it is always fixed. They are take URL. The browser extension, on the other hand, is dynamic. It tries to read the URL of the current site and determines the web error web application, URL and Page URL. If you are on our page of course, I will prove it on another side. This one, as you can see here, is the site simply password fault, and here is the site: showroom.

B

Okay, now I click, the same website, permissions and I'm still on showroom, not on a simple password, but the same aspects page behind. That means it's more flexible, more Dynamic than the favorite bar Additionally. You can use the spfx debug parameters.

B

Let's say this: one um I have here an example. This is a completely newly created spfx application. Customized extension I have not made any changes now when to test it. So I go to into my code into the Manifest file and just copy the the ID of this.

B

It's already running and now I want to click to my extension, say: spfix, app extension uh debug, then the extension asks for the application. Id I, clicked OK and now it this is the application customer to be test. As you can see here, it was passed to the S URL parameter in the in the browser.

B

Before we look at the code, I would like to show the settings of this extension because it's possible to to set up the links you can set, for example, the headlines. You can override it and then you can see here.

B

This is the default URLs that comes with the with the plugin, but you cannot change the url, but only the labels, and you can say if it's enabled or disabled and the same for the pages, um but this section will be visible only if you are on a page of course, and then you have the possibility to set custom urls.

B

For example, let's.

B

Check this one: this is the term store, um I will create one save it, and now I can go to turn store, and this redirects me to the terms so yeah. That was uh the setup of the of this extension. Okay.

B

um Now, let's take a quick look at the code, it's very simple and only one file, just one file and the the logic behind this is get a URL of the current tab. Remove all the URL parameters check if the current site is a sharper.com side, if not an information is displayed in the extension, because the extension Works only in a sharpen tenant, otherwise it will check if it is a page um here in the site, Pages library or Pages Library.

B

If, yes, it will try to build the URL of the page. The same is then done for libraries lists and layout layouts path. At the end, you have in the best case, all needed URLs and can build them accordingly.

B

Here in create list item is the the place the placeholders are replaced and the actual link is built um because, as mentioned before, you can use this placeholder when your links- and this will be replaced with the current wrap your web app URL and Page URL.

B

Okay, I think that's it here are some more links to my blog posts and the code for the extensions and solutions and I would say, keep your data secret, but not my web parts and extensions. Thank you.

A

Excellent, thank you, sir okay, really, really cool stuff and great job on the on the first time presenter as well. So thank you. Thank you for doing this, and I know that it's always the first time is, is always the most, let's say terrifying one, but you did an awesome job really really good job and the solutions were really really nice as well, so awesome stuff.

A

Thank you excellent. Thank you. Certainly on that one.