WeChat applet Development (I) Detailed description of WeChat login process and program development

Small Program Development (1) Detailed login process and detailed program development

A very interesting thing recently I have been studying small program development. It took a little time to write a login process, including backend interfaces and Applet code.

Once logged on, we all know that we need an identifier to record the uniqueness of the user's identity. In unionId, It is the unique ID of the record we need, so how to obtain the unionId becomes the key, I divided the project into two parts: Mini-program and backend PHP code.

Applet Open Platform

Starting with our small program code

Let's briefly talk about the js Code logon process of our applet.

Login-> Get code-> getUserInfo get iv and encryptedData-> send it to your server for processing-> return the result to the Applet

Var API_URL = "your server address"; Page ({onLoad: function () {console. log ("iv"); wx. login ({// login process success: function (res) {// login successful if (res. code) {var code = res. code; wx. getUserInfo ({// getUserInfo process success: function (res2) {// console for obtaining userinfo successfully. log (res2); var encryptedData = encodeURIComponent (res2.encryptedData); // You must convert the encrypted string to URI encoded var iv = res2.iv; // request your server Login (code, encryptedData, iv) ;}}} else {Console. log ('failed to get user logon status! '+ Res. errMsg )}}});}})

Code: Required parameter for the server to obtain the sessionKey.

IV: the initial vector of the encryption algorithm. encryptedData: the encrypted string.

Pass code iv encryptedData to our server

Function Login (code, encryptedData, iv) {console. log ('Code = '+ code +' & encryptedData = '+ encryptedData +' & iv = '+ iv); // create a dialog wx. showToast ({title: 'logging on... ', icon: 'loading', duration: 10000}); // request server wx. request ({url: API_URL, data: {code: code, encryptedData: encryptedData, iv: iv}, method: 'get', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: {'content-type': 'application/json'}, // set the request header success: function (res) {// success wx. hideToast (); console. log ('server return '+ res. data) ;}, fail: function () {// fail // wx. hideToast () ;}, complete: function () {// complete }})}

If you read this document, you should know that the unionId we need is in encryptedData, so the server needs this information to parse the unionId.

Server processing logic

I use the laravel framework in php.

Decryption demo downloaded first

 

Here I chose the PHP code, put the three class files except the demo into our own project, and call them later.

Here we will explain the server processing process:

Token passed.

Detailed document

/*** Log on ** @ return Response */public function weixinlogin ($ user_id = null) {global $ App_Error_Conf, $ Gift_Ids, $ Server_Http_Path, $ Is_Local, $ Test_User, $ Good_Vcode, $ WeiXin_Xd_Conf; $ validator_result = input_validator (array ('code', 'iv ', 'encrypteddat'); if (! Empty ($ validator_result) {return response ($ validator_result);} $ js_code = $ _ REQUEST ['code']; $ encryptedData = $ _ REQUEST ['encrypteddata']; $ iv = $ _ REQUEST ['iv']; $ appid = $ WeiXin_Xd_Conf ['appid ']; $ secret = $ WeiXin_Xd_Conf ['secret']; $ grant_type = $ WeiXin_Xd_Conf ['Grant _ type']; // obtain session_key from $ user_info_url = $ WeiXin_Xd_Conf ['code2session _ url']; $ user_info_url = sprintf ("% s? Appid = % s & secret = % s & js_code = % s & grant_type = % ", $ user_info_url, $ appid, $ secret, $ js_code, $ grant_type ); $ weixin_user_data = json_decode (get_url ($ user_info_url); $ session_key = $ weixin_user_data-> session_key; // decrypt data $ data = ''; $ response = new response ($ appid, $ session_key); $ errCode = $ wxBizDataCrypt> decryptData ($ appid, $ session_key, $ encryptedData, $ iv, $ data );

The last data we get is the decrypted encryptedData that contains the unionId.

In this way, simple logon is implemented! The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.