Summary of ways to implement single sign-on in Vue

The project has been suspended recently, and the study of RageFrame has come to a temporary end. In this article, I will share with you the relevant knowledge about single sign-on and provide some demos for your reference. I hope it will be helpful to those who want to know more.

Without further ado, let's talk about the principle first (reference address: https://www.jianshu.com/p/613e44d4a464)

To put it simply, Single Sign On (SSO) means that in an environment where multiple systems coexist, after a user logs in at one place, he does not need to log in at other systems. In other words, the user's one login can be trusted by all other systems. Single sign-on is frequently used in large websites, such as Alibaba. Behind the website are hundreds or even thousands of subsystems. A single operation or transaction by a user may involve the collaboration of dozens of subsystems. If each subsystem requires user authentication, not only will the user go crazy, but each subsystem will also go crazy due to the logic of repeated authentication and authorization. To achieve single sign-on, the key is to solve the problem of how to generate and store the trust, and then how other systems can verify the validity of the trust. Therefore, the key points are the following two:

• Storage Trust
• Verify Trust

If a system achieves the effect mentioned at the beginning, it is considered single sign-on. There are different ways to implement single sign-on. This article lists the implementation methods I have encountered during development.

Method 1: Using Cookie as Credential Medium

The simplest way to implement single sign-on is to use cookies as a medium to store user credentials.
After the user logs in to the parent application, the application returns an encrypted cookie. When the user accesses the child application, he/she carries this cookie and authorizes the application to decrypt the cookie and verify it. If the verification passes, the current user is logged in.

Auth via cookies

It is not difficult to find that the above method stores trust in the client's Cookie, which is very questionable:

• Cookies are not secure
• Cannot implement cross-domain free login

For the first question, security can be guaranteed by encrypting cookies, of course, this is under the premise that the source code is not leaked. If the encryption algorithm of the cookie is leaked, an attacker can forge the identity of a specific user by forging the cookie, which is very dangerous.
As for the second question, it is even more problematic.

Method 2: Implemented via JSONP

For cross-domain issues, JSONP can be used.
After the user logs in to the parent application, the cookie matching the session will be stored in the client. When the user needs to log in to the child application, the authorized application accesses the JSONP interface provided by the parent application and brings the cookie under the parent application domain name in the request. The parent application receives the request, verifies the user's login status, and returns encrypted information. The child application verifies the user by parsing the returned encrypted information. If the verification is successful, the user is logged in.

Although Auth via jsonp can solve the cross-domain problem, its security is actually similar to storing trust in Cookie. If the encryption algorithm is leaked, the attacker can set up a fake parent application that implements the login interface locally, bind the host to direct the requests initiated by the child application to the local fake parent application, and respond.
Because the attacker can forge a response request according to the encryption algorithm, the sub-application can still pass the verification and log in the specific user after receiving the response.

Method 3: Through page redirection The last method introduced is to communicate between the parent application and the child application through redirection back and forth to achieve secure transmission of information.
The parent application provides a GET login interface. Users access this interface through the child application redirection connection. If the user has not logged in, a login page is returned and the user enters the account and password to log in. If the user has logged in, an encrypted Token is generated and redirected to the Token verification interface provided by the sub-application. After decryption and verification, the sub-application logs in the current user.

Auth via redirect solves the security and cross-domain issues exposed by the previous two methods, but it is not as convenient as the previous two methods.
Safety and convenience are inherently contradictory.

Method 4: Use an independent login system. Generally speaking, large applications will separate the authorization logic and the user information related logic into an independent application, called a user center.
The user center does not handle business logic, but only manages user information and authorizes third-party applications. When a third-party application needs to log in, the user's login request is forwarded to the user center for processing. After the user completes the processing, the credential is returned. The third-party application verifies the credential and logs in the user if it passes.

The above is the mode and principle of single sign-on that I know. The following is the actual code for you. Here I list two situations, explain them by category and provide you with my corresponding demo (the following theory refers to https://www.jb51.net/article/98228.htm) Environment 1: a.xxx.com needs to achieve cross-domain with b.xxx.com. This is relatively simple. You only need to set the domain name of the cookie to associate the domain cookie.Domain = "xxx.com". In this way, the cookies between the two domain names can access each other and achieve cross-domain.

Demo address display:

System 1: sso1.linheng.xyz

System 2: sso2.linheng.xyz

Vue specific code:

First enter the command to install js-cookie

npm i js-cookie -S

Then write the login page

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="handleLogin">Click to log in</button>
    <button @click="rethome">Return to home page</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
export default {
  name: 'home',
  data () {
    return {
      msg: 'System 1 login page'
    }
  },
  methods: {
        handleLogin() {
        var token = this.randomString();
        Cookies.set('app.token',token, { expires: 1000, path: '/', domain: '.**.com' })//Change your website root directory hereCookies.set('app.loginname','System 1', { expires: 1000, path: '/', domain: '.**.com' })//Change your website root directory herethis.$router.push("/");
    },
    return(){
      this.$router.push("/");
    },
    randomString(e) {
        e = e || 32;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = t.length,
        n = "";
        for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        return n
    }
    }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Next is the homepage:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>User information: {{token}}</h3>
    <h3>Login location: {{loginname}}</h3>
    <button @click="logout">Logout</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
 
export default {
  name: 'home',
  data () {
    return {
      msg: 'System 1 main page',
      token:'',
      loginname:''
    }
  },
  mounted(){
    const token = Cookies.get('app.token');
    this.token = token;
    const loginname = Cookies.get('app.loginname');
    this.loginname = loginname;
    console.log(token);
    if(!token){
      this.$router.push("/login");
    }
  },
  methods: {
    logout(){
         Cookies.set('app.token','', { expires: 1000, path: '/', domain: '.**.com' })//Change your website root directory hereCookies.set('app.loginname','', { expires: 1000, path: '/', domain: '.**.com' })//Change your website root directory herethis.$router.go(0)
    }
    }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

The corresponding page of System 2 is just to move these two pages over and change the text for easier identification.

At this point, everyone has a clearer idea about this. If optimization is needed, I suggest that you unify the judgment and acquisition methods into controls, and then operate them in the router, which will be better.

Here I share my sealed control demo, click here to view the article

Environment 2: a.aaa.com needs to achieve cross-domain with b.bbb.com. In the case of different domain names, a different method must be used to achieve this.

I haven't written a demo for this yet, so I'm going to give you the most reliable ideas and demos I've found.

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

The previous flowchart is too ugly, so here is one, I hope it helps.

Collected demo source code: SSO single sign-on instructions: Create two new sites xxx-xxx.com (main site) and yyy-yyy.com (subsite), modify the hosts file, and point both domain names to 127.0.0.1.

If it is helpful to you, you are welcome to follow me. I will update the technical documentation regularly so that we can discuss and learn together and make progress together.

This concludes this article about N ways to implement single sign-on with Vue. For more relevant Vue single sign-on content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!