Wechat applet development - user authorization to log in to "suggestions collection"

Hello everyone , I meet you again , I'm your friend, Quan Jun .

This article will help the reader to realize based on WeChat Developer tools & C# Environmental Science Users under Applet Authorized login on .

Get ready ：

Wechat developer tool download address ：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

Wechat applet development document ：https://developers.weixin.qq.com/miniprogram/dev/index.html

Development ：

At the beginning of development , We need to make sure that wechat has developed the authorization login process , see official API – Login interface .

You will see the login authorization process developed by wechat for developers ：

Pictured , That is, a forward user login authorization process .

Why is it a forward process ？ Because in real small program development , We are not sure when users need to start the above login process （ Such as ： The user's credentials are lost in some specific scenarios , but Ta Instead of exiting the applet, I did jump and other related operations inside the applet , That is, it may cause some unexpected exceptions ）, therefore , We need to be outside this forward process , Add a layer of detection mechanism , To solve these abnormal scenarios , And the official API in ,wx.checkSession It can solve this problem to a certain extent .

that , Our certification process should actually be ：

– Applet wx.checkSession Verify that the login status is invalid

– success ： Interface calls the successful callback function ,session_key Not expired , End of the process ;

– fail ： Interface call failed callback function ,session_key Has expired

-》 Small program end wx.login obtain code and wx.request Submit code To your server

-》 Own server Submit Appid + appSecret + code Go to wechat server obtain session_key & openid

-》 Own server according to session_key & openid Generate 3rd_session（ Wechat party proposed security considerations , It is recommended that developers do not use openid And other key information for data transmission ） And back to 3rd_session To the applet side

-》 Small program end wx.setStorage Storage 3rd_session ( When vouchers are required for subsequent user operations With this parameter )

-》 Small program end wx.getUserInfo Get user information + wx.getStorage obtain 3rd_session After the data , Together wx.request Submit to your server

-》 Own server SQL User data information update , End of the process ;

The train of thought is finished , Next, implement the process

Small program end ：

In the applet , Create a new generic JS Do basic support

And reference it on some pages that need to be referenced

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

Copy

next , stay Common.js To implement logic

// The user login 
function userLogin() {
  wx.checkSession({
    success: function () {
      // Login status exists 
    },
    fail: function () {
      // There is no login status 
      onLogin()
    }
  })
}

function onLogin() {
  wx.login({
    success: function (res) {
      if (res.code) {
        // Initiate network request 
        wx.request({
          url: 'Our Server ApiUrl',
          data: {
            code: res.code
          },
          success: function (res) {
            const self = this
            if ( Logical success ) {
              // Get user credentials   Storage  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 ( Logical success ) {
            //SQL User data updated successfully 
          }
          else {
            //SQL Failed to update user data 
          }
        }
      })
    }
  })
}

Copy

thus , The process of applet is basically completed , Then realize our own service API

Login Example of interface logic

 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();

            // analysis 
            userModel ReMsg = JSONUtil.JsonDeserialize<userModel>(content); // analysis 
            if ((!string.IsNullOrWhiteSpace(ReMsg.openid)) && (!string.IsNullOrWhiteSpace(ReMsg.session_key)))
            {
                //  success   Custom build 3rd_session And openid&session_key Bind and return 3rd_session

            }
            else
            {
                //  error   The user... Was not obtained openid  or  session
            }
        }
        else
        {
            //  error   User credentials not obtained code
        }

Copy

UserInfoUpdate The interface will not be repeated here , Users can operate the data according to their own conditions , The relevant parameter information returned when the wechat party calls successfully is as follows

thus , Completed the basic authorization login of the small program and the acquisition of user information .

After reading all the above carefully

What don't you know Welcome to leave a message ~

notes ： The above contents have been deleted , Keep only general content . In a specific project, there must be some logic that needs to be adjusted , Please pay attention to the students who quote

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/131681.html Link to the original text ：https://javaforall.cn