聊聊uniapp小程序授权登录流程

PHPz原创: 2023-04-23 17:35:28112浏览

随着移动互联网的普及，小程序已经成为了人们日常生活中不可或缺的应用。作为一名开发者，在实现小程序的功能时，经常会涉及到授权登录，以便获取用户信息和进行一些必要的操作。本文将为大家介绍uniapp小程序的授权登录流程。

1.小程序授权登录简介

小程序授权登录是小程序开发中最为常见的场景之一，也是实现互动和用户体验的重要手段之一。授权登录可以让小程序获取用户的头像、昵称等信息，并能提供更为个性化的服务。目前，小程序的登录方式主要有两种：微信授权登录和手机号授权登录。微信授权登录是微信官方提供的登录方式，用户可以通过微信扫描二维码登录，也可以直接在小程序中授权登录。手机号授权登录则是需要用户输入手机号码和验证码进行验证，然后进行登录。

2.uniapp小程序授权登录流程

uniapp小程序的授权登录流程主要涉及以下几个步骤：

2.1 获取用户基本信息

通过uniapp框架内置的 API 可以轻松获取用户的基本信息，可以获取用户相关信息如下：

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

这段代码简单的实现了获取用户信息的方法，一旦用户授权登录后，小程序可以轻松获取到用户的昵称、头像等信息。

2.2 判断用户是否登录

在进行一些必要的操作前，我们需要确保用户已经登录了小程序，这时候就需要进行用户登录状态的判断。我们可以通过本地存储来判断用户是否已经登录。

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

2.3 请求服务器获取登录状态

如果用户还没有登录或者登录状态已经失效，那么我们就需要通过登录接口去请求服务器，获取用户的登录状态。在请求登录接口的同时，还需要通过uniapp提供的登录接口，获取临时登录凭证 code。

//获取登录凭证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 跳转到授权页面

在判断用户是否已经登录后，如果发现用户还没有登录或者登录状态已经失效，那我们就需要跳转到授权页面并进行授权登录了。

//跳转到授权页面
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 授权登录并获取用户信息

在跳转到授权页面后，我们可以调用微信提供的 API，让用户进行微信授权登录，并获取用户的授权信息。获取用户信息的具体步骤如下：

使用 wx.getUserInfo 获取用户的基本信息；
在获取到用户基本信息后，将其提交到服务器，进行用户信息注册或更新。

//获取用户信息
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);
    }
})