IMPORTANT: According to the comments, this method doesn't work in all cases. For example, you cannot provide 'App Domain' value to be used inside SharePoint provider-hosted addin. If you need it only for some background jobs (which use app-only authentication), then you still can use below method.
I bet you know about a page in SharePoint with address AppRegNew.aspx. You use this page to create a new app registration, generate ClientId and ClientSecret. One important thing about ClientSecret generated with AppRegNew.aspx is that secret has expiration time. By default expiration is 1 year. You can easily replace it afterwards, there is an article out there - Replace an expiring client secret in a SharePoint Add-in. You can even generate a new one with maximum of three years of expiration. Sometimes it’s inconvenient, especially if you have to manage multiple SharePoint apps with different expirations. Do you know, that you can generate a secret, which never expires? Well, technically almost never, but 300 years is pretty good, isn’t it? My ex-college found a way to do that, read further to find out how. More...
This year I hear “Web Components” term from here and there more frequently. What exactly is Web Components?
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
In other words, web components are reusable pieces of HTML and JavaScript, which can be used in modern browsers, and what is even more important, can be consumed by JavaScript frameworks. Today we have a few web frontend libraries for building web interfaces and SPAs. All of them uses concept of components, however components from one library can’t be easily ported to another one. It looks weird, because in the end that’s just portion of html + styles + logic (JavaScript). However today, in 2018 we can’t reuse building blocks from one library in another. It’s a shame. Web components solve that issue. They can be reused across JavaScript frameworks. Check out webcomponents site for more information.
Web components is a set of W3C standards, which describe how everything fits together in browser. Not all browsers fully supports all web components’ specifications. Google Chrome has full support, Firefox is developing a few remaining things and Edge has the worst support: More...
Consuming third party or your own Azure AD protected API from SPFx code is a very common need. I wrote a blog post series on that topic, the first one you can find here. All solutions I covered have their own pros and cons, however the less painful and recommended solution is AadHttpClient (available in SPFx 1.6 and onwards). AadHttpClient approach has less issues and works really good. If you are curious about how it actually works, read the rest of the post. In this post I dive into AadHttpClient architecture, libraries and technologies used, think about security issues and try to bypass (spoiler: successfully) webApiPermissionRequests restrictions in SPFx web parts. More...
Call Azure AD secured API from your SPFx code series:
- Call Azure AD secured API from your SPFx code. Story #1: Azure Functions with cookie authentication (xhr "with credentials")
- Call Azure AD secured API from your SPFx code. Story #1.1: Azure Web App with ASP.NET Core 2.x and cookie authentication (xhr "with credentials")
- Call Azure AD secured API from your SPFx code. Story #2: Web app (or Azure Function) and SPFx with adal.js
- Call Azure AD secured API from your SPFx code. Story #3: Web app (or Azure Function) and SPFx with AadHttpClient <—you are here
This post covers the last and recommended way to interact with remote Azure AD protected APIs from SPFx code – AadHttpClient. As of now (Aug 2018) this feature is still in preview and not available for production. I guess it will be available in a few months, however that’s only guessing. Why it’s recommended? Because it’s OOB SPFx way to interact with APIs, it eliminates almost all cons we have with previous methods and it’s much simpler and solid. More info on this topic you can read here - Connect to Azure AD-secured APIs in SharePoint Framework solutions.
Source code for the post is available here at GitHub.
Today’s post covers:
- New app registration in Azure AD (step will be taken from previous post)
- Create Azure AD secured API (Web App with custom jwt bearer authentication or Azure Function with EasyAuth aka App Service Authentication, I will cover both) and enable CORS (step will be taken from previous post)
- SPFx webpart, which uses API via AadHttpClient
- Deployment and testing
As usual, let’s get started More...
Call Azure AD secured API from your SPFx code series:
- Call Azure AD secured API from your SPFx code. Story #1: Azure Functions with cookie authentication (xhr "with credentials")
- Call Azure AD secured API from your SPFx code. Story #1.1: Azure Web App with ASP.NET Core 2.x and cookie authentication (xhr "with credentials")
- Call Azure AD secured API from your SPFx code. Story #2: Web app (or Azure Function) and SPFx with adal.js <—you are here
- Call Azure AD secured API from your SPFx code. Story #3: Web app (or Azure Function) and SPFx with AadHttpClient
It’s possible to call your remote Azure AD secured API with help of popular adal.js library. This approach has a number of issues (read in the end of the post). Almost all issues come from a fact, that adal.js works well in case of SPA and doesn’t play nicely in SPFx world. To make it work with SPFx, you should “patch” it. Even in this case there are some caveats. That’s why for now recommended approach is using AadHttpClient, however for the sake of completeness I wrote a post on adal.js as well. By the way, AadHttpClient is still in preview (as of now, check the actual state at docs.microsoft.com).
Read more on this topic here – Connect to API secured with Azure Active Directory and here – Call the Microsoft Graph API using OAuth from your web part.
In today’s post we need to perform below steps:
- Add new app registration in Azure AD
- Create Azure AD secured API (Web App with custom jwt bearer authentication or Azure Function with EasyAuth aka App Service Authentication, I will cover both) and enable CORS
- Patch adal.js library to work with SPFx
- Create SPFx web part, which uses adal.js and calls remote Azure AD protected API
The source code for this article available on GitHub here.
Let’s get started More...
Call Azure AD secured API from your SPFx code series:
- Call Azure AD secured API from your SPFx code. Story #1: Azure Functions with cookie authentication (xhr "with credentials")
- Call Azure AD secured API from your SPFx code. Story #1.1: Azure Web App with ASP.NET Core 2.x and cookie authentication (xhr "with credentials") <—you are here
- Call Azure AD secured API from your SPFx code. Story #2: Web app (or Azure Function) and SPFx with adal.js
- Call Azure AD secured API from your SPFx code. Story #3: Web app (or Azure Function) and SPFx with AadHttpClient
In the previous post, I showed an example on how to call Azure Functions API protected with Azure AD (using EasyAuth setup). Described approach has a few limitations, one which is the most important is an inability to send HTTP POST or PUT requests. This issue can be fixed by using regular ASP.NET Web API application with custom authentication layer. More info about this approach you can find here - Access the API by leveraging SharePoint Online authentication cookie. This post describes required steps to make it work:
- Add new app registration in Azure AD
- Create new ASP.NET Core application and setup authentication with Azure AD.
- Enable CORS for your web application with credentials support (so we can send CORS AJAX and attach credentials to our request, auth cookie in our case)
- Create simple SPFx webpart, which gets data from our web app via authenticated HTTP request (GET and POST).
The source code for this article available on GitHub here.
Let’s get started. More...
Basics
SPFx has a built-in mechanism, which holds some configuration values for you. For example in runtime, you can read them and determine if you are running locally or not. You can verify if you are in debug mode or not. You can do some other things as well. Let’s take a closer look at some values, available out-of-the box.
Probably you know, that SPFx build pipeline is webpack based. It means, that webpack’s configuration supplies a lot of those values. The most useful are:
process.env.NODE_ENV
- can be either ‘production’ or ‘dev’ depending on an environment where the code is runningDEBUG
– boolean, equals to false for release builds and true for developmentDATACENTER
– boolean, equals to true if you are running in context of SharePoint Online. Might be useful if you build webparts for on-prem and Online at the same time More...
A few days ago I published SharePoint REST API Metadata Explorer. In this post I want to share a bit more information about it and share future plans as well.
The Present
SharePoint Rest API for long time was a hidden gem for me. I used CSOM or JSOM without issues and that was fine. Nowadays the power of SharePoint REST API increases. Today REST is a recommended way to interact with SharePoint. BTW for a browser there is a great library to manipulate SharePoint REST API using convenient fluent syntax – PnPjs. If you haven’t tried it yet, it’s time to try .
What is always difficult for me with REST API – to find good documentation for different REST API url along with good usage examples. Some information available at docs.microsoft.com, some in blogs and sharepoint.stackexchange site. However there are few issues with mentioned sources:
- they don’t fully cover REST API, there are still a lot of methods which are not yet covered
- in SharePoint Online every month REST API changes and new methods or method params appear
A few years ago I discovered that SharePoint REST API provides WCF $metadata endpoint. More...
I bet you know fairly popular PnP-JS-Core library. It also known as sp-pnp-js, because the original file and corresponding module in npm called sp-pnp-js. Home page on github advertise it as “JavaScript Core Library” (using analogy to PnP-Sites-Core). However today there is another (very similar) library at pnp/pnp (or PnPjs) which looks very similar. What is the purpose of this new library? Should I use it or continue using old PnP-JS-Core?
Actually for now these libraries are identical and have feature parity. What is the purpose of having two identical libraries? Because PnPjs is an evolution of original PnP-JS-Core. Consider below points regarding new library:
- new organization name (github/pnp) corresponds to npm modules names (@pnp/)
- new library has better structure organization – there are multiple logically divided modules, thus making support and extensibility easier
- new library has exactly the same API and features as current PnP-JS-Core
- new library is a part of SharePoint Pattern & Practices (SharePoint PnP)
- the same people are behind it – Microsoft and awesome community
- development will be performed simultaneously in two libraries for about 5 months. If one feature is available in PnP-JS-Core, this feature also will be added to PnPjs (and vice versa)
- after 5 months (approximately summer 2018) PnP-JS-Core will be deprecated, it will be available in npm and cdn, however it will never receive new features, because main development will be transitioned to PnPjs (pnp/pnp)
What does it mean for you? If you are starting a new project, use new PnPjs library. If you have a chance to perform an upgrade for your current project, upgrade it to PnPjs. If you have a project with PnP-JS-Core – its fine, because the library will be in npm and on cdn, however new feature won’t be rolled out starting from summer 2018 for PnP-JS-Core specifically.
To listen about upcoming changes checkout PnPjs community call – starting from 19:00. If you want to listen to community calls live – use this calendar invite.
Hope this helps!