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.

Sign up for Microsoft Azure free one-month trial

Sign up for Microsoft Azure free one-month trial

Before Sign up please go through below link to and read FAQ get idea. And remember I didn’t not find "How to delete Credit Card information from Azure site after one month trial end". So please beware before Sing up.

https://azure.microsoft.com/en-us/pricing/free-trial/

https://azure.microsoft.com/en-us/pricing/free-trial-faq/

Enter required information and click 'Sign up' button.

Click 'Start managing my service'.

Click on 'Portal (right arrow mark)'.

Please go through below wizard.

Click on 'WEB APPS' link to create web app.

Click on 'CREATE A WEB APP' button to create web app.

Here we can create web app using either 'QUICK CREATE' or 'CUSTOM CREATE'.

Please enter required information and click on tick mark to say OK.

Finally web app got create. Here we can see.

Thank You.

SharePoint 2013 Use the cross-domain library in a tenant-scoped app (REST)

SharePoint 2013 Use the cross-domain library in a tenant-scoped app (REST)

Step1: vs2012 -> file -> new -> project.

Step2: templates -> visual c# -> office/sharepoint -> app -> app for sharepoint -> name (CrossDomainTenantScopeREST)

 Step3: CrossDomainTenantScopeREST -> Scripts -> right click -> add -> new item -> Visual C# items -> web -> javascript file -> Name (CrossDomainExec.js)

Open CrossDomainExec.js file and add below script

--------------------------------------------------------------------

var hostweburl;

var appweburl; 

$(document).ready(function () {

    hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));

    appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

    var scriptbase = hostweburl + "/_layouts/15/";

    $.getScript("/_layouts/15/SP.RequestExecutor.js");

}); 

function execCrossDomainRequest() {

    var executor;

    executor = new SP.RequestExecutor(appweburl);

    executor.executeAsync(

        {

            url: appweburl + "/_api/SP.AppContextSite(@target)/web?@target='" + document.getElementById("sitecoll1").value + "'",

            method: "GET",

            headers: { "Accept": "application/json; odata=verbose" },

            success: successHandler,

            error: errorHandler

        }

    );

} 

function successHandler(data) {

    document.getElementById("WebTitles").innerHTML = "";

    var jsonObject = JSON.parse(data.body);

    var oli = document.createElement("li");

    oli.innerText = jsonObject.d.Title + " (" + jsonObject.d.Url + ")";

    document.getElementById("WebTitles").appendChild(oli);

}

function errorHandler(data, errorCode, errorMessage) { 

    var oli = document.createElement("li");

    oli.innerText = "Could not complete cross-domain call: " + errorMessage;

    document.getElementById("WebTitles").appendChild(oli);

} 

function getQueryStringParameter(paramToRetrieve) {

    var params = document.URL.split("?")[1].split("&");

    var strParams = "";

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split("=");

        if (singleParam[0] == paramToRetrieve)

            return singleParam[1];

    }

}

--------------------------------------------------------------------

Step4:

CrossDomainTenantScopeREST -> pages -> default.aspx

--------------------------------------------------------------------

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %> 

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>

    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <meta name="WebPartPageExpansion" content="full" />

    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <script type="text/javascript" src="../Scripts/App.js"></script>

    <script type="text/javascript" src="../Scripts/CrossDomainExec.js"></script>

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">

    Page Title

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>

        <p id="message">

            initializing...

        </p>

    </div>

    <br />

    <p>

        Site collection 1:&nbsp;<input id="sitecoll1" type="text" style="width: 400px;" />

        <br />

        <input value="Go" type="button" onclick="execCrossDomainRequest();" />

    </p>

    Web titles:<br />

    <ul id="WebTitles"></ul>

</asp:Content>

--------------------------------------------------------------------

Step5: deploy (F5)

App gives below error message. because app don't have permission to read site collection data.

Step6: To privide permission to app, go to CrossDomainTenantScopeREST -> AppManifest.xml (double click) -> permissions ->

Scope: Tenant

Permission: Read

and deploy (F5) now again.

 
Thank You.