uni-app微信小程序授权登录实操演战

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

大家好！

本文主要介绍了使用跨端开发框架uni-app开发微信小程序授权登录的详细步骤，与企业内部系统进行账号关联，首次登录时，将用户微信与内部系统账号进行绑定，在以后应用中，实现微信一键登录，业务流程图如下：

注意：业务流程中，关键点是通过微信API接口（api.weixin.qq.com/sns/jscode2…）来获得微信用户在该小程序中的唯一ID，即open_id。本文示例代码中为了展示该请求过程，将获取到open_id过程放到了前端执行。在实际开发中，要考虑安全问题，避免在前端代码中暴露AppID和AppSecret，将请求该过程放到后端来执行。

前置条件：

开通微信小程序
安装HbuildeX开发工具及微信开发者工具

1 获取AppID和AppSecret

首先在微信公众平台注册微信小程序，注册成功后，进入小程序管理后台。

点击左侧菜单栏中的开发 -> 开发管理,右侧选择开发设置，我们就可以看到该AppID(小程序ID) ，点击重置AppSecret(小程序密钥) ，提示管理员扫码，即可生成AppSecret，我们将AppID和AppSecret记录保存下来。

2 创建项目

打开HbuilderX，文件->新建->项目，创建uni-app的默认模板项目。

打开项目根目录下的manifest.json配置文件，选择微信小程序配置，将微信小程序的AppID填写到对应的文本框中。

3 代码实现

我们在项目默认创建的pages/index/index中做示例。

3.1 创建登录按钮及信息展示

 <template>
     <view class="content">
         <!-- 用户信息显示 -->
         <image class="logo" :src="userInfo.avatarUrl"></image>
         {{ userInfo.nickName }}
         <view class="text-area">
             
             <!-- 微信登录按钮 -->
             <button class="login-btn" type="primary" @click="wxLogin">
                 微信用户一键登录
             </button>
         </view>
     </view>
 </template>
复制代码

3.2 定义 AppID和AppSecret及userInfo

 data() {
     return {
         AppId: 'wxae5813756948397b',
         AppSecret: '3656299fd4ae977e0de0144xxxxxx',
         userInfo:{
             avatarUrl:'',
             nickName:''
         }
     }
 },
复制代码

3.3 创建wxLogin()方法

在wxLogin()方法中，使用到uni-app两个API：uni.login()和uni.getUserInfo()（文档地址），其参数说明为：

uni.login()

uni.getUserInfo()

 wxLogin() {
     uni.login({
         provider: 'weixin',
         onlyAuthorize: true,
         success: (loginRes) => {
             if (loginRes.errMsg == 'login:ok') {
                 // 1 获得js_code
                 let js_code = loginRes.code
                 // 2 请求微信api 传递4个参数 appid secret js_code grant_type
                 uni.request({
                     url: `https://api.weixin.qq.com/sns/jscode2session`,
                     data: {
                         appid: this.AppId,
                         secret: this.AppSecret,
                         js_code,
                         grant_type: 'authorization_code'
                     },
                     success: (res) => {
                         // 3 获得openid
                         let openid = res.data.openid
                         // 4 openid提交给后端接口 伪代码
                         uni.request({
                             url: 'https://api.abc.com/xcxlogin',
                             data: {
                                 openid
                             },
                             success: (res) => {
                                 // 5 判断该微信用户是否是系统中用户
                                 if (res.data.isUser) {
                                     uni.getUserProfile({
                                         desc: '获取个人信息',
                                         success: (res) => {
                                             console.log(res);
                                             // 6 更新数据库头像、微信名信息 跳转业务页                                            
                                             // do some thing
                                         }
                                     })
                                 }
                             }
                         })
                     }
                 })
             }
         }
     })
 }
复制代码

但在实践中，如果将uni.getUserProfile嵌套在uni.login中，将无法弹出授权对话框，需要用promise来拉平执行。

3.4 优化后的代码

 // 获取微信个人信息
 getUserInfo() {
     return new Promise((resolve, reject) => {
         uni.getUserProfile({
             desc: '获取个人信息',
             success: (res) => {
                 resolve(res.userInfo)
             },
             fail: (err) => {
                 reject(err)
             }
         })
     })
 },
 // 获取js_code
 getJsCode() {
     return new Promise((resolve, reject) => {
         uni.login({
             success(res) {
                 resolve(res.code)
             },
             fail: (err) => {
                 reject(err)
             }
         })
     })
 },
 // 微信登录方法
 wxLogin() {
     let userInfo = this.getUserInfo();
     let js_code = this.getJsCode();
 
     Promise.all([userInfo, js_code]).then((res) => {
         this.userInfo = res[0]
         // 两个执行完毕后，
         uni.request({
             url: `https://api.weixin.qq.com/sns/jscode2session`,
             data: {
                 appid: this.AppId,
                 secret: this.AppSecret,
                 js_code: res[1],
                 grant_type: 'authorization_code'
             },
             success: (res) => {
                 // 获得openid
                 let openid = res.data.openid
                 // 以下系伪代码，调试时请注意
                 uni.request({
                     url: 'https://api.abc.com/xcxlogin',
                     data: {
                         openid
                     },
                     success: (res) => {
                         // 5 判断该微信用户是否是系统中用户
                         if (res.data.isUser) {
                             uni.getUserProfile({
                                 desc: '获取个人信息',
                                 success: (res) => {
                                     console.log(res);
                                     // 6 更新数据库头像、微信名信息 跳转业务页                                            
                                     // do some thing
                                 }
                             })
                         }
                     }
                 })
             }
         })
     }).catch(err => {
 
     })
 },
复制代码