Parlons du processus de connexion avec autorisation de l'applet Uniapp

Avec la popularité de l'Internet mobile, les mini-programmes sont devenus une application indispensable dans la vie quotidienne des gens. En tant que développeur, lors de la mise en œuvre des fonctions d'un mini-programme, cela implique souvent une connexion autorisée afin d'obtenir des informations sur l'utilisateur et d'effectuer certaines opérations nécessaires. Cet article vous présentera le processus de connexion d'autorisation de l'applet uniapp.

1. Introduction à la connexion autorisée au mini-programme

La connexion autorisée au mini-programme est l'un des scénarios les plus courants dans le développement de mini-programmes, et c'est également l'un des moyens importants pour obtenir une interaction et une expérience utilisateur. La connexion autorisée permet au mini-programme d'obtenir l'avatar, le surnom et d'autres informations de l'utilisateur, et de fournir des services plus personnalisés. Actuellement, il existe deux manières principales de se connecter aux mini-programmes : la connexion autorisée par WeChat et la connexion autorisée par numéro de téléphone mobile. La connexion autorisée par WeChat est la méthode de connexion officielle fournie par WeChat. Les utilisateurs peuvent scanner le code QR pour se connecter via WeChat, ou ils peuvent autoriser la connexion directement dans le mini programme. La connexion avec autorisation du numéro de téléphone mobile nécessite que l'utilisateur saisisse le numéro de téléphone mobile et le code de vérification pour vérification, puis se connecte.

2.Processus de connexion d'autorisation de l'applet Uniapp

Le processus de connexion d'autorisation de l'applet uniapp implique principalement les étapes suivantes :

2.1 Obtention des informations utilisateur de base

En utilisant l'API intégrée au framework uniapp, vous pouvez facilement obtenir les informations de base de l'utilisateur .Obtenez les informations relatives à l'utilisateur comme suit :

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

Ce code implémente simplement la méthode d'obtention des informations sur l'utilisateur. Une fois que l'utilisateur est autorisé à se connecter, le mini programme peut facilement obtenir le surnom, l'avatar et d'autres informations de l'utilisateur.

2.2 Déterminer si l'utilisateur est connecté

Avant d'effectuer certaines opérations nécessaires, nous devons nous assurer que l'utilisateur est connecté au mini-programme. À ce stade, nous devons déterminer l'état de connexion de l'utilisateur. Nous pouvons utiliser le stockage local pour déterminer si l'utilisateur est connecté.

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

2.3 Demander au serveur d'obtenir le statut de connexion

Si l'utilisateur ne s'est pas connecté ou si le statut de connexion a expiré, nous devons alors demander au serveur via l'interface de connexion d'obtenir le statut de connexion de l'utilisateur. Lors de la demande de l'interface de connexion, vous devez également obtenir le code d'identification de connexion temporaire via l'interface de connexion fournie par 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 Accédez à la page d'autorisation

Après avoir déterminé si l'utilisateur s'est connecté, si nous constatons que l'utilisateur ne s'est pas connecté ou que le statut de connexion a expiré, nous devons alors accéder à la page d'autorisation et autoriser la connexion .

//跳转到授权页面
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 Autoriser la connexion et obtenir des informations sur l'utilisateur

Après avoir accédé à la page d'autorisation, nous pouvons appeler l'API fournie par WeChat pour permettre à l'utilisateur d'autoriser la connexion à WeChat et d'obtenir les informations d'autorisation de l'utilisateur. Les étapes spécifiques pour obtenir les informations de l'utilisateur sont les suivantes :

1. Utilisez wx.getUserInfo pour obtenir les informations de base de l'utilisateur ;
2. Après avoir obtenu les informations de base de l'utilisateur, soumettez-les au serveur pour l'enregistrement ou la mise à jour des informations de l'utilisateur.

//获取用户信息
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. Résumé

La connexion autorisée est une fonction essentielle du développement de l'applet Uniapp et un moyen important pour obtenir une interaction et une expérience utilisateur. Le processus de connexion autorisée présenté dans cet article peut fournir une référence pour votre mini-programme, ce qui vous facilite la mise en œuvre de la fonction de connexion autorisée. Bien entendu, en raison de la longueur limitée de cet article, il reste encore de nombreux détails à prendre en compte dans la fonction de connexion autorisée. Il est recommandé aux développeurs de continuer à explorer et à s'entraîner dans des pratiques spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!