uniapp 微信小程序 授权 登录

Uniapp 微信小程序 授权登录教程

在开发微信小程序时，用户授权登录是非常重要的一环。通过授权登录，开发者可以获取用户的基本信息，从而为用户提供更加个性化的服务。本文将介绍如何在Uniapp中实现微信小程序的授权登录，并提供详细的代码示例和注释。

一、准备工作

二、实现授权登录

1. 在页面中添加登录按钮：

   在你的小程序页面中添加一个用于触发登录的按钮，例如在pages/index/index.vue中：

   <template>
     <view>
       <button open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>
     </view>
   </template>
   

2. 在页面脚本中处理授权逻辑：

   在页面脚本部分，我们需要编写逻辑以处理用户的授权信息。

   <script>
   export default {
     data() {
       return {
         userInfo: null,
         hasUserInfo: false
       }
     },
     methods: {
       // 获取用户信息
       getUserInfo(e) {
         if (e.mp.detail.userInfo) {
           this.userInfo = e.mp.detail.userInfo;
           this.hasUserInfo = true;
           this.login();
         } else {
           uni.showModal({
             title: '警告',
             content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
             showCancel: false,
             confirmText: '返回授权',
             success: function(res) {
               if (res.confirm) {
                 console.log('用户点击了“返回授权”');
               }
             }
           });
         }
       },
       // 登录并获取用户信息
       login() {
         uni.login({
           provider: 'weixin',
           success: (loginRes) => {
             // 登录成功，获取用户code
             const { code } = loginRes;
             // 发送code到后台换取openId, sessionKey, unionId
             uni.request({
               url: 'https://你的服务器地址/api/login', // 你的登录API地址
               method: 'POST',
               data: {
                 code
               },
               success: (res) => {
                 if (res.data && res.data.success) {
                   const { openId, sessionKey, unionId } = res.data;
                   // 将用户信息和session存储到本地
                   uni.setStorageSync('userInfo', this.userInfo);
                   uni.setStorageSync('openId', openId);
                   uni.setStorageSync('sessionKey', sessionKey);
                   uni.setStorageSync('unionId', unionId);
                 } else {
                   uni.showToast({
                     title: '登录失败',
                     icon: 'none'
                   });
                 }
               },
               fail: () => {
                 uni.showToast({
                   title: '请求失败',
                   icon: 'none'
                 });
               }
             });
           },
           fail: (err) => {
             console.log('uni.login 接口调用失败，将无法正常使用开放接口等服务', err);
             uni.showToast({
               title: '登录失败',
               icon: 'none'
             });
           }
         });
       }
     }
   }
   </script>
   

三、后端服务器处理

在你的服务器上，你需要处理从微信获取到的code，并通过微信接口换取用户的openId、sessionKey和unionId。

示例代码（Node.js）：

const express = require('express');
const request = require('request');
const app = express();

const APPID = '你的AppID';
const APPSECRET = '你的AppSecret';

app.use(express.json());

app.post('/api/login', (req, res) => {
  const { code } = req.body;

  if (!code) {
    return res.status(400).json({ success: false, message: '缺少code参数' });
  }

  const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${APPID}&secret=${APPSECRET}&js_code=${code}&grant_type=authorization_code`;

  request.get(url, (err, response, body) => {
    if (err) {
      return res.status(500).json({ success: false, message: '请求微信接口失败' });
    }

    const data = JSON.parse(body);

    if (data.errcode) {
      return res.status(400).json({ success: false, message: data.errmsg });
    }

    res.json({
      success: true,
      openId: data.openid,
      sessionKey: data.session_key,
      unionId: data.unionid
    });
  });
});

app.listen(3000, () => {
  console.log('服务器启动成功，监听端口3000');
});

四、总结

通过以上步骤，我们实现了一个简单的微信小程序授权登录功能。完整的流程包括：

1. 用户点击微信登录按钮，触发getUserInfo事件。
2. 在getUserInfo事件中，调用uni.login获取用户的code。
3. 将code发送到服务器，服务器通过微信接口换取用户的openId、sessionKey和unionId。
4. 将用户信息存储到本地，以便后续使用。

以上示例代码仅供参考，实际开发中可能需要根据具体需求进行调整和完善。希望本文能对你在开发微信小程序授权登录功能时有所帮助。