3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能

悠悠 2023-06-08 04:40 14阅读 0赞

在本地搭建好后端环境之后，我们来实现登录功能

#### 1、安装SDK插件 ####

SDK插件用来获取用户的openId

SDK是server端（也就是后端）的插件，帮助我们很容易的获取openId。openId是微信中用户身份的唯一标识，我们通过openId来识别用户，方便后期的用户管理

~/WeChatProjects/truth_hold$ npm install --save wafer2-client-sdk
    
    //系统返回信息
    + wafer2-client-sdk@2.1.0
    added 1 package from 1 contributor and audited 10626 packages in 10.382s
    > wafer2-client-sdk应用文档
    https://github.com/tencentyun/wafer2-client-sdk

#### 2、添加授权登录按钮 ####

编辑src/pages/index/index.vue文件的template部分，添加授权登录的按钮

登录按钮是小程序小程序集成的API，规定的登录按钮的写法

<button open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">授权登录</button>

#### 3、配置登录链接 ####

编辑src/config.js文件，config.js文件我们用来放配置型的代码，用下面的代码替换掉原先的代码

登录链接为什么是`http://localhost:5757/weapp/login`，后面的课程会具体分析

//域名，通过域名来找到服务器，在这里我们将本地电脑当成服务器
    //所以现在配置的域名是本地的，当项目实际上线，这里需要换成已备案的域名
    const host = 'http://localhost:5757'
    
    const config = { 
      host,
      loginUrl: `${ host}/weapp/login`
    }
    
    //我们在【ES6知识点详解】中讲过export的意思是向外暴露接口
    //这样在其他文件中可以通过import config from '@/config'引用
    //然后通过config.loginUrl就能得到在本文件中配置的值'http://localhost:5757/weapp/login'
    export default config

#### 4、删除测试代码 ####

在第二章学习ES6时，我们在index.vue界面添加了一些代码，现在将这些测试代码删除，删除后

#### 5、引用配置文件 ####

在src/pages/index/index.vue文件中添加import引用SDK插件、config.js文件

//参考代码，无需粘贴
    //<script>
    
    
      //需要粘贴的部分
      import qcloud from 'wafer2-client-sdk'
      import config from '@/config'
    
    
      //参考代码，无需粘贴
      //export default {

#### 6、添加登录方法 ####

编辑index.vue文件，在script的methods对象中添加方法loginSuccess和login

//参考代码，无需粘贴
    //methods: { 
      //addMark (add) { 
        ...
      //},
    
    
      //需要粘贴的部分
      //登录成功会调用loginSuccess方法
      loginSuccess (res) { 
        //将用户信息保存到缓存中，wx.setStorageSync是小程序的一个API，用来将信息添加到缓存中
        wx.setStorageSync('userinfo', res)
      },
    
      login () { 
        //wx.showToast是小程序的消息提示框
        wx.showToast({ 
          title: '登录中',
          icon: 'loading'
        })
        //通过SDK插件，请求config.js中配置的loginUrl路径（http://localhost:5757/weapp/login）
        qcloud.setLoginUrl(config.loginUrl)
        qcloud.login({ 
          success: res => { 
            //登录成功后，显示底部导航栏
            wx.showTabBar()
            console.log('登录成功', res)
            //调用loginSuccess方法，并将用户信息作为参数
            this.loginSuccess(res)
          },
    
          fail: err => { 
            console.error('登录失败', err)
          }
        })
      }
    
    
    //参考代码，无需粘贴
    //},

#### 7、授权本地域名 ####

我们在src/config.js文件中定义的域名http://localhost:5757，不是一个真正的域名，只有在我们自己电脑上才有效

真正的域名如http://baidu.com是可以通过网络访问的

对于这种不合法的域名，在微信开发者工具中，需要授权一下

点击右上角>>图标，点击详情—本地设置，选中不校验合法域名，就可以了~

![format_png][]

![format_png 1][]

#### 8、测试 ####

###### （1）打开终端，进入项目目录，打开两个窗口同时运行npm run dev ######

第一个窗口，在项目目录下运行`npm run dev`用来启动前端代码

~/WeChatProjects/truth_hold$ npm run dev

第二个窗口，在server目录下运行`npm run dev`用来启动后端代码

~/WeChatProjects/truth_hold/server$ npm run dev

然后点击授权登录按钮，右侧控制台出现下列信息，说明登录成功了

控制台中出现的，就是登录接口获取到的当前登录用户的微信昵称、城市、openId等信息

![format_png 2][]

###### （2）登录可能出现错误–登录失败 Error: 响应错误 ######

![format_png 3][]  
**解决方法：**  
完善server/config.js文件中的下列字段

qcloudAppId: '必填',
    qcloudSecretId: '必填',
    qcloudSecretKey: '必填',
    // 微信小程序 App ID
    appId: '必填',
    // 微信小程序 App Secret
    appSecret: '必填',
    // 是否使用腾讯云代理登录小程序，设置为false
    useQcloudLogin: false,

*  qcloudAppId、qcloudSecretId、qcloudSecretKey这三个参数，我们在上一节已经配置过了。
 *  appId、appSecret这两个参数需要在微信公众平台（[https://mp.weixin.qq.com/][https_mp.weixin.qq.com]）登录小程序账号—开发—开发设置中查看。
 *  useQcloudLogin参数改为false  
    ![format_png 4][]

#### 9、查看数据库 ####

登录mysql，可以看到cSessionInfo表中已经有一条客户信息了

我们主要会用到user\_info字段，里面包含了openId、nickName等用户基本的信息

mysql> use cAuth;
    
    mysql> select * from cSessionInfo;
    | open_id                      | uuid                                 | skey                                     | create_time         | last_visit_time     | session_key              | user_info                                                                                                                                                                                                                                                                                                                                                         
    +------------------------------+--------------------------------------+--------------------
    | oqURH46cYrMV3IwrrflosChndRTI | 88d1f834-bd64-491e-9779-18f3653528cc | dcd4a49ed87a0f4ebdff0f40ee4a53ed5572aa01 | 2019-06-16 11:19:43 | 2019-06-16 20:13:53 | aZha8RCFtrY1mp98kj9hSg== | {"openId":"oqURH46cYrMV3IwrrflosChndRTI","nickName":"ww","gender":2,"language":"zh_CN","city":"Qingdao","province":"Shandong","country":"China","avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ2Te6nOOqiaeiae0WCWxRHKedpM7ZOs8AIU6og0ia1WChutbiaaaibthT7GbrewG0licrkbps8XajcHXzQ/132","watermark":{"timestamp":1560687233,"appid":"wxd2a52ff3594d8d7d"}} |
    +------------------------------+--------------------------------------+--------------------
    1 row in set (0.00 sec)

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 5][]

[format_png]: /images/20230531/30e059e1c39647dca76c3f18f4e43575.png
[format_png 1]: /images/20230531/64eef8e40f7c4951ba6c81b796b252db.png
[format_png 2]: /images/20230531/10bd0c7f44064a95b581dae7fba35175.png
[format_png 3]: /images/20230531/ea9f0624c5ce4642a2fab88825ca2a5f.png
[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[format_png 4]: /images/20230531/8bed6946e1924986ac2216711452f91a.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 5]: /images/20230531/02f099ad823340fdaabba49ed623ad56.png