A simple SSO unified login design

Preface

With the development of the company , There are more and more backstage systems in the company , More and more login verification operations are required . Different account systems , Unrestricted password management has also become a problem . To solve these problems , The login management of the company needs to be unified , Use the same set of account password system , And restrict the security control of passwords .

So the need for single sign on becomes very realistic . Single sign on -Single Sign On, abbreviation SSO. It can be understood as ： A login , Log in everywhere

Take our company for example ： The domain name of the internal system is wwdz.com, The goal of designing single sign on is , Just log in to one of the systems  a.wwdz.com Then open other systems that access single sign on , such as b.wwdz.com, You can get user information directly , No need to enter the account password again

SSO technological process

Specific steps ： It is assumed that it is the first time to visit ：

1 Users access... Through a browser http://A.wwdz.com/some/page

2 Browser to system A Send a request

3 This is the first time to access the system A, System A The login status of the user is not detected （cookie session When I can't find ）. Think it's not logged in . here A The system initiates a browser redirection , Let the browser jump to unified login and redirectUrl The parameter is set to user access A System time url, Form like ：​ ​http://sso.wwdz.com/login?redirectUrl=http://A.wwdz.com/some/page​​​

4 Browser received A Systematic 302 Jump , visit http://sso.wwdz.com/login?redirectUrl=http://A.wwdz.com/some/page

5 This is the first visit SSO, alike SSO The login status of the user is not detected , At this time, according to the browser request , return SSO Of login page （ The page is a simple form , Used to submit user account and password ）.

6 The user enters the account password according to the prompt on the page , And submit .

7 SSO Receive data for verification ：     User account password verification failed , Login not allowed      User account password verification passed , be ：

• For it is in SSO Server creation session

• Issue token（JWT Format ）, And in payload Specify expiration time and other information in .

• Notify the browser to redirect , The goal is the system A, And put token As url Parameters are passed perhaps take token write in cookie in （*.wwdz.com Authorization）

8 The browser gets SSO Of 302 return , The request at this time contains token perhaps stay cookie There is token Value .

9 The browser carries token visit A System .

10 A The system obtains token.

11 A The system will token write in Header Authorization in request SSO Of attach/vaild The interface has verified the token Whether it is right .

12 SSO receive A System request , check token.token Possible problems are ：

Log in and copy

      
      

       
       token Be overdue 
       
       
 User in use , Password change 
       
       
token Can't decode 
       
       
 User locked 
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
      
      

If token There is a problem , Then the corresponding error status code is returned if token Does not conform to the above status , Then the user information is returned to the system A system

13 System A according to SSO The returned information handles the user's initial request

14 The browser to A The system returns to the page for display . The above process is the first time a user logs in .

If the user has logged in to the system A, Need to access the system B, The only difference is 5 Step . According to the above logic , Sign in A The system must log in SSO, So log in to the system B The process of ,1-4 The process in the step remains unchanged （ Just what will be requested Url Switch to http://B.wwdz.com/some/page）, Just in the 5 When you walk , No longer need SSO Return to the user login page, but directly generate according to the user information token And assemble URL Redirect to browser , That is the first. 8 Step . The rest of the process remains unchanged .

That's how it works SSO Login process for .

Nail scanning code login

But with the improvement of various password security rules and regulations , Our company has made certain requirements for the life cycle and strength of user passwords , This leads to a very embarrassing problem ： Some students designed a super complex password …… Forget your password . Although the password reset function is provided , But you can't always reset your password when you need it （ Although this method will improve the password update frequency , It's a good way for safety , But it still affects work efficiency ）, So now SSO Add nail scanning code login function on the basis of

The logic of nail scanning code login is not very complicated , Nailing provides a very detailed document to describe this operation .

Create in nailing open platform Mobile access applications And in Sign in Created in Scan code login application authorization , Specify the corresponding callback address 、appId、 appSecret Etc .

Introduce nailed on the landing page js file , And set the callback address and other information .

After the user scans the code and clicks confirm on the mobile phone ,js Will get loginTmpCode Return to the set callback address

Call back to the server to get loginTmpCode Post structure corresponding url Jump to nailing server

If the nailing server call succeeds , will 302 Jump to goto Parameter specified redirect_uri, And to url Add temporary authorization code to the parameter code And state Parameters .

Call the pin interface to obtain the personal information of the authorized user .

Compare your personal information with SSO Realize password free login by associating the information in .

One click login

however , as time goes on , Another classmate said that scanning code to log in still needs to pull out the mobile phone , inconvenient , So I came up with the idea of one click login .

We are using QQ You may notice ： When users use QQ After the client , When using the browser to access some login pages of Tencent , Login page will get QQ Information , The login page will become QQ One click login . To realize such a one click login, you need to be a client , client listen A local port . The browser requests this local port to obtain user information when accessing unified login , And then realize the function of one click login .

however , This idea is not just about one click login , It's also because VPN It is inconvenient to install and use the client （ This is another topic ）.

In order to achieve this function , First of all, we need to transform SSO The login page . You need to assume a native interface that requests user information .

By default, one click login is not displayed . But if this interface is connected , Then hide the original login interface , Prompt directly for one click login , And obtain the corresponding user authentication information from the interface （username passwd）. Here's what you added to SSO In the landing page js Code .

Log in and copy

      
      

       
       $(document).ready(function(){
       
       
   document.getElementById('autologin').style.display='none'
       
       
   $.get("http://127.0.0.1:xxxx",function(data,status){
       
       
   let datas = data.split(' ')
       
       
   let username = datas[0]
       
       
   let passwd = datas[1]
       
       
   console.log("username = " + username)
       
       
   console.log("passwd = " + passwd)
       
       
   document.getElementById('login').style.display='none'
       
       
   document.getElementById('autologin').style.display=''
       
       
   document.getElementById('autousername').value=username
       
       
   document.getElementById('autopasswd').value=passwd
       
       
   });
       
       
});
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
       
       
13.
       
       
14.
      
      

Then create the client , The specific logic can be written again , Let's talk about the implementation plan .

Because the company uses MAC and win There are many , Therefore, it is necessary to develop a set of cross platform solutions that are easy to expand . In the end I chose Electron.

In my understanding ,Electron It can be seen as using a browser with certain restrictions GUI cross-platform APP Solution .

Started this client app after , It will listen to the specified port of the machine , Once accessed, the corresponding account information will be returned （ Only after the user logs in and starts one click login can he listen ）, In this way, it can be compared with the transformed SSO Login page for adaptation , The effect is as follows

Client effect （ Because it is an embedded browser , The basic interface is with SSO The landing page maintains a style ,vpn The client function will be discussed later ）

SSO The effect of unified login after detecting one click login

Click one button to login , The page will automatically send authentication information to SSO, The process has not changed at all .

The END

​

​