Single sign-on (SSO)

Single-sign on (SSO) settings used to configure the ability to sign in to the portal front end and portal CMS with social network accounts. For signing in to the front end using SSO, you must also add the corresponding buttons on the login page for each SSO provider you set up here.

SSO providers are configured separately for back end and front end.

To configure SSO settings

1. In CMS, go to Media > OAuth & SSO settings.
2. Select the SSO settings tab.
   
3. Next to Providers. select the  icon to add a new SSO provider or select an existing one to edit.
4. Fill in the fields as described below:
   • Authentication provider – Specifies the authentication provider for which these settings will apply. Select one of the supported authentication providers:
     •  Facebook
     •  Google
     •  Microsoft
     •  Twitter
   • CMS provider - With this switch enables, the SSO provider settings will be applied to the portal CMS. If this switch is disabled, the SSO provider settings will be applied to the portal front end (in this case, also ensure you configure SSO settings for this provider on the login page).
   • Client ID – Specifies the client ID that was registered for this SSO provider on the corresponding SSO provider site:
     • Facebook: for this SSO provider, the Xpand Portal app must be registered on this site. For more information on how to set up the Facebook app, refer to this guide or follow the steps below. For information on how to lock down your Facebook app settings, refer to this guide.
     • Google: for this SSO provider, the Xpand Portal app must be registered on this site. For more information on how to set up your Google app, refer to this guide or follow the steps below.
     • Microsoft: for this SSO provider, the Xpand Portal app must be registered on this site. For more information on how to configure your App Service app to use Microsoft Account login, see this guide or follow the steps below.
     • Twitter: for this SSO provider, the Xpand Portal app must be registered on this site. For more information on how to set up your Twitter app, refer to this guide or follow the steps below.
   • Client secret – Specifies the client secret that was registered for this SSO provider on the corresponding SSO provider site (see the Client ID setting above).
   • Icon – Specifies the image that will be used as the button to sign in with a social network that corresponds to this authentication provider. You can leave this setting empty to use the predefined icon. If this setting is also filled in on the login page, the setting on the login page will be used.
   • CSS class name – Specifies the name of the CSS (Cascading Style Sheets), which can be used to apply styles to the sign-in link of this authentication provider. This setting is optional. If this setting is also filled in on the login page, the setting on the login page will be used.
   • Other settings - Use this setting to specify additional provider settings, which might be required for your SSO provider.
5. Repeat steps 3 and 4 to add more providers. Ensure you add a pair of setting sets for each provider, one setting set for front end (the CMS provider switch is disabled) and one setting set for back end (the CMS provider switch is enabled)
6. In CMS, select Settings, and then, on the Portal Settings tab, select Reload Application.

   Important You must reload application whenever you make changes in the Media section of CMS. Otherwise, your changes may not take effect.

Facebook app registration

To register your app on Facebook, follow these steps:

1. Go to Facebook for Developers and sign in using your Facebook account or create a new one.
2. Select My Apps. 

   

3. In the window that opens, select Create App.
   
   
    
4. In the Select an app type window that opens, select the type of your app, and then select Continue.
   
5. In the opened Create an App window, fill in the required fields and select Create App.
   
6. In the window that opens, fill in the required fields, copy the client ID from the App ID field and the client secret from the App Secret field, as you will need them for further configuration of the SSO settings on Xpand Portal, and then select Save Changes.
   
7. On the navigation pane on the left, select Add Product.
   
8. In the Add a Product window, in the Facebook Login tile, select Set Up.
   
9. In the opened window, select the Web platform for your app.
   
10. On the navigation pane on the left, under Facebook Login, select Settings.
    
11. In the Client OAuth Settings window that opens, fill in the Valid OAuth Redirect URIs field with the following links, and then select Save Changes:

https://[yourportaldomain]/umbraco-facebook-signin
https://[yourportaldomain]/umbraco/Surface/Member/externallogin-facebook
where [yourportaldomain] is the domain where your Xpand Portal solution is deployed.

Google app registration

To register your app on Google, follow these steps:

1. Go to Google Cloud Platform and sign in with your Google account or create a new one.
2. Select the Select a project action.
   
3. In the Select a project window that opens, select NEW PROJECT.
   
4. In the New Project window, add the name of your app and select CREATE.
   
5. In the window that opens, on the navigation pane on the left, select OAuth consent screen.
   
6. In the OAuth consent screen window, select EDIT APP and fill in the required fields.
   
7. On the navigation pane on the left, select Credentials.
   
8. In the Credentials window, select Create Credentials.
   
9. In the drop-down menu, select OAuth Client ID.
   
10. In the Create OAuth client ID window, in the drop-down menu, select Web application.
    
11. In the Create OAuth client ID window that opens, select ADD URI under Authorised redirect URIs, add the links given below, and then select CREATE.
    https://[yourportaldomain]/umbraco-google-signin
    https://[yourportaldomain]/umbraco/Surface/Member/externallogin-google
    where [yourportaldomain] is the domain where your Xpand Portal solution is deployed.
    
12. From the OAuth client created message that appears, copy the client ID from Your Client ID field, and the client secret from Your Client Secret field, as you will need them for further configuration of the SSO settings on Xpand Portal, and then select OK.
    

Microsoft app registration

To register your app on Microsoft Azure Portal, follow these steps:

1. Go to Microsoft Azure Portal and sign in with your account or create a new one.
2. Select Azure Active Directory.
   
3. In the Overview section, under Create, select App registration and fill in the required fields.
   
4. In the window that opens, select Add a certificate or secret next to Client credentials.
    
5. In the Certificates & secrets window that opens, under Client secrets, select New client secret.
   
6. In the Add a client secret window, fill in the required fields, and then select Add.
   
7. Copy the client secret from the Value field as you will need it for further configuration of the SSO settings on Xpand Portal.
   

   Note Make sure to copy the client secret from the Value field as you will not be able to access it in future.

8. In the navigation pane on the left, select Overview and copy the client ID from the Application (Client) ID field as you will need it for further configuration of the SSO settings on Xpand Portal.
   
9. Select Add a Redirect URI next to Redirect URIs.
   
10. In the Authentication window that opens, under Platform configurations, select Add a platform.
    
11. In the Configure platforms window that appears, select Web. 
    
12. In the Configure Web window, fill in the Redirect URIs field with the values given below, and then select Configure.

https://[yourportaldomain]/umbraco-active-directory-signin
https://[yourportaldomain]/umbraco/Surface/Member/externallogin-active-directory
where [yourportaldomain] is the domain where your Xpand Portal solution is deployed.

Twitter app registration

To register your app on Twitter Developer Platform, follow these steps:

1. Go to Twitter Developer Platform, and then sign in with your Twitter Developer Account or create a new one.

   Note If you do not have a Developer Account on Twitter yet and are planning to create a new one, it may take several days to register and approve it.

2. Select Create Project, fill in the required fields, and then select Next. 
   
3. Copy the client ID from the API Key field and the client secret from the API Secret Key field as you will need them for further configuration of the SSO settings on Xpand Portal, and then select App settings.
   

   Important Make sure you copy the  API Key (Client ID) and API Secret Key (Client Secret) field values as this will be the last time you have access to them.

4. Select Edit next to Authentication Settings.
   
5. Toggle the 3-legged OAuth switch ON to enable 3-legged authentication.
   
6. Fill in the Callback URLs field with the following values:

https://[yourportaldomain]/umbraco-twitter-signin
https://[yourportaldomain]/umbraco/Surface/Member/externallogin-twitter
where [yourportaldomain] is the domain where your Xpand Portal solution is deployed.