​

Introduction to a pure Vue article From the perspective of JS Xiaobai (the author himself), record how to realize code scanning login according to the official documents of Huawei Welink, and explain some problems encountered during the period (how to introduce external JS, the life cycle of Vue.js, cross domain requests, etc.).

Preliminary cognition and basic steps

First, we went to Huawei's Wellink official to find the relevant development documents of "code scanning login"( I'll jump directly ), learn about what to do and the implementation process.

Draw the following conclusions: after the user scans the code and confirms, directly jump to the Huawei terminal, and then the Huawei terminal will jump to the address you set with the user's login code. If you want to get the user's information, you need to pass the user's code to the back end, and then get the user's information from the back end.

Then, according to the official documents, we need to log in to the open platform, create light applications, set the code scanning login jump address (this has some stress. Later, if the setting is wrong, we will directly report 403 in the subsequent jump), and check the client_id,client_secret (application ID, application secret key) and so on until the highlight comes! The front end constructs the code scanning login page and obtains the authorization code!

Next, step by step, start with the official documents to explore how to use Vue JS step by step.

The front end constructs the code scanning login page and obtains the authorization code

(corresponding to part 3.1 of the official document) import js files

The official requirement is to import js files into the login page

<script src="https://login.welink.huaweicloud.com/sso-proxy-front/public/qrcode/0.0.1/wlQrcodeLogin.js"></script>

In Vue How to introduce external js into js? A rough solution is in public / index HTML, as shown in the following figure:

OK, this step has been solved (funny), but it doesn't seem elegant enough. However, the program and I, one can run on the line, and then come back to find another way when we have time.

(corresponding to Section 3.2 / 3.3 / 3.4 of the official document) instantiate the js object, obtain the scanned loginCode, and obtain the authorization code

Extract the official documents:

Instantiate the following js objects where WeLink code scanning login is required:

Use when needed WeLink The place where the code scanning login takes place is instantiated as follows js Object:

  var url = 'https://third.com/demo/index.html';
  var obj = wlQrcodeLogin({
      id:"login_container",//Here, you need to define an HTML tag on your own page and set the ID, such as < div id = "login_container" > < / div > or < span id = "login_container" ></span>
      client_id: "20200605234846149700001", //Your own client_id
      response_type: "code", 
      scope: "snsapi_login", 
      state: "eiere8458565df43gggfag4g35", 
      redirect_uri: url,
      style: "border:none;background-color:#FFFFFF;",
      width : "365",
      height: "400",
      self_redirect: false});

There is a sentence in the middle. You have to follow it and complete it in the template tag in the vue component file

Here, you need to define an HTML tag on your own page and set the ID, such as < div id = "login_container" > < / div > or < span id = "login_container" ></span>

Where should this code be added? Is it directly added to the script of vue component file?
I've tried. If I can't, an error will be reported, indicating that I can't find the id you set.
Where should I add it? It should be added to export default {mounted()}!
Why couldn't you find it before? At that time, according to the life cycle of Vue, the relevant DOM nodes have not been rendered, and they must not be found!

Similarly, part 3.3 / 3.4 / 3.5 also allows you to put some js in. We can operate in the same way as above~

Put my finished product login Vue, by the way, generates a random state (official explanation: this parameter is used to maintain the state of the request and callback, which can prevent csrf attack (Cross Site Request Forgery Attack). It is recommended that the third party bring this parameter and return it to the third party as it is after the authorization request. The function that can be set as a random number (the length and randomness shall be guaranteed) and verified by session after return is attached:

I also explained in the comments that there are some things to pay attention to. Put this line out separately and pay attention to correct it. Otherwise, the Welink API jump prompt 403 is illegal.

var redirect_uri= encodeURIComponent("http://localhost:8080/#/home "); / / remember to change it. Note that it is the same as the" application management background "address you filled in!

<template>
	<div class="wrap">
		<div id="qr_code"></div>

	</div>
</template>

<script>
	export default {
		name: 'login',
		mounted() {
			//Random state generation
			var randomString = function() {
				var origin = 'abcdefghijklmnopqrstuvwxyz0123456789';
				var length = origin.length;
				//16 random characters are generated by default
				var str = '';
				for (let x = 0; x <= 15; x++) {
					let pos = Math.floor(Math.random() * length);
					str += origin.substring(pos, pos + 1);
				}
				return str;
			};
			//Get QR code
			var client_id = "20200305145919109854169";//Remember to change
			var url = 'https://your_site/';// Remember to change
			var obj = wlQrcodeLogin({
				id: "qr_code", //Here, you need to define an HTML tag on your own page and set the ID, such as < div id = "login_container" > < / div > or < span id = "login_container" ></span>
				client_id: client_id,
				response_type: "code",
				scope: "snsapi_login",
				state: randomString(),
				redirect_uri: url,
				style: "border:none;background-color:#FFFFFF;",
				width: "365",
				height: "400",
				self_redirect: false
			});
			
			//Scan the Code successfully and get the Code
			var handleMessage = function(event) {
				var origin = event.origin;
				console.log("origin", event);
				if (origin == "https://login.welink.huaweicloud.com ") {/ / judge whether it comes from WeLink wlLogin code scanning event. Comment the test environment first and release it after going online
					var loginCode = event.data;
			
					//After you get the loginCode, you can construct a jump link here to jump
					console.log("loginCode", loginCode);
			
					if (loginCode) {
						redirectWithCode(loginCode); //Construct jump link function. Refer to Section 3.4 below for function definition
					}
				}
			};
			if (typeof window.addEventListener != 'undefined') {
				window.addEventListener('message', handleMessage, false);
			} else if (typeof window.attachEvent != 'undefined') {
				window.attachEvent('onmessage', handleMessage);
			}
			
			//After getting the Code, jump to the background after verification
			function redirectWithCode(code) {
			      var serverUrl = "https://login.welink.huaweicloud.com/sso/oauth2/sns_authorize"
			      var client_id= "20200305145919109854169";//Remember to change
			      var response_type="code"; 
			      var scope= "snsapi_login";
			      var state= randomString();
			      var redirect_uri= encodeURIComponent("http://localhost:8080/#/home "); / / remember to change it. Note that it is the same as the" application management background "address you filled in!
			      var url="";
			
			      url = serverUrl+"?"
			      +"client_id"+ "="+ client_id +"&"
			      +"response_type"+ "="+ response_type +"&"
			      +"scope"+ "="+ scope +"&"
			      +"state" + "="+ state +"&"
			      +"redirect_uri"+ "="+ redirect_uri +"&"
			      +"code" + "="+ code;
			
			      window.location.href =url;
			    }
		}
	}
	
</script>

<style>
</style>

If you want to know what will happen next, listen to the next time and break it down~