Introducing user authorization login in WeChat applet development

This article will help readers achieve authorized login of users on mini programs based on WeChat Developer Tools & C# environment.

Preparation:

WeChat developer tools download address: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信小Program development documents: https://developers.weixin.qq.com/miniprogram/dev/index.html

Development:

At the beginning of development, we need to first clarify that WeChat has formulated For a good authorization login process, please refer to the official API - Login Interface.

You will see the login authorization process developed by WeChat for developers:

As shown in the figure, it is a smooth process The process of user login authorization.

Why is it said to be a forward process? Because in real mini program development, we are not sure when the user needs to initiate the above login process (for example: the user loses his credentials in some specific scenarios, but he does not exit the mini program but inside the mini program Doing jumps and other related operations may lead to some unexpected exceptions), so we need to add a layer of detection mechanism in addition to this forward process to solve these abnormal scenarios. In the official API, wx .checkSession can just solve this problem to a certain extent.

Then, our authentication process should actually be:

- The small program wx.checkSession verifies that the login status is invalid

- Success: The interface call is successful Callback function, session_key has not expired, the process is over; -

- fail: The callback function that failed to call the interface, session_key has expired

-"The applet side wx.login gets Code and wx.request submits Code to its own server

-" Submit Apply Appid AppSecret Code to the WeChat side server to get session_key & openid

#-"The server generates 3rd_session ( WeChat side-based considerations based on the session_key & openid. It is recommended that developers do not use key information such as openid

) and return 3rd_session to small programs Duan

-"Mini Program side wx.setStorage storage 3rd_session (comes with this parameter when the subsequent user operation is required)

##-" Mini Program side wx.Getuserinfo to get user information wx.getStoTorage to get After 3rd_session data, then submit to your own server

-" ##Mini program:

In the mini program, create a new general JS for basic support

and reference it in some pages that need to be referenced

var common = require("../Common/Common.js")

Next, implement the logic in Common.js

//用户登陆
function userLogin() {
  wx.checkSession({
    success: function () {
      //存在登陆态
    },
    fail: function () {
      //不存在登陆态
      onLogin()
    }
  })
}

function onLogin() {
  wx.login({
    success: function (res) {
      if (res.code) {
        //发起网络请求
        wx.request({
          url: 'Our Server ApiUrl',
          data: {
            code: res.code
          },
          success: function (res) {
            const self = this
            if (逻辑成功) {
              //获取到用户凭证 存儲 3rd_session 
              var json = JSON.parse(res.data.Data)
              wx.setStorage({
                key: "third_Session", 
                data: json.third_Session
              })
              getUserInfo()
            }
            else {

            }
          },
          fail: function (res) {

          }
        })
      }
    },
    fail: function (res) {
  
    }
  })

}

function getUserInfo() {
  wx.getUserInfo({
    success: function (res) {
      var userInfo = res.userInfo
      userInfoSetInSQL(userInfo)
    },
    fail: function () {
      userAccess()
    }
  })
}

function userInfoSetInSQL(userInfo) {
  wx.getStorage({
    key: 'third_Session',
    success: function (res) {
      wx.request({
        url: 'Our Server ApiUrl',
        data: {
          third_Session: res.data,
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl,
          gender: userInfo.gender,
          province: userInfo.province,
          city: userInfo.city,
          country: userInfo.country
        },
        success: function (res) {
          if (逻辑成功) {
            //SQL更新用户数据成功
          }
          else {
            //SQL更新用户数据失败
          }
        }
      })
    }
  })
}

At this point, the process of the mini program is basically completed, and then implement your own service API

Login interface logic example

 if (dicRequestData.ContainsKey("CODE"))
        {
            string apiUrl = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code", ProUtil.SmartAppID, ProUtil.SmartSecret, dicRequestData["CODE"]);
        
            HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(apiUrl);
            myRequest.Method = "GET";
            HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();
            StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);
            string content = reader.ReadToEnd();
            myResponse.Close();
            reader.Close();
            reader.Dispose();

            //解析
            userModel ReMsg = JSONUtil.JsonDeserialize<userModel>(content); //解析
            if ((!string.IsNullOrWhiteSpace(ReMsg.openid)) && (!string.IsNullOrWhiteSpace(ReMsg.session_key)))
            {
                // 成功 自定义生成3rd_session与openid&session_key绑定并返回3rd_session

            }
            else
            {
                // 错误 未获取到用户openid 或 session
            }
        }
        else
        {
            // 错误 未获取到用户凭证code
        }

The UserInfoUpdate interface will not be described in detail here. Users can operate the data according to their own conditions. The relevant parameter information returned when the WeChat call is successful is as follows

So far , completed the basic authorization login of the mini program and the acquisition of user information.

The last one is a little trick I learned from others to make small change~ Give me some money to encourage me!!!

After reading all the above carefully

If you don’t understand anything, please leave a message and ask~

Note: The above content has been deleted, and only the general content is retained. In specific projects, there must be some logic that needs to be adjusted. Students who want to learn from it, please pay attention to

Related free learning recommendations:

WeChat Mini Program Development

The above is the detailed content of Introducing user authorization login in WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!