Social connect Module for Dxa - Internals - Part 2

Social connect Module was developed using Microsoft's OWIN implementation, which actually make it easy to write code.

Nuget packages

 <package id="Microsoft.Owin" version="3.0.1" targetFramework="net45" />  
  <package id="Microsoft.Owin.Host.SystemWeb" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security.Cookies" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security.Facebook" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security.Google" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security.OAuth" version="2.1.0" targetFramework="net45" />

Startup.cs
This is most important file of the module. it plugs the module in mvc lifecycle to ensure user is logged in and prompt whenever required for login.

 [assembly: OwinStartup(typeof(Sdl.Web.Modules.Social.Startup))]  

startup.cs has method ConfigureAuth which has responsibility to Register Social networks and add required claims to be returned by the respective social network.

upto now, no Dxa involvement was required but now will start integrating Dxa step by step.

SocialController :
This controller acts as main interaction of the system. it triggers following as per the Component template of the module

• Show the Social network options to user
• Trigger required social network to prompt for credentials
• Receive token from Social network to validate it & Read the claims and show log out options.
• Log outs from system

for above 4 set of activities we need different Component templates.

For last three activities three different pages have been created so that only specified activity is triggered as per the need of user. First activity is part of Header page.

If you need to retrieve authentication status or User information following can be used.

• Request.IsAuthenticated
• User.Identity.GetUserName()

Packaging an SDL DXA Custom Module

SDL has provided good API's to develop an DXA module. I have recently published two modules

• JwPlayer Module
• Social Connect/Login Module (updated)

Though creation of module is of medium complexity but packaging of module is also not easy. so i had hard time initially packaging a module. 

Packaging essentially means providing CMS and CD part in one zip file with respective power-shell scripts to automate the installation on CMS(via calling core Service) and deploying the necessary files on the website. 

CM Part- CM part is where building blocks along with required components, content porter package is created. it has three parts

•  Import Export folder - Where SDL provided Dlls and powershell scripts are kept which helps in importing the module.
• Content Porter Package -  To Export content porter package
• Do not select dependencies
• Select all required component and pages at website publication only, with setting select folder and all children. in this way only small package with required items will be created.
• Custom Export Power shell script - 
• Download some existing DXA module
• Take script of that
• and do required modifications

CD Part - 

• Copy your Area and respective views
• Copy required dll into Bin folder
• Use existing power-shell script from some module
• if you have custom setting like. web.config to update etc. then write the required power-shell script. refer my social login module for that. 

now try above and zip it for delivery.

Social connect module for DXA - Part 1

 recently published Social Connect module for Digital Experience Accelerator. which extends Dxa to login using social network.

Currently this module supports two social networks

• Facebook
• Google Plus

but i will try to add Twitter and linked-in later.

After installing this module you will find login link on your Dxa menu.

 

After click on the Login link you should find below option to select.

After clicking on above e.g Facebook. Facebook will ask for Credentials to enter. after successfully validating. Facebook will return back to Dxa application with token and other details in form of claims. 

Custom modules will receive inputs from the Facebook and accordingly update the UI with logged in name and logout link.

Similarly when after clicking on Google, it will take you to Google login and ask for credentials and OTP. and take back to application with claims. claims are processed and use is logged in.

To achieve above there are few settings to be done at Facebook and Google console where return URL etc are returned

Google requires to create credentials at https://console.developers.google.com

• Create Auth 2.0 Client-id
• Give it a name, 
• Mention Return URL of your application, which will receive the token after successfully authenticated by Google.
• for Google default URL will always be http://your-domain/signin-google.
• 
  

I tried to have other endpoint as well but did not work for me so i kept default Url for my testing.

Similarly for Facebook you have to create new App and provide your site's Domain and URL. it will also redirect on your siteurl on a default page with name: /signin-facebook again Owin automatically intercept this and accordingly validate the token and proceed to next steps.