Front-end Vue realizes enterprise wechat code scanning login

Requirement: the enterprise wechat used by the company, PC side management background, want to log in through the enterprise wechat scanning code. Compared to the traditional account password is much more convenient. Document of enterprise wechat scanning code login process :(link)

  • Construct an independent window login QR code (not quite in line with requirements)
  • Embedded LOGIN QR code (Speaker)

Step 1: Import the JS file in index.html via the script tag

<! DOCTYPE html> <html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="renderer" content="webkit|ie-comp|ie-stand"/> <title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/default.css"/ > <! --> <script SRC ="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js"
            type="text/javascript"
        ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

Copy the code

Step 2: Sneak into the QR code on the login page

// Template requires a container to hold the QR code < el-Tab-pane label="Scan login" name="first">
    <div id="wx_qrcode"></div>
 </el-tab-pane>
 // js
    mounted() {
        window.WwLogin({
            id: 'wx_qrcode'// Container ID of the qr code displayed on the login page appID:' ', // CorpID of enterprise wechat, check agentid in enterprise wechat management terminal:' 'Redirect_uri: encodeURIComponent(URL), // Encode state is required:' ',
            href: ' ', // custom style link, only support HTTPS resource address})},Copy the code

At the beginning of the use of encode decoding, the jump was not successful, here are about two differences:

Difference between encodeURI and encodeURIComponent

  • The encodeURI change method encodeURI encodes a uniform identifier by replacing each instance of each instance of a particular character with one, two three, or escape sequences. The parameter is a complete URI and the return value is a new string, indicating that the supplied string encoded as a uniform resource Identifier does not replace reserved characters (; , /? : @ & = + $), non-escaped characters (alphanumeric – _.! ~ * ‘(), numeric symbol (#) note: EncodeURI cannot by itself produce URIs that can be applied to HTTP GET or POST requests, such as XMLHTTPRequests, because “&”, “+”, and “=” are not encoded, however they are special characters in GET and POST requests.

  • EncodeURIComponent encodeURIComponent() is a method of encoding the components of a Uniform resource Identifier (URI). It uses one to four escape sequences to represent the UTF-8 encoding of each character in the string (only characters made up of two Unicode proxy characters are encoded with four escape characters). The argument is string: The return value of the URI component is a new string encoded as part of the URI. Unescaped characters A-z a-z 0-9 – _.! ~ * ‘()

Get URL parameters

  • Native js
letHref = window.location.href // Full url pathletSearch = window.location.search // Get from? DeCodeURI (search) deCodeURI(search)let  splitIndex = url.indexOf('? ') // Return the first? Substring (splitIndex + 1) var STR = url.substring(splitIndex + 1) var STR = url.substring(splitIndex + 1) var getAllUrlParam =function(str) {
    var urlArr = str.split('&')
    var obj = {}
    for(var i = 0; i < urlArr.length; i++) {
        var arg = urlArr[i].split('=')
        obj[arg[0]] = arg[1]
    }
    return obj
}
Copy the code
  • Vue -router can be obtained by using $route

We will also redirect to the login page, and at this point the link will have a code value, which will be passed to the back end. Since we are reusing the Login component (only the routing parameters have been changed), we will not trigger the vue lifecycle in either of the following ways

 watch: {
        $route(to) {
            if(to.query.code) {this.scancodelogin (to.query.code)}},},Copy the code
BeforeRouteUpdate (ro, from, next) {beforeRouteUpdate(ro, from, next) {beforeRouteUpdate(ro, from, next) {beforeRouteUpdate(ro, from, next) { For the path /foo/:id with dynamic parameters, the component will be reused when jumping between /foo/1 and /foo/2, since the same foo component will be rendered. At this point, the hook will be called // and the component instance this} can be accessed.Copy the code