Writing in the front

Today we record about the vue web development in the process of docking nailing H5 micro application code login function, when you say he is difficult, it is not difficult, very simple, you say he is simple, the document may really upset, otherwise you will not see my post, I also saw the other bosses to write about the record, not to say that there is a problem, It just means that few people look at the problem from the perspective of others’ development, which leads many people to feel that they still don’t understand it. So today, I will describe the problems that occur in the process of writing, so that every developer can understand it as much as possible! Thanks to the following bloggers for their support: Fill in a big empty yi – water cold

Official Document Address

The official address

  • The official website provides two ways of doing this, in different forms. You can decide which one you want to use

Plan a

  • Scheme one does not need us to write the two-dimensional code implementation process, here directly use an official link, that is, this link
https://oapi.dingtalk.com/connect/qrconnect?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIREC T_URI
Copy the code
redirect_uri
  • The first is the redirect_URI parameter, which is configured in the background. Where is it configured? See the screenshot:


  • This is going to require your administrator to go in and follow the diagram to where the configuration is, and somebody here says, what’s this address? General words write is your web login address, for example, mine is https://csdn.clearlove/#login, so you write their login address.
appid
  • This parameter is the same as above. It will be automatically generated when you click create Scan login application authorization.

Had the two parameters above, basic to ok, many bloggers and write here don’t write, so a lot of people are confused, this also not line, how to log in, the following steps is the part of the login, if you use the plan a, will find login click scan code will jump straight to a new page, and then generate a qr code, like this:



The event is bound to the following function. Click execute function and the code is as follows:

// Scan code to log in
            sweep_code() {
                window.location.href = "https://oapi.dingtalk.com/connect/qrconnect?appid=*******************&response_type=code&scope=snsapi_login&state=STATE &redirect_uri=https://csdn.clearlove/#/login"
            }
Copy the code
  • And then all we need to do is scan the code, and when we scan the code, it will call back to the address of the value of the redirect_uri parameter on your address, which is the login page, and all we need to do is get the code and state in the callback address. How do we get that?

    As shown in figure:



    – We use the following code to get the code and state in the URL
/ * * *@aim get code from url
 * @author clearlove
 * @data 19-09 * /
export default {
    getUrlKey:function(name){
        return decodeURIComponent((new RegExp('[? | &]'+name+'='+'([^ &;] +? (& # | |; | $) ').exec(location.href)||[,""[])1].replace(/\+/g.'% 20') | |null; }}Copy the code
  • Put this SECTION of JS into your tool category, and then import it on the Login page (you can also write directly to the login page, but this JS is partial to the tool class, so I suggest that you take it out separately. If you write directly to login, do not write export, and use it as a function directly. We then use the getUrlKey method to get the code directly. We do the following in our login.vue file (your login page is the page to which your callback addresses) in the Created lifecycle:
this.code = this.$utils.getUrlKey('code') // This is used to get user information for the back end
this.state = this.$utils.getUrlKey('state') // This is just for preventing attacks. You can do without this parameter. It depends on whether the backend needs this parameter
Copy the code
  • The following is to send the code as parameter to the backend, which will return the login information to you, and then you can enter the system after judging the success. In order to make you understand, I will draw a simple process:



    Above is the first kind of plan, I so write estimate all understood, still do not understand, leave a message below!

Scheme 2

Many people are confused about the implementation process of plan 2. In fact, the difference between Plan 2 and Plan 1 is that the experience is slightly better, because there is no need to jump to the page. For example, I did this:



This implementation process is actually similar, the following two cases, the first is using VUe2.0 version, the second is vue3.0 version

vue2.0

Introduce the following code directly into your index.html

<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
Copy the code

Qr code generation, and then in the login page here said, is the qr code generated after operation and the solution is the same, so I wrote when I was writing second scheme how to generate a qr code, the qr code, and code, the callback, access code, according to the code for user information, log in this series and solution exactly the same as the one by one, This is why plan 1 is so detailed, no more nonsense, after introducing the above nail js, then find a div you need to generate a TWO-DIMENSIONAL code on the page, such as this:

<div style="height: 310px; background: #ffffff" id="ding-login" v-show="isShow === 'ding'"></div>
Copy the code
  • Here I would like to clarify that v-show is ok with or without it. I provide the account login and scan code login functions, so I need to switch. V-show is used, but if you only scan code login, you will not need it at all. Next we need to use the following code in methods directly on the page:
dingLogin() {
                    this.$nextTick(() = > {
                        var obj = DDLogin({
                            id: "ding-login".goto: this.http_url,
                            style: "border:none; background-color:#FFFFFF;".width: "300".// Width of the qr code
                            height: "300" // The height of the qr code
                        })
                        // Resets the scan login box so that it is centered
                        let box = document.getElementById('ding-login')
                        box.querySelector('iframe').style.top = '0'
                        box.querySelector('iframe').style.bottom = '0'
                        box.querySelector('iframe').style.left = '0'
                        box.querySelector('iframe').style.right = '0'
                        box.querySelector('iframe').style.margin = 'auto'})},Copy the code

DingLogin this function is click scan code login call function

  • Then we implement the following code in Created:
scansettings().then(res= > {
                this.appid = res.data.appkey
                this.appSecret = res.data.appsecret
                this.redirect_uri = res.data.redirect_uri
                this.redirects = encodeURIComponent(this.redirect_uri)
                this.http_url = encodeURIComponent("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" + this.appid + "&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + this.redirects + "")
                // Obtain the scan result, and jump to obtain the temporary login code
                var handleMessage = function (event) {
                    var origin = event.origin;
                    if (origin == "https://login.dingtalk.com") {
                        var loginTmpCode = event.data;
                        let url = "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" + this.appid + "&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + this.http_url + "&loginTmpCode=" + loginTmpCode + ""
                        location.href = url
                    } else {
                        console.info(event)
                    }
                };
                if (typeof window.addEventListener ! ='undefined') {
                    window.addEventListener('message', handleMessage, false);
                } else if (typeof window.attachEvent ! ='undefined') {
                    window.attachEvent('onmessage', handleMessage);
                }
            }).catch(err= > {
                console.error(err)
            })
Copy the code

Here many people will be confused after reading, LET me briefly explain, the official source code is like this, the official source code, what is the difference? Appid and appSecret and the address redirect_URI of the callback are returned by the back end interface ((scanSettings)), so when loading the page, I directly request the interface to obtain the parameters. Location. Href = url; otherwise, there is no way to call it back. The official words are “after you get the loginTmpCode, you can construct a jump link here to jump”. The specific jump is this code, and then you will find that after scanning the TWO-DIMENSIONAL code, you can directly call back, and then it is the same as plan 1. There is another point to pay attention to. EncodeURIComponent is required to transcode the address of the callback. This step is to solve the problem of url confusion caused by the browser’s forced transcoding of special parameters.

vue3.0

  • If you are using Vue3.0, you may find that the index.html file is sometimes missing. What can you do? The code writing of 2.0 and 3.0 is the same, but the difference lies in how to introduce the js of the pin. Here, the following code is directly introduced in export:
components: {
            'dingtalk': {
                render(createElement) {
                    return createElement(
                        'script',
                        {
                            attrs: {
                                type: 'text/javascript'.src: 'https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js',}}); }},},Copy the code
  • Then we use it directly on the page
   <dingtalk></dingtalk>
Copy the code

Thus introduced, the following is written as 2.0!

How to achieve pin scan code login without VUE?

The difference is that vue has a life cycle, so we can get code in Created. For web projects, we only need to write Windows. Onload. So if it is two ways (account login and scan code login) support, is it possible to come in every time the error will be reported? If the code does not exist, the problem can be solved easily. If the code does not exist, then the code can be obtained.

If there are any questions about this scan code login, you can leave a message, I see will timely reply, I pursue is not write blog will not write, since written, the pursuit of every developer to understand!