preface

Flowchart Overview

> < p style = "max-width: 100%; clear: both; > The login verification method widely used by applets is to obtain the openID of the user in the applets, which is a unique identifier, rather than using the user name and password to exchange token to the server to identify the login status like the browser login.Copy the code

  • The first step

    Wx.getsetting () is defined in the official documentation of the applet. It takes an Object parameter and has three callback functions. We usually only use the success and fail parameters

/* After encapsulation, three arguments are received, the first passed in to auth, * in the success callback to determine whether the user is correct"scope.userInfo": trueIf authorized, the onSuccess callback is performed if authorized, and onFail */ if notexport function getSetting(auth, onSuccess, onFail) {
      wx.getSetting({
        success (res) {
          console.log(res)
          if (res.authSetting[`scope.${auth}`]) {
            onSuccess(res)
          } else{onFail(res)}}, fail (res) {console.log(res) // directly throws an exception}})}Copy the code

Wx.getsetting () is called to verify permissions, but let’s take a look at the returned data. Unsurprisingly, authSetting returns null

  • The second step

    If we log in for the first time and verify authorization with wx.getSetting(), we will surely return an onFail callback. At this time, we need to pop the authorization panel to let the user perform manual authorization

    This is where you need to use the open type capability provided by the applet

    (Note: open-type needs to be mounted in a button.) Let’s see how to call it

// Open type="getUserInfo"And listen for getUserInfo <button open-type="getUserInfo" 
        @getuserinfo="getUserInfo"
        class="auth-btn"</button>Copy the code

After we get the user permission to look at the data returned by wx.getSetting(), the scoped. UserInfo under authSetting has changed to true

  • The third step

    Let’s look at wx.getUserInfo(), which gets user information and also has the success, fail callback functions. As the name implies, this function returns the user’s profile picture and name

// This is simply wrapped getUserInfo, adding two functions to the Success callbackexport function getUserInfo(onSuccess, onFail) {
      wx.getUserInfo({
        success(res) {
          console.log(res)
          let {userInfo} = res
          if (userInfo) {
            onSuccess(userInfo)
          } else{onFail(res)}}, fail(res) {console.log(res) // directly throws an exception}})}Copy the code

How about calling it from the page

    getUserInfo() {getUserInfo(// after getting userInfo, call the applets providedsetStorageSync Stores data locally (userInfo) => {wx.setStoragesync ('userInfo'Const openId = wx.getStoragesync (openId = wx.getStoragesync)'openId')
          if(! openId || openId.length === 0) { console.log('request for openId')
            getOpenId()
          } else {
            console.log('get the openId')
          }
        },
        () => {
          console.log('failed... ') // Get user information, throw an exception})},Copy the code

  • The fourth step

    If the openId is not found in the storage, the wx.login() method is called

    Call the interface to get the login credentials (code). Obtain login status information of the user through credentials, including the unique user id (OpenID) and session key (session_key) of the current login. The encryption and decryption communication of user data depends on session key. See for more details on how to use it

        export function getOpenId () {
      wx.login({
        success(res) {
          console.log(res)
          if(res.code) { var code = res.code; // return code console.log(code); // appId of applets var appId ='... '; // The secretId of the applet can be seen in the developer center'... ';
            wx.request({
              url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
              data: {},
              header: {
                'content-type': 'json'
              },
              success: function(res) {var openId = res.data.openid // Return openid console.log('the openid for'+ openid); }})}else{console.log(res) // directly throws an exception}}, fail(res) {console.log(res) // directly throws an exception}})}Copy the code

Thank you for your attention. Please forgive me for my poor speech