Create Provider Hosted App in SharePoint 2013 Online with Azure Hosting Model

Create Provider Hosted App in SharePoint 2013 Online with Azure Hosting Model

For better understand lets divide as steps as below.

1. Creating website in windows azure and downloading the azure profile.

2. Developing SharePoint provider hosted app in visual studio.

3. Generating Client Id and Client Secret in SharePoint Online Site.

4. Publishing the Provided hosted App web site in to azure.

5. Publishing/Uploading the app in SharePoint online appcatalog.

6. Install and Run the App.

1. Creating website in windows azure and downloading the azure profile.

if you don't have account please go through below link to sign up.

Azure Sign up: http://sp77.blogspot.com/2015/10/sign-up-for-microsoft-azure-free-one_28.html

Log in https://manage.windowsazure.com/ and follow below steps to create website.

Click "CREATE A WEB APP" in "WEB APPS" section.

Go to COMPUTER -> WEB APP -> QUICK CREATE -> enter unique name (providerhostedapp2)
-> click on "CREATE WEB APP" button to create web app.

"providerhostedapp2" Web app got created. and click on "providerhostedapp2" link to download the public profile.

Click on 'Download the public profile' from 'Publish your app' section. this profile will use next step to publish web app into azure.

2. Developing SharePoint provider hosted app in visual studio.

Visual studio 2012 -> File -> new -> project -> installed -> templates -> visual c# -> office/SharePoint -> apps -> apps for SharePoint -> name 'ProviderHostAppAzure'.

Select 'Provider-hosted' option.

Enter credentials to login.

Select 'SharePoint Online'.

Select 'ASP.NET Web Forms Application' option.

Select Azure ACS Authentication.

3. Generating Client Id and Client Secret in SharePoint Online Site.

Go to https://sitename/_layouts/15/appregnew.aspx to create 'Client Id', 'Client Secret'.

App Domain: http://providerhostedapp2.azurewebsites.net/ -> invalid url

                       providerhostedapp2.azurewebsites.net -> valid url (remove 'http://' and '/' in url).

Redirect URL:http://providerhostedapp2.azurewebsites.net/pages/Default.aspx -> Invalid

                        https://providerhostedapp2.azurewebsites.net/pages/Default.aspx ->add 'https' in URL.

Redirected URL: It help to redirect to WEB APP site when click on 'APP' from SharePoint.

Click 'Create' button to generate 'Client Id' and 'Client Secret'.

Here we can see created 'Client Id' and 'Client Secret'. 

'ProviderHostAppAzure' Solution -> 'ProviderHostAppAzure' -> double click 'AppManifest.xml'.

Go to 'Permissions' tab and add 'Web' scope and give 'FillControl' Permission.

'ProviderHostAppAzure' Solution -> 'ProviderHostAppAzure' -> double click 'AppManifest.xml' -> Click 'F7' to view code and update ClientId.

Go to 'ProviderHostAppAzure' Solution -> 'ProviderHostAppAzureWeb' -> Open 'Web.config' and add 'Client Id' and 'Client Secret' in 'AppSettings' section.

4. Publishing the Provided hosted App web site in to azure

Go to 'ProviderHostAppAzure' Solution ->  'ProviderHostAppAzureWeb'  -> right click and click 'Publish'.

Click 'Import'.

Browse '.PublishSettings'  file which is download from Azure site.

Click 'Validate Connection' to validate connection and click 'Next' button.

Go to 'ProviderHostAppAzure' Solution -> right click 'ProviderHostAppAzure' -> click 'Pblish'.

Click 'Edit' Button to enter 'Client Id' and 'Client Secret'.

Click 'Package the app' to package app.

add 'https' in url. this url for entry point for provided hosted app.

5. Publishing/Uploading the app in SharePoint Online appcatalog.

Upload app into 'Apps for SharePoint' Library in 'AppCatalog' site.

6. Install and Run the App.

Go to any site where we want add this app.

Search with app name in search box to find app.

Trust app to install into SharePoint.

App installed successfully.

Click on 'App' to open. once click on app it will be redirect to app home page.

Thank You.