Building and Publishing an App to Open Your SharePoint Online Portal as Single Sign-On (SSO) Without Writing Code to Microsoft Teams App

Yunus Emre Araç
6 min readApr 5, 2023

--

Reference: https://www.yunusemrearac.com/2023/02/21/microsoft-teams-uygulamasina-kod-yazmadan-sharepoint-online-portalinizi-single-sign-on-sso-olacak-sekilde-acacak-app-yapmak-ve-yayinlamak/

Hello friends, today I will tell you how you can make teams app and publish this application, which will enable you to use the Microsoft Teams application by connecting to your sharepoint online portal as SSO without writing code.

For this, we first go to our developer portal site for teams applications with our admin account at https://dev.teams.microsoft.com/home.

Here, if there are applications you have made before or if you are going to make a new application, we enter the “Apps” tab in the left menu.

If an application was added before, your applications would be listed here. I can’t find any app because I don’t have an app. Since we will create a new project here, you can start creating our new application by clicking the “Create your first app” button on the screen or by pressing the “New app” button on the top menu.

Here, by opening a popup in the middle of the screen, it asks us to enter a name for the application we will create. Here I am creating my project with the “Add” button by putting the name of my application as “SharePointPortal”.

When the detail page of our application is opened, we fill in the mandatory fields in the “Basic information” section and save it.

Here, if you want to set an authorization entry at a different authority level, you can integrate it with an app you created on Azure Active Directory using “Application (client) ID”. Since I will not provide an integration here, I wrote the app ID information of the application at the top.

In the “Branding” section on the next tab, we can adjust the UI color and icons of our application. Here I left it as default and continued. You can also change them later.

We come to the next tab, the “App features” tab, and we come to the place where we do the actual Sharepoint online configuration. Here we go to the add screen by clicking on the “Personal app” option in the first row.

On the screen that opens, if you are creating it for the first time, you can add a new one from the “Create your first app” section or from the “Add a personal app” option in the top menu.

In the popup section that will open here, you can write the name in the tab of your application where it says “Name”. You can write your sharepoint portal address in the section that says “Website URL”. Here, the part that will help you to do the actual SSO process and you will need to write it with the correct setup will be the “Content URL” field. If it is necessary to give an example setup for this area:

Assuming your example SharePoint online site address is https://xxx.sharepoint.com/sites/portal

Our variables will be as above and our formula according to this variable table is as follows.

{{siteUrl}}/_layouts/15/teamslogon.aspx?SPFX=true&dest={{sitePath}}

According to the formula above, after you write the url address in accordance with your own SharePoint application, you write it in this field and add it with the “Confirm” button.

We save our setting added as a Personal app with the “Save” button at the bottom. Apart from that, it’s up to you to update other application features of your choice such as language, application owner, variables.

After making the settings I mentioned above, you can go to the “Publish to org” section under “Publish” on the left menu, use the “Publish your app” button or share your application with the “Publish” button on the upper right, or click the “Preview in Teams” button. You can also view it in your own teams application.

If you use the “Publish” button on the top right, it will offer you options to share your application in 3 different directions with a popup.

After publishing, we will need to approve our application on https://admin.teams.microsoft.com/.

Here, we click on “Manage apps” under “Teams apps” in the left menu and come to the application management screen. Here, you will see that one of our applications is waiting for approval at the top. In the applications in the “All apps” tab at the bottom, we find our application by typing our application name on the right and go to the details by clicking on its name.

When we go into the details of our application, a “Publish” button comes with the warning that an action is waiting on the bottom right of the card information. Click here to publish our application.

In the meantime, of course, since it is a custom application, it will receive confirmation with a popup whether to publish it or not. We complete the publishing process of our application by clicking the “Publish” button.

At the next stage, we log in to your teams application, either in the teams application or by entering https://teams.microsoft.com/.

You can search for your application with the application name in the search section by clicking on the “Apps” option in the left menu.

You can add the application with the “Add” button on the popup application screen.

Or, as another option to add, you can add your application by searching for your application name on the popup screen that opens by clicking the three dots on the left menu in the teams application.

This application will be found and added by all users in your organization.

After completing the adding process, your application has come to the left menu in your teams with your icon and application name, and you can see your sharepoint online site as you are logged in with the user you log in to the teams application 🙂

--

--

Yunus Emre Araç
Yunus Emre Araç

Written by Yunus Emre Araç

System Architect of Corporate Applications at ING | Old Microsoft Student Partners Lead | İnönü Üniv. Bilg. Müh. | İAU Bilg. Müh. Tezli Yüksek Lisans

No responses yet