{"id":3643,"date":"2019-04-03T17:24:17","date_gmt":"2019-04-03T17:24:17","guid":{"rendered":"https:\/\/wspelt.com\/?p=3643"},"modified":"2024-07-16T15:08:40","modified_gmt":"2024-07-16T15:08:40","slug":"secure-web-api-in-an-sharepoint-provider-hosted-app","status":"publish","type":"post","link":"https:\/\/wspelt.com\/?p=3643","title":{"rendered":"Secure Web API in an SharePoint provider hosted app"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

During a job I came across the following requirement:
Being able to call a web service in a secure manner from a provider hosted app (MVC application) on pages with client-side code (JavaScript).<\/em>
I will elaborate on the implementation of this below.<\/p>\n\n\n\n

What do you need<\/h2>\n\n\n\n

The starting situation is a created SharePoint provider-hosted app project.
As standard, you receive the Microsoft SharePoint CSOM assemblies and the TokenHelper class, of which the following assemblies are the most important:
\u25aa Microsoft.SharePoint.Client
\u25aa Microsoft.SharePoint.Client.Runtime

Also add the following NuGet packages:
\u25aa SharePointPnP.IdentityModel.Extensions
\u25aa SharePointPnPCoreOnline
You can also easily install this via the NuGet Package Manager console with the following commands:
Install-Package Microsoft.SharePointOnline.CSOM -Version 16.1.3912.1204
Install-Package SharePointPnP.IdentityModel.Extensions -Version 1.2.2
Install-Package SharePointPnPCoreOnline -Version 2.19.1710.2<\/em><\/p>\n\n\n\n

Setup of the Web API Service<\/h2>\n\n\n\n

Add an empty Web API 2 Controller to the project.<\/p>\n\n\n\n

\"Ading
Ading an empty Web API 2 Controller<\/em><\/figcaption><\/figure>\n\n\n\n

Then add the \u201cregister\u201d method below to this controller. This is intended as a starting point in the authentication process.<\/p>\n\n\n\n

\"\"
Adding the \u201cregister\u201d method to the controller<\/em><\/figcaption><\/figure>\n\n\n\n

This “register” method must be called when the user starts the SharePoint app.
From a WebForms project this can be done as follows:<\/p>\n\n\n\n

\"\"
Register web service from a WebForms project<\/em><\/figcaption><\/figure>\n\n\n\n

Or, if you are working in an MVC project:<\/p>\n\n\n\n

\"\"
Register web service from an MVC project<\/em><\/figcaption><\/figure>\n\n\n\n

This is what happens behind the scenes when the “register” method is called:
1. The cache key is retrieved. This is a unique string for the combination of user, publisher username, SharePoint app, and SharePoint farm or SharePoint Online tenant.
2. A cookie with the name “service token” and the value of the cache key is added to the response page.
3. The context token, client ID, client secret, host web url and app web url are retrieved and used as input to call the “register” method.
4. The “register” Web API method calls the AddToCache method which requests an access token for the provided input. The supplied input, the requested access token and the associated refresh token are cached.<\/p>\n\n\n\n

The web service can be called using clientside JavaScript as follows:<\/p>\n\n\n\n

\"\"
Calling web service with clientside javascript<\/em><\/figcaption><\/figure>\n\n\n\n

The above call results in calling the Web API service. The following code can then be used in the service to “re-instantiate” the ClientContext of the calling user and thus perform actions on SharePoint:<\/p>\n\n\n\n

\"\"
Reinstantiate SharePoint ClientContext in the Web API<\/em><\/figcaption><\/figure>\n\n\n\n

This is what happens behind the scenes when the GetClientContext method is called:
1. The cache key is retrieved from the \u201cservice token\u201d cookie.
2. The access token is retrieved from the cache with the cache key.
3. If the access token has expired, the refresh token is used to obtain a new access token.
4. A SharePoint ClientContext object is created using the access token.<\/p>\n\n\n\n

Authorized web service calls<\/h2>\n\n\n\n

The cookie issued during registration of the Web API service is used to authorize the calling user: without the appropriate cookie, the user is not authorized to call the service. This is done by a custom ActionFilterAttribute implementation:<\/p>\n\n\n\n

\"\"
Behind the scenes: the ActionFilterAttribute<\/em><\/figcaption><\/figure>\n\n\n\n

This makes it possible to simply \u201cdecorate\u201d the methods and\/or classes you want to protect in the Web API with the WebAPIContextFilter attribute, such as this class:<\/p>\n\n\n\n

\"\"
Apply WebAPIContextFilter attribute to class<\/em><\/figcaption><\/figure>\n\n\n\n

Or like this method for example:<\/p>\n\n\n\n

\"\"
Apply WebAPIContextFilter attribute to method<\/em><\/figcaption><\/figure>\n\n\n\n

The result of unauthorized calls is the following message in the response:<\/p>\n\n\n\n

“Service requestor is not registered: access denied”.<\/em><\/strong><\/p>\n\n\n\n

Cross domain calls<\/h2>\n\n\n\n

In my situation it was not necessary to make cross domain calls, but if you want to do that, this is also possible. See this site for more information: https:\/\/github.com\/SharePoint\/PnP\/tree\/master\/Samples\/Core.Services.Authenticate<\/a><\/p>\n\n\n\n

HostedAppHostNameOverride in web.config<\/h2>\n\n\n\n

The WebApiHelper.AddToCache method authenticates the user to SharePoint.
For this to work, it is not sufficient to only have the ClientId and ClientSecret as app settings in the web.config. The HostedAppHostNameOverride setting containing the hostname of the app is also important:<\/p>\n\n\n\n

\"\"
Required settings in MVC application with HostedAppHostNameOverride<\/em><\/figcaption><\/figure>\n\n\n\n

If you do not do this, you will receive the following error message when starting your app:
“rd00155d516979” is not the intended audience “58471cbd-4d01-4567-92a1-c1adca8656b1\/spapp.mydomain.com@946d293d-00c0-43c1-9c20-e0e0314fd8d3”<\/em>
The TokenHelper.ReadAndValidateContextToken function needs this setting to validate the audience.<\/p>\n\n\n\n

Finally<\/h2>\n\n\n\n

In the manner described above, it is possible to securely call a Web API web service from a provider hosted app (MVC application) on pages with client-side code (javascript).<\/p>\n\n\n\n

<\/p>\n\n\n\n

References<\/h2>\n\n\n\n

https:\/\/sharepoint.stackexchange.com\/questions\/201378\/pass-authentication-from-provider-hosted-add-in-to-external-web-service<\/a>
https:\/\/github.com\/SharePoint\/PnP\/tree\/master\/Samples\/Core.Services.Authenticate<\/a>
https:\/\/ypcode.wordpress.com\/2017\/12\/29\/sharepoint-add-in-custom-web-api-and-spfx<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

During a job I came across the following requirement:
\nBeing able to call a web service in a secure manner from a provider hosted app (MVC application) on pages with client-side code (JavaScript).
\nI will elaborate on the implementation in this blog post.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[25],"tags":[],"class_list":["post-3643","post","type-post","status-publish","format-standard","category-sharepoint","entry","has-post-thumbnail"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/posts\/3643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wspelt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3643"}],"version-history":[{"count":8,"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/posts\/3643\/revisions"}],"predecessor-version":[{"id":3661,"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/posts\/3643\/revisions\/3661"}],"wp:attachment":[{"href":"https:\/\/wspelt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wspelt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wspelt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}