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

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

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，规定的登录按钮的写法

<!-- 参考代码，无需粘贴
<template>
  <div> —>


    <!-- 需要粘贴的部分 -->
    <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界面添加了一些代码，现在将这些测试代码删除，删除后

<script>
  export default {
    data () {
      return {
        mark:0
      }
    },

    methods: {
      addMark (add) {
        this.mark = this.mark + add
        console.log("mark为：",this.mark)  
      }
    }
  }
</script>

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是可以通过网络访问的

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

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

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等信息

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

解决方法：
完善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/）登录小程序账号—开发—开发设置中查看。

• useQcloudLogin参数改为false
  

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后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录