Let's talk about the uniapp applet authorization login process

With the popularization of mobile Internet, small programs have become an indispensable application in people's daily lives. As a developer, when implementing the functions of a mini program, it often involves authorized login in order to obtain user information and perform some necessary operations. This article will introduce you to the authorization login process of the uniapp applet.

1. Introduction to authorized login of Mini Program

Authorized login of Mini Program is one of the most common scenarios in Mini Program development, and it is also one of the important means to achieve interaction and user experience. Authorized login allows the mini program to obtain the user's avatar, nickname and other information, and provide more personalized services. Currently, there are two main ways to log in to mini programs: WeChat authorized login and mobile phone number authorized login. WeChat authorized login is the official login method provided by WeChat. Users can scan the QR code to log in through WeChat, or they can authorize the login directly in the mini program. Mobile phone number authorization login requires the user to enter the mobile phone number and verification code for verification, and then log in.

2.Uniapp applet authorization login process

The authorization login process of uniapp applet mainly involves the following steps:

2.1 Obtain basic user information

Using the built-in API of the uniapp framework, you can easily obtain the basic information of the user. You can obtain user-related information as follows:

uni.getUserInfo({
  success: function (res) {
    console.log(res.userInfo);
  }
});

This code simply implements the method of obtaining user information. Once the user authorizes the login, the applet You can easily obtain the user's nickname, avatar and other information.

2.2 Determine whether the user is logged in

Before performing some necessary operations, we need to ensure that the user has logged in to the mini program. At this time, we need to determine the user's login status. We can use local storage to determine whether the user is logged in.

//判断用户是否登录
function isLoggedIn() {
  const token = uni.getStorageSync('token');
  return token ? true : false;
}

2.3 Request the server to obtain the login status

If the user has not logged in or the login status has expired, then we need to request the server through the login interface to obtain the user's login status. While requesting the login interface, you also need to obtain the temporary login credential code through the login interface provided by uniapp.

//获取登录凭证code
uni.login({
  provider: 'weixin',
  success(loginRes) {
    const code = loginRes.code;
    //调用登录接口
    uni.request({
      url: '接口地址',
      data: {
        code: code,
      },
      success: function (res) {
        console.log('response from server', res);
        //将登录凭证存储到本地
        uni.setStorageSync('token', res.data.access_token);
      },
      fail: function (err) {
        console.log('err', err);
      }
    });
  },
  fail(err) {
    console.log('login fail', err);
  }
});

2.4 Jump to the authorization page

After determining whether the user has logged in, if it is found that the user has not logged in or the login status has expired, then we need to jump to the authorization page and proceed Authorized to log in.

//跳转到授权页面
function toAuthorizationPage(){
    uni.navigateTo({
        url: '/pages/authorize/index',
        success:function(res){
            console.log('navigate success',res);
        },
        fail:function(err){
            console.log('navigate fail',err);
        }
    })
}

2.5 Authorize login and obtain user information

After jumping to the authorization page, we can call the API provided by WeChat to allow the user to log in with WeChat authorization and obtain the user's authorization information. The specific steps to obtain user information are as follows:

1. Use wx.getUserInfo to obtain the user’s basic information;
2. After obtaining the user’s basic information, submit it Go to the server to register or update user information.

//获取用户信息
wx.getUserInfo({
    success:function(res){
        var userInfo = res.userInfo;
        //将用户信息提交到服务器进行注册或更新
        uni.request({
            url:'用户信息提交地址',
            method:"post",
            data:userInfo,
            success:function(res){
                console.log('response from server',res);
            },
            fail:function(err){
                console.log('err',err);
            }
        })
    },
    fail:function(err){
        console.log('get user info fail',err);
    }
})

3. Summary

Authorized login is a core function of Uniapp applet development and an important means to achieve user interaction and experience. The authorized login process introduced in this article can provide some reference for your mini program, making it easier for you to implement the authorized login function. Of course, due to the limited length of this article, there are still many details to consider in the authorized login function. It is recommended that developers continue to explore and practice in specific practices.

The above is the detailed content of Let's talk about the uniapp applet authorization login process. For more information, please follow other related articles on the PHP Chinese website!