Implement Single Sign On

13 min

follow the links below for provider setup based on your single sign on requirement integration setup guides docid 29lgyvegl5fcp4bajqujv pathfix keys docid\ i5bp9dypntquakv2r8mbh use case i already have a web app and login functionality and would like to add an ability for my users to login using their existing identities in application like google, facebook etc once implemented i would like to map the my internal userid to the user's publicly shared emailid the external identity provider will give me the publicly shared emailid assumptions the document assumes that the login flow involves 3 pages they have been separated for ease of understanding the implementation process feel free to club the logic based on your implementation login (referred to as login page url) session validator (referred to as session validator page url) home (referred to as login page url) login page add the $pinc onload with render function $pinc onload() { //pathfix library is ready, are you ) //$pincj is a no conflict reference to jquery library 	 $pinc events on("$pinc auth", "ready", () => { //bind to loggedout event of the $pinc ui auth module $pinc events on("$pinc ui auth", "loggedout", () => { //invoke the render $pinc ui auth render($pincj(" login div")) }); //bind to logged in event $pinc ui auth module $pinc events on("$pinc ui auth", "loggedin", () => { console log($pinc auth profile) }); }); function $pinc getuserid(){ return $pinc auth profile email; } } add the pathfix helper script the modules loaded here are pinc auth min and ui auth to learn more about module dependencies go module dependencies docid\ gkqxdtqhnni hyiv4cxbk data user id this property is not used by the pinc auth module the module assumes an anonymous user at this stage add the login container to your \<body> add a div with a class name or id and where you want the login buttons to be rendered all together session validator page add the $pinc onload without render the session validator page is used as an intermediate page to either send the user to the home page or back to login this page is usually merged with the home page to avoid too many redirects we have included it in this document for clarity in understanding function $pinc onload() { //pathfix libraries are loaded //$pincj is a no conflict reference to jquery library 	 $pinc events on("$pinc auth", "ready", () => { //bind to logged out event handler $pinc events on("$pinc ui auth", "loggedout", () => { sessioncheck() }); //bind to logged in event handler $pinc events on("$pinc ui auth", "loggedin", () => { 	 //code to send any additional information about the session to the server console log($pinc auth profile) 	 //redirect to home page alert(`welcome back ${$pinc auth profile firstname} sending you to home page `) }); }); } function sessioncheck(){ 	//check if you have any other form of session 	//if not then send the user back to the login page 	alert("no active session, redirecting to login page ") } add the script tag all together home page the home page is the landing page for your user once they are logged in successfully add the $pinc onload without render function $pinc onload() { //pathfix libraries are loaded //$pincj is a no conflict reference to jquery library 	 $pinc events on("$pinc auth", "ready", () => { //bind to logged out event handler $pinc events on("$pinc ui auth", "loggedout", () => { sessioncheck() }); //bind to logged in event handler $pinc events on("$pinc ui auth", "loggedin", () => { console log($pinc auth profile) 	 //redirect to home page alert(`welcome back ${$pinc auth profile firstname} sending you to home page `) }); }); } function sessioncheck(){ 	//check if you have any other form of session 	//if not then send the user back to the login page 	alert("no active session, redirecting to login page ") } function $pinc signout(){ 	//the function name can be anything $pinc auth signout(() => { sessioncheck(); }); } function $pinc getuserid(){ //returning email but this doesn't have to necessarily be the email //you can return your own internal userid //the value of data user id is not used by the identity module return $pinc auth profile email; } add the script tag

Step-by-Step

Creating Custom OAuth Button